CodeQuest

Problem / Kontext

CodeQuest är en webbaserad lärplattform där kod är spelmekaniken och berättelsen håller användaren engagerad. Användaren löser C#-uppgifter för att ta sig vidare, medan backend validerar lösningarna objektivt med Roslyn. Varje kapitel genereras dynamiskt av Azure OpenAI baserat på vad som hände i föregående steg.

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 är React 19, TypeScript och Vite med Monaco Editor för kodinmatning och React Query för datahämtning. Backend är .NET 10, ASP.NET Core, EF Core och PostgreSQL. Azure OpenAI genererar scenarion som strukturerad JSON, och Roslyn kompilerar och kör användarens C#-kod server-side. Backend är uppdelad i API-, Application- och Domain-lager.

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 en unik AI-genererad berättelse
• Full integration från AI-generering genom frontend-rendering till server-side kodvalidering och narrativ förgrening
• Praktisk erfarenhet av att kombinera AI, autentisering, Roslyn-kodexekvering, databasmodellering och modern frontend i en produkt
• Det mest tekniskt komplexa projektet i min portfolio, som visar fullstackbredd och förmåga att koppla samman flera system

Vad jag lärde mig

Att bygga CodeQuest gav mig praktisk erfarenhet av att koppla samman flera komplexa system i en produkt: AI-innehållsgenerering med strukturerade JSON-utdata, server-side kodexekvering med Roslyn, sessionsbaserad tillståndshantering och en webbläsarbaserad IDE med Monaco Editor. Jag fick mycket bättre förståelse för prompt engineering med förutsägbara utdata, lagerindelad .NET-arkitektur och vad som krävs för att göra backend till enda sanningskällan i en adaptiv användarupplevelse.

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