CodingQuest

Overview

CodingQuest is a coding-practice platform. Problems and submissions live on a FastAPI and Postgres backend, while the actual Python code runs inside the browser through Pyodide. That means no server-side code execution sandbox is needed. The frontend is React, Vite, Monaco for the editor, Zustand for state, and TanStack Query for server data. Authentication supports multiple modes and there is an admin UI for problem authoring. Everything is packaged for Docker Compose.

Highlights

• Python code runs fully client-side via Pyodide and WebAssembly, so there is no server-side code execution path to secure.
• Monaco editor paired with TanStack Query for problem state and Zustand for UI state.
• Alembic-backed Postgres for problems, submissions, and user data.
• Admin UI for authoring and editing problems.

Challenges and approach

• Bootstrapping Pyodide in the browser takes several seconds on first load. Locking the UI behind a clear loading state and caching the runtime between pages made the cost only happen once per session.
• Keeping the editor, submission state, and server data in sync without duplicate sources of truth meant splitting TanStack Query (server data) from Zustand (UI state) on principle, not by convenience.