Skip to content
Back to Portfolio
CodeQuest

CodeQuest

AI-driven coding platform where users learn C# by solving challenges inside a story that adapts based on their answers. The backend validates code with Roslyn and generates new chapters with Azure OpenAI.

My Role: Team of 3 – primary focus on AI integration with Azure OpenAI
2026

Tech Stack

C# · .NET 10 · ASP.NET Core · React 19 · TypeScript · Vite · Tailwind CSS v4 · PostgreSQL · EF Core · Azure OpenAI · JWT · ASP.NET Identity · Roslyn · Monaco Editor · TanStack React Query · Framer Motion · Docker Compose · GitHub Actions · Azure Static Web Apps · Azure Web App

Problem / Context

CodeQuest is a web-based learning platform where code is the gameplay mechanic and story is what keeps the user engaged. The user solves C# challenges to progress, while the backend validates solutions objectively using Roslyn. Each chapter is generated dynamically by Azure OpenAI based on what happened in the previous step.

AI Integration

The project is AI-integrated in the sense that each new chapter is generated dynamically with Azure OpenAI. The story continues based on the narrative context from the previous chapter and is influenced by whether the player answered correctly or incorrectly in the previous step. This makes the experience adaptive and more engaging than a static exercise flow.

Solution / Architecture

The frontend is React 19, TypeScript, and Vite with Monaco Editor for code input and React Query for data fetching. The backend is .NET 10, ASP.NET Core, EF Core, and PostgreSQL. Azure OpenAI generates scenarios as structured JSON, and Roslyn compiles and runs user-submitted C# code server-side. The backend is split into API, Application, and Domain layers.

How It Works – Architecture Flow

  1. 1User writes C# code in the Monaco Editor (browser-based IDE)
  2. 2Solution is submitted to the backend ASP.NET Core Web API endpoint
  3. 3Roslyn (Microsoft.CodeAnalysis) compiles and executes the code server-side in a sandboxed context
  4. 4Evaluation result (pass / fail + output) is persisted in PostgreSQL via EF Core
  5. 5Azure OpenAI receives the previous chapter's narrative context plus the pass/fail result and generates the next chapter as structured JSON
  6. 6Frontend fetches the new scenario via TanStack React Query and renders the updated challenge — story adapts based on the player's performance

Goals

  • Build a coding learning platform where narrative and gameplay are intertwined
  • Generate dynamic story chapters with Azure OpenAI based on prior chapter context and player outcome
  • Validate user-submitted C# code objectively on the server using Roslyn
  • Persist sessions and scenarios reliably with PostgreSQL and EF Core
  • Provide a modern code-editor experience in the browser with Monaco Editor

Challenges

  • Designing a narrative generation prompt that produces consistent, structured chapter content suitable for rendering in the UI
  • Ensuring secure and sandboxed execution of user-submitted C# code on the server with Roslyn
  • Managing session and scenario state coherently across frontend and backend
  • Implementing branching story progression based on whether the player answered correctly or incorrectly

Key Technical Decisions

  • Azure OpenAI for structured scenario generation – prompted to return JSON for reliable frontend consumption
  • Roslyn (Microsoft.CodeAnalysis) for server-side C# compilation and execution, keeping evaluation objective and backend-controlled
  • JWT authentication with ASP.NET Identity for secure, stateless session management
  • Layered backend architecture (API / Application / Domain) for maintainability and separation of concerns
  • EF Core + PostgreSQL for relational persistence of user sessions and generated scenarios
  • Docker Compose for local development environment setup

Results / Impact

  • A working adaptive coding platform where each session produces a unique AI-generated story
  • Full integration from AI generation through frontend rendering to server-side code validation and narrative branching
  • Practical experience combining AI, authentication, Roslyn code execution, database modelling, and modern frontend in one product
  • The most technically complex project in my portfolio, showing fullstack breadth and the ability to connect multiple systems

What I Learned

Building CodeQuest gave me hands-on experience connecting several complex systems in one product: AI content generation with structured JSON outputs, server-side code execution with Roslyn, session-based state management, and a browser-based IDE with Monaco Editor. I got a much better understanding of prompt engineering for predictable outputs, layered .NET architecture, and what it takes to make backend the single source of truth in an adaptive user experience.

What I Would Improve Next

  • Add leaderboards and progress tracking for a more gamified experience
  • Expand language support beyond C# to other programming languages
  • Deploy to a public cloud endpoint with automated CI/CD

Screenshots

Explore this project