Skip to content
Back to Portfolio
CodeQuest

CodeQuest

AI-driven story-based coding platform where users learn C# through adaptive chapters, dynamic narrative generation, and objective server-side code validation.

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 the motivational layer. The user solves C# challenges to progress through the experience, while the backend validates solutions objectively. The platform combines AI-generated narrative progression with server-side code execution and evaluation.

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 was built with React 19, TypeScript, and Vite, using Monaco Editor for code input and React Query for data fetching. The backend was built with .NET 10, ASP.NET Core Web API, EF Core, and PostgreSQL. AI-driven scenario generation is handled through Azure OpenAI, while Roslyn is used to compile and execute user-submitted C# code on the server side. The backend follows a layered architecture with separate 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 functioning adaptive coding platform where each session produces a unique AI-generated story arc
  • Demonstrated end-to-end integration: AI generation → frontend render → code submission → server-side evaluation → narrative branching
  • Hands-on experience combining AI integration, authentication, server-side code execution, database modelling, and modern frontend UX in one product
  • Demonstrates fullstack breadth and the ability to build a more advanced and concept-driven application

What I Learned

Building CodeQuest gave me hands-on experience combining several complex systems in a single product: AI-generated content pipelines, server-side code execution with Roslyn, session-based state management, and a modern in-browser IDE experience with Monaco Editor. I deepened my understanding of prompt engineering for structured JSON outputs, layered backend architecture in .NET, and the practical challenges of creating a truly adaptive user experience where backend remains the single source of truth.

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