TrainMateX Vision

Problem / Kontext

Jag ville bygga något som demonstrerade hela stacken från Clerk-auth till ett ordentligt lagerindelat .NET API — inte ett lekprojekt, utan något nära hur en riktig feature skulle struktureras. TrainMateX Vision täcker hela flödet: användaren registrerar sig och loggar in via Clerk, får ett JWT och det tokenet låser varje backend-endpoint. Domänen är träningshantering — program, pass och övningar — för att det är konkret nog 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 produktionsrelevant fullstack-app som demonstrerar lagerindelad backend-arkitektur
• 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
• Demonstrerad end-to-end-integration: React-frontend → Clerk JWT → ASP.NET Core API → SQL Server
• Ren lagerindelad backend-arkitektur redo för vidare expansion
• Praktisk erfarenhet av TanStack Router och TanStack React Query i en riktig produkt

Vad jag lärde mig

Att koppla Clerk JWT-tokens till ASP.NET Core-middleware verkade enkelt 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 infrastrukturbekymmer gjorde det enkelt att utöka funktioner utan att röra befintlig logik. TanStack Router och React Query tillsammans ger frontendet 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