The Debugger's Dojo

A gamified arena where you hunt bugs, sharpen your root cause analysis, and climb the leaderboard by turning broken code into golden solutions.

Comment

Inspiration

Most coding platforms follow a linear "build from scratch" model. However, in the professional world, software engineers spend nearly 70–80% of their time reading, understanding, and debugging existing codebases rather than writing new lines from a blank canvas. I was inspired by the educational concept of Backward Design, which suggests that starting with the end goal (a functioning system) and working backward to identify and fix failures makes the learning process highly targeted and intentional.

I wanted to create a platform where the challenge isn't just about fighting syntax errors, but about developing a structured engineering mindset. By gamifying a "reverse tutorial" approach, I aimed to transform the often-frustrating process of debugging into an engaging, skill-building experience.

What it does

The Debugger's Dojo is a gamified learning platform where users fix broken code rather than building applications from scratch. The ecosystem supports three distinct roles:

  • Disciples (Learners): Browse the "Dojo Floor" for broken code challenges, hunt down bugs using an integrated Monaco Editor, run local tests directly inside their browser, and request AI hints ("Sensei's Whisper") when stuck.
  • Senseis (Task Creators): Submit challenges via the Sensei Portal, mark corrupted lines, provide a reference "Golden Fix", and define hidden test cases to validate other users' submissions.
  • Admins (Moderators): Review pending tasks, utilize AI-driven difficulty suggestions to approve/reject challenges, and manage user roles to maintain the platform's overall quality.

Instead of just checking if the code passes tests, the platform forces users to submit a Root Cause Analysis (RCA), which is evaluated by AI to ensure they truly understand why the bug occurred, keeping copy-paste tendencies at bay.

How we built it

The project was developed as a full-stack web application using a modern, reactive decoupled architecture:

  • Frontend: Built with React, TypeScript, Vite, and Tailwind CSS with shadcn/ui components. We integrated the Monaco Editor to provide a professional, VS Code-like environment natively in the browser.
  • In-Browser Execution Engine: Rather than relying on heavy server-side containers or external execution APIs, we implemented local code execution. We used Pyodide to run Python code directly in the browser via WebAssembly (WASM), alongside Native Eval for rapid JavaScript execution.
  • AI Orchestration: Leveraged DeepSeek-V3 (via SiliconFlow) for validating the user's written Root Cause Analysis and auto-suggesting task difficulties for admins. We utilized Qwen-2.5-Coder (via Hugging Face) to power the "Sensei's Whisper" hint generation system.
  • Backend & Security: Powered by Supabase (PostgreSQL, Auth, and Edge Functions). All sensitive AI API keys are hidden securely in serverless Edge Functions, and Row Level Security (RLS) policies protect user roles and leaderboard data.

To reward code efficiency over chaotic "guess-and-check" attempts, we designed the Delta Doctor Scoring Algorithm. The efficiency score ($\eta$) is calculated as:

$$\eta = \frac{T_{passed}}{\Delta L}$$

Where $T_{passed}$ is the number of passed test cases and $\Delta L$ is the total number of lines modified. The final Zen Points ($Z$) are awarded based on this efficiency and penalized by 50% if the AI deems the user's written RCA invalid:

$$Z = \eta \times 100 \times \text{RCA}_{multiplier}$$

Challenges we ran into

  • WASM & Browser Runtime Isolation: Shifting to client-side runtimes like Pyodide presented unique challenges in constraining execution so that infinite loops or heavy computations wouldn't entirely freeze the user's browser UI.
  • AI Prompt Guardrails for RCA Validation: One major hurdle was preventing the AI from accidentally giving away the solution when validating a user's written bug explanation. We had to implement rigorous prompt engineering to force DeepSeek to evaluate the logic of the user's text rather than looking for specific code strings.
  • Development Environment Limitations: Building this project within the free version of the Medo AI app meant working around strict resource constraints, requiring highly optimized code modularity and clever dependency management to ensure a smooth UI/UX development cycle.

Accomplishments that we're proud of

  • Reversing the Paradigm: Successfully building a fully functional platform centered entirely around fixing rather than creating, filling a massive gap in practical software engineering education.
  • Serverless & Cost-Effective Scale: By leveraging browser runtimes (Pyodide) for execution and Supabase Edge Functions for AI handshakes, the application requires minimal backend computing overhead.
  • An Anti-Brute-Force Scoring System: Creating the Delta Doctor algorithm, which successfully discourages "shotgun debugging" (changing random lines of code until it works) by heavily penalizing bloated line changes.

What we learned

  • Gamification Economy Balancing: Adjusting the economy loops—like lowering the cost of "Sensei's Whisper" hints to 10 Zen Points—taught us how crucial balancing rewards and penalties is to keep a user in a productive "flow state" without inducing frustration.
  • AI as an Evaluator, Not Just a Generator: We discovered how powerful LLMs can be when used as automated grading assistants (evaluating a user's conceptual explanation) rather than just using them to generate boilerplate code.
  • The Power of Edge and WASM: Combining client-side WASM execution with backend Edge Functions kept our architecture incredibly lightweight, fast, and completely secure.

What's next for The Debugger's Dojo

  • Multi-File Debugging Environments: Moving beyond single-file snippets to allow Disciples to hunt down complex bugs scattered across complex multi-file structures.
  • Time-Attack Mode: Introducing live, real-time multiplayer "Dojo Duels" where two users compete side-by-side to fix the same broken code block the fastest.
  • Git Integration for Senseis: Allowing contributors to provide a pull request link or a commit SHA to automatically generate a broken challenge environment directly from real-world open-source bugs.

Built With

Share this project:

Updates