CodeQuest

Problem / Kontext

CodeQuest är en webbaserad lärplattform där kod är spelmekaniken och berättelsen är drivkraften. Användaren löser C#-uppgifter för att föra storyn framåt, medan backend ansvarar för objektiv validering av lösningarna. Plattformen kombinerar AI-genererad narrativ progression med server-side exekvering och bedömning av användarens kod.

AI-integration

Projektet är AI-integrerat på så vis att varje nytt kapitel genereras dynamiskt med Azure OpenAI. Storyn fortsätter utifrån sammanhanget från föregående kapitel och påverkas av om användaren svarade rätt eller fel i föregående steg. Det gör att upplevelsen blir adaptiv och mer levande än en statisk uppgiftssamling.

Lösning / Arkitektur

Frontend byggdes i React 19, TypeScript och Vite med Monaco Editor för kodskrivning och React Query för datahämtning. Backend byggdes i .NET 10 med ASP.NET Core Web API, EF Core och PostgreSQL. AI-genereringen hanteras via Azure OpenAI, medan Roslyn används för att kompilera och köra användarens C#-kod server-side. Projektet använder en tydlig lagerindelning mellan API, Application och Domain.

Så fungerar det – Arkitekturflöde

1. 1Användaren skriver C#-kod i Monaco Editor (webbläsarbaserad IDE)
2. 2Lösningen skickas till backend-API:ets endpoint (ASP.NET Core Web API)
3. 3Roslyn (Microsoft.CodeAnalysis) kompilerar och kör koden server-side i ett sandboxat sammanhang
4. 4Bedömningsresultatet (godkänd/underkänd + output) sparas i PostgreSQL via EF Core
5. 5Azure OpenAI tar emot föregående kapitels narrativa kontext plus godkänd/underkänd-resultat och genererar nästa kapitel som strukturerad JSON
6. 6Frontend hämtar det nya scenariot via TanStack React Query och renderar den uppdaterade utmaningen — storyn anpassas utifrån spelarens prestation

Mål

• Bygga en kodinlärningsplattform där berättelse och spelmekanik är sammanvävda
• Generera dynamiska kapitel med Azure OpenAI baserat på föregående kapitlets kontext och spelarens utfall
• Validera C#-kod från användaren objektivt på servern med Roslyn
• Persista sessioner och scenarion tillförlitligt med PostgreSQL och EF Core
• Erbjuda en modern code-editor-upplevelse i webbläsaren med Monaco Editor

Utmaningar

• Designa en narrativ genereringsprompt som producerar konsekvent, strukturerat kapitelinnehåll lämpat för rendering i UI
• Säkerställa säker och sandboxad exekvering av C#-kod inlämnad av användaren på servern med Roslyn
• Hantera sessions- och scenariotillstånd sammanhängande mellan frontend och backend
• Implementera förgrenad storyprogression beroende på om spelaren svarade rätt eller fel

Viktiga tekniska beslut

• Azure OpenAI för strukturerad scenariogenerering – promptad att returnera JSON för tillförlitlig frontend-konsumtion
• Roslyn (Microsoft.CodeAnalysis) för server-side C#-kompilering och exekvering för att hålla bedömningen objektiv och backend-kontrollerad
• JWT-autentisering med ASP.NET Identity för säker, stateless sessionshantering
• Lagerindelad backendarkitektur (API / Application / Domain) för underhållbarhet och separation av ansvar
• EF Core + PostgreSQL för relationell persistens av användarsessioner och genererade scenarion
• Docker Compose för lokal utvecklingsmiljöinställning

Resultat / Effekt

• En fungerande adaptiv kodplattform där varje session producerar ett unikt AI-genererat handlingsförlopp
• Demonstrerad end-to-end-integration: AI-generering → frontend-rendering → kodinlämning → server-side-bedömning → narrativ förgrening
• Praktisk erfarenhet av att kombinera AI-integration, autentisering, server-side kodexekvering, databasmodellering och modern frontend-UX i en och samma produkt
• Visar fullstackbredd och förmåga att bygga en mer avancerad och idédriven applikation

Vad jag lärde mig

Att bygga CodeQuest gav mig praktisk erfarenhet av att kombinera flera komplexa system i en och samma produkt: AI-genererade innehållspipelines, server-side kodexekvering med Roslyn, sessionsbaserad tillståndshantering och en modern IDE-upplevelse i webbläsaren med Monaco Editor. Jag fördjupade min förståelse av prompt engineering för strukturerade JSON-utdata, lagerindelad backendarkitektur i .NET och de praktiska utmaningarna med att skapa en genuint adaptiv användarupplevelse där backend förblir den enda källan till sanning.

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

• Lägg till poängtavlor och framstegsspårning för en mer gamifierad upplevelse
• Utöka språkstödet bortom C# till andra programmeringsspråk
• Driftsätt till en publik molnendpoint med automatiserad CI/CD