Toast Code

Inspiration

Learning to code is hard, and Claude is quickly overtaking coding. Tutorials are either too dry, too long, or assume you already know everything. We wanted to make coding feel like playing a game, fun, engaging, and rewarding. Inspired by Duolingo and platformer games like Celeste, we built Toast Code to turn the coding journey into an adventure where every correct line of code moves you forward. We believe learning should feel warm and satisfying, like perfectly golden-brown toast on a Sunday morning.

What it does

Toast Code is an AI-powered gamified coding tutor. Users type in what they want to build (like "Flappy Bird") and our Gemini AI breaks it down into 5-8 progressive coding challenges. Users code in a VS Code-like environment with Monaco Editor while a pixel-art platformer character advances through levels with each successful task. Complete a task correctly? Your character jumps forward. Get it wrong? They gently fall back. Need help? AI provides hints without giving away the solution. Once all levels are complete, the user has built their entire project from scratch.

How we built it

The app is a React project with the following sections of implementation; EditorPanel.tsx renders Monaco and exposes the editable code block, TerminalPanel.tsx renders xterm and shows output, useGameState.ts holds the stage index, completion state, character state, submission handling, and advancement rules, and mockGemini.ts is the pseudo code compiler/evaluator that inspects the editor string and returns exact errorLines, errorMessage, hint, critique, and success state. On submit, the code text is read from Monaco, passed to mockGemini.validateCode(), and the app either displays line specific diagnostics and a concrete hint or marks the current stage complete and advances the character on the visible progress path. The implementation deliberately avoids XP and streak mechanics, instead using Monaco as the editor tool, xterm as the terminal tool, and Gemini as the in-app validation/hint tool that turns editor content into stage validation and feedback.

Challenges we ran into

Making the AI understand code context was tricky. We had to fine-tune our prompts to generate constructive feedback that teaches concepts rather than just saying "correct" or "incorrect." Getting the character animations to feel smooth and responsive to code validation was another challenge, we went through several iterations of the jump/fall mechanics to make it satisfying. Integrating Monaco Editor with custom task highlighting and read-only sections required deep diving into the editor's API. We also struggled with making the preview pane accurately reflect user code in real-time while handling errors gracefully.

Accomplishments that we're proud of

We created a unique experience where coding feels like playing a game. The character reacts instantly to code validation with smooth animations that keep users engaged. We successfully integrated AI to break down any project into meaningful, teachable steps. The Monaco Editor with task highlighting works beautifully and makes it obvious what users need to code. We built a working live preview that shows users exactly what their code is doing. Most importantly, we created something that makes learning to code actually fun, all within the span of 7 hours.

What we learned

We learned that AI can be incredibly powerful for education when used as a mentor rather than a solution-giver. Prompt engineering is everything, the difference between helpful feedback and generic responses is all in how you frame the request. We also learned that gamification works best when it's meaningful, the character progression needs to feel earned. Building a code editor from scratch is complex, but using established libraries like Monaco saved us countless hours. We discovered that real-time feedback loops are crucial for keeping users in the flow state while learning.

What's next for Toast Code

We want to add multiplayer mode where users can code together and see each other's characters in the same world. We plan to support more programming languages including Python, Java, and C++. We're building a community library where users can share their completed projects and remix others' work. We want to add AI-powered error explanations that teach concepts in plain English and suggest Stack Overflow-like solutions. We're also exploring voice commands for hands-free coding and mobile support so users can practice anywhere. Finally, we want to create achievement badges and leaderboards to make the learning journey even more rewarding.