TrainMateX Vision

Problem / Kontext

Jag ville bygga något som visade hela stacken från autentisering till databas, inte ett lekprojekt utan något strukturerat som en riktig feature. TrainMateX Vision täcker hela flödet: användaren registrerar sig via Clerk, får ett JWT, och det tokenet skyddar varje backend-endpoint. Domänen är träningshantering (program, pass, övningar) för att det är tillräckligt konkret för att göra datamodellen meningsfull.

Lösning / Arkitektur

Frontend byggdes med React 19, TypeScript, Vite, Tailwind CSS v4, TanStack Router för typsäker routing och TanStack React Query för server-state-hantering. Clerk hanterar autentisering och utfärdar JWTs som konsumeras av backend. Backend är ett ASP.NET Core Web API byggt med C# / .NET 9, EF Core och SQL Server, organiserat i lager: API, Application, Domain och Infrastructure. Alla endpoints är JWT-skyddade med en CORS-policy, och API:et exponerar träningsprogram, pass, övningar i pass, ett övningskatalog och användarprofilhantering.

Så fungerar det – Arkitekturflöde

1. 1Användaren navigerar till React-frontendet (Vite + TanStack Router)
2. 2Clerk hanterar autentisering — användaren loggar in och tar emot ett signerat JWT
3. 3TanStack React Query skickar förfrågningar till ASP.NET Core API:et med JWT som Bearer-token
4. 4ASP.NET Core-middleware validerar JWT — otillåtna förfrågningar avvisas tidigt
5. 5Application-lagret behandlar förfrågan och anropar Domain-logik
6. 6Infrastructure-lagret (EF Core) läser eller skriver till SQL Server
7. 7API:et returnerar ett JSON-svar — React Query cachar resultatet och uppdaterar UI

Mål

• Bygga en fullstack-app som visar lagerindelad backend-arkitektur i praktiken
• Integrera Clerk-autentisering med ett JWT-skyddat ASP.NET Core API
• Implementera CRUD-flöden för träningsprogram, pass och övningar
• Använda TanStack Router och React Query för en modern, typsäker frontend
• Deploya med GitHub Actions för automatiserad CI/CD

Utmaningar

• Koppla Clerk JWT-tokens från frontend in i ASP.NET Core middleware-pipeline
• Designa en ren domänmodell för träningsprogram, pass och övningar med korrekta relationer
• Hålla Application- och Domain-lagren fria från infrastrukturbekymmer
• Konfigurera CORS korrekt för en cross-origin frontend/backend-uppsättning

Viktiga tekniska beslut

• Clerk för autentisering – vältestad auth-leverantör med enkel JWT-integration
• TanStack Router för typsäker, filbaserad routing i React
• Lagerindelad backend-arkitektur (API / Application / Domain / Infrastructure) för underhållbarhet
• EF Core + SQL Server för bekant, robust .NET-persistens
• GitHub Actions för automatisk CI/CD-deployment

Resultat / Effekt

• En komplett fullstack-app med Clerk-auth, skyddade API-endpoints och full CRUD för träningspass och program
• Fungerande integration över alla lager: React-frontend, Clerk JWT, ASP.NET Core API, SQL Server
• Ren lagerindelad backend-arkitektur som är enkel att bygga vidare på
• Praktisk erfarenhet av TanStack Router och TanStack React Query i ett riktigt projekt

Vad jag lärde mig

Att koppla Clerk JWT-tokens till ASP.NET Core-middleware såg enkelt ut på papper men krävde noggrann konfiguration kring CORS och tokenvalidering. Den lagerindelade arkitekturen lönade sig snabbt: att hålla Application och Domain fria från infrastruktur gjorde det enkelt att lägga till funktioner utan att röra befintlig logik. TanStack Router och React Query tillsammans ger frontend en struktur som plain React med useEffect inte ger.

Vad jag skulle förbättra härnäst

• Lägg till träningsloggning och framstegsspårning över tid
• Bygg en dashboard med visualiserad träningsstatistik
• Utöka till en mobilapp med React Native