Code Royale

Inspiration

I came up with Code Royale because coding interview prep can get boring really fast. Most of the time, you are sitting by yourself solving LeetCode problems, checking whether you got the right answer, and then moving on to another one.

I wanted to make that experience feel more like a game.

The idea was basically: what if coding interview prep felt more like Jackbox/Kahoot?

Instead of everyone studying alone, one person can host a game and everyone else joins from their phones. Players compete against each other, answer coding questions as fast as possible, use power-ups, and still learn something when they get a question wrong.

I wanted Code Royale to make practicing data structures, algorithms, debugging, and interview concepts feel more social, competitive, and fun.

What it does

Code Royale is a multiplayer coding interview game.

One screen acts as the host, while players join the room from their phones using a room code.

Each round gives players a coding question from categories like:

Data Structures

Bug Hunt

Optimal Approach

Edge Cases

Complexity

Players get points based on whether they are correct and how quickly they answer.

I also added power-ups like 50/50, Lag Spike, and Firewall so the game feels more competitive and unpredictable instead of just being a normal quiz.

One of my favorite parts of the project is the AI Coach.

If players get a question wrong, I did not want the game to just say, “The answer was B.” I wanted it to actually explain why.

The AI Coach gives a short explanation while showing an animation of what the solution is doing. For example, it can show a sliding window moving across an array, values being pushed onto a stack, a queue being used during BFS, or the exact line that is causing a bug.

For Bug Hunt questions, the Coach can highlight the broken line and then show the corrected code at the end.

How I built it

I built the frontend using React, TypeScript, and Vite.

I used Convex for the multiplayer backend because I needed the game state to update in real time across multiple devices. It keeps track of things like rooms, players, scores, answers, timers, rounds, and power-ups.

I used OpenAI for several parts of the game.

First, AI generates the coding questions.

Then another AI step creates an explanation for the correct answer.

After that, I built an Animation Director that takes the explanation and decides what should actually happen on screen.

Instead of letting the AI generate random React or CSS animations, I gave it a set of actions it can choose from, like:

move a pointer

highlight an array value

push or pop a stack

update a queue

highlight a line of code

perform a hashmap lookup

show the result

That gave me much more control over the animations while still allowing them to change depending on the question.

I also added AI voice narration so the Coach can actually talk through the explanation.

Later, I worked on reducing the wait time for that voice by streaming the audio and preparing upcoming narration before it is needed.

Challenges we ran into

One of the hardest parts was getting the voice and animation to actually feel connected.

At first, the animations worked, but they would sometimes move too early or finish before the AI had finished talking.

It made the explanation feel disconnected.

I eventually changed the system so the narration controls the animation timing. The Animation Director looks for important parts of the narration, and the visual changes happen when the voice reaches those parts.

Another challenge was making sure the AI animated the actual solution.

At one point, I had a sliding-window problem where the explanation showed a hashmap instead of actually showing the sliding window.

That made me realize that the animation cannot just look cool. It has to show the most important idea behind the correct answer.

I started changing the system so the correct data structure or algorithm stays as the main visual.

For example:

sliding window keeps the window visible

stack problems show the stack

BFS keeps the tree and queue visible

Bug Hunt keeps the code visible

complexity should not suddenly replace the main animation

Bug Hunt gave me another issue.

Originally, I was forcing the original buggy code to stay on screen so the AI could not accidentally rewrite it. That worked a little too well because even when the AI generated the corrected version, the frontend would still show the broken code.

I had to change the system so the original code stays locked during the explanation, but the final scene is allowed to show the full corrected version.

I also spent a lot of time working on the mobile experience because the phone is basically the player's controller. I had to make answers easy to tap quickly while still fitting the timer, score, question, and power-ups onto a smaller screen.

Accomplishments that we're proud of

I’m most proud that I built Code Royale as a solo project and got real-time multiplayer, AI-generated questions, power-ups, streamed AI voice, and animated explanations all working together. I’m especially proud of the AI Coach and Animation Director, which turn explanations into visuals for things like sliding windows, stacks, trees, and bug fixes. Seeing the original idea of “Jackbox/Kahoot for coding interviews” become a working game has been the biggest accomplishment.

What we learned

The biggest thing I learned was that adding AI to a project is not just about calling an API.

A lot of the work was actually figuring out how to control the AI and turn its output into something useful.

For the explanations, the pipeline became something like:

AI explanation → Animation Director → animation → AI voice

Breaking it into smaller pieces made it much easier to control than asking one model to do everything.

I also learned a lot about real-time multiplayer games, streaming audio, mobile browser behavior, syncing animations with narration, and building something that has to work across multiple devices at the same time.

What's next for Code Royale

Next, I want to keep improving the AI Coach animations, add stronger visualizations for more data structures and algorithms, and make the mobile experience even smoother. I also want to expand the question variety, add more game modes and power-ups, and eventually let players track their performance over time so Code Royale can be both a fun party game and a real way to improve at coding interviews.

Built With

• convex
• openai
• react
• typescript
• vercel