PatchIt

• 

  Game over screen

• 

  Introduction/welcome page

• 

  Lobby page

• 

  Coding page

Inspiration

As AI-assisted coding and “vibe coding” become more common, it is easy to rely on AI to fix every error. When those fixes fail, repeatedly sending the code back to a model can introduce new bugs and make the original problem harder to understand. We built PatchIt to make debugging fun again and help developers strengthen the skills needed to understand, diagnose, and repair code themselves.

What it does

PatchIt is a real-time competitive JavaScript debugging game. Players create or join a lobby using a room code, ready up, and compete in five-minute matches to fix as many broken functions as possible.

Each challenge includes broken code, an intended behavior, and automated test cases. Players edit the code, run it, inspect the results, and earn a point when every test passes. Scores and player progress update live, and the match ends with a leaderboard and rematch system.

PatchIt can also generate new challenges with AI at a selected difficulty, keeping matches varied and replayable.

How we built it

We built the interface with SolidJS, TypeScript, and Vite, then packaged it as a desktop application using Tauri. Firebase Realtime Database powers room creation, matchmaking, readiness, synchronized scores, challenge progress, and rematches.

Player code runs inside isolated Web Workers with execution timeouts. Each solution is evaluated against multiple test cases using deep comparison, while console output and runtime errors are returned to the in-game editor.

For AI-generated challenges, we use an OpenAI-compatible model through Groq. Generated challenges follow a strict schema and are automatically validated before reaching players: the provided solution must pass every test, while the broken version must fail at least one. We also created a local challenge pool as a reliable fallback.

Challenges we ran into

The biggest challenge was keeping every client synchronized during fast multiplayer matches. We had to prevent duplicate scoring, coordinate challenge-pool refills, transfer lobby ownership when a host leaves, and ensure every player sees the correct timer and game state.

Safely executing arbitrary player code was another major challenge. Infinite loops, syntax errors, asynchronous functions, and unexpected output all had to be handled without freezing the application.

AI generation added another layer of uncertainty. A response could look valid while containing a broken solution or ineffective bug, so we built structural checks, automated execution-based validation, retries, and generation locks.

Accomplishments that we're proud of

We are proud that PatchIt is more than a coding quiz, it is a complete real-time multiplayer experience. It includes room-code matchmaking, live player states, synchronized matches, an interactive code editor, automated testing, scoring, leaderboards, and rematches.

We are also proud of the challenge-validation pipeline and isolated code runner. Together, they let PatchIt turn unpredictable code and AI output into challenges that are fair, testable, and fun to compete on.

What we learned

We learned that generating a coding problem is easy, but generating one that is valid, appropriately difficult, and consistently testable requires strong guardrails.

We also learned how important transactional state updates are in multiplayer applications. Scoring and challenge generation must remain correct even when several players finish at nearly the same time.

Most importantly, we learned that debugging can be engaging when feedback is immediate and progress is visible. Competition transforms an often-frustrating task into something players want to practice repeatedly.

What's next for PatchIt

Next, we want to add endless, zen, and single-player modes for players who prefer practicing without a timer. We also plan to introduce customizable lobby settings, adjustable difficulty, player colors, and a larger challenge library.

For multiplayer matches, we want to add “bug attacks” inspired by Tetris, allowing players who complete a challenge to temporarily disrupt their opponents. We also plan to finish the post-match AI analysis feature so players can understand where their failed solutions went wrong and learn from every match.

Built With

• css
• firebase
• html5
• openai
• solidjs
• tauri
• typescript
• vite