Code Royale | Devpost

Inspiration

What truly set this project apart was our desire to turn competitive coding into a shared adventure, not just a solitary grind. We imagined a space where the adrenaline of a hackathon, the camaraderie of a study group, and the unpredictability of a game night could all collide, live, in your browser. That vision shaped every decision we made.

Our inspiration came from those late-night coding sessions with friends, where someone would shout out a problem and everyone would race to solve it, sharing tips, groans, and the occasional meme. We wanted to bottle that energy and make it accessible to anyone, anywhere, at any time. That’s why we obsessed over real-time features: not just code collaboration, but live cursor movement, instant chat, and a shared sense of momentum.

What it does

Code Royale is a real-time, multiplayer coding battle platform that turns LeetCode-style problems into fast-paced competitive showdowns. Users join live rooms, get the same problem, and race against each other, with fully synced code editors, collaborative cursors, live chat, and a dynamic leaderboard that updates as players submit.

It blends competitive pressure with cooperative spirit. Players can see each other working in real time, cheer each other on, and even share hints mid-match.

How we built it

Our stack is built for speed and interactivity:

Convex for real-time backend data sync and session management
Next.js for the frontend and routing
Monaco as the in-browser code editor
Custom WebSocket logic to keep the UI reactive and multiplayer-aware -OpenRouter Gemini for generative AI code feedback

We architected around live state: player presence, chat, submissions, and leaderboard updates all had to be reflected across clients . Each player’s actions had to be visible to others immediately, and seamlessly.

Challenges we ran into

The biggest challenge wasn’t just building individual features, it was getting them to work together in harmony and scale under real-time conditions.

We had to:

Synchronize live state across distributed clients. Code changes, cursor positions, chat messages, and submission results, without lag or conflict.
Integrate real-time systems like Convex and Monaco into a cohesive flow. Monaco wasn’t designed for multiplayer, so cursor tracking and shared editing required custom implementation.
Coordinate UI and game logic to support competitive pacing while staying visually clear and responsive.
Design for intensity and clarity, balancing the chaos of live gameplay with a UI that keeps users grounded and focused.

We were choreographing features to feel like one tight, fast, and enjoyable experience.

Accomplishments that we're proud of

A seamless real-time experience with live code editing, chat, and submission tracking
Multiplayer logic that handles edge cases without disrupting gameplay
A reactive leaderboard that adds tension and excitement in every match
A crisp, animated UI that elevates the platform from tool to game
Turning solo problem solving into a genuinely fun social experience
A socially progressive game that brings education free of wealth barriers, etc.

What we learned

Real-time collaboration is as much about people as it is about code.

We learned to:

Think about interaction as storytelling, how can we make each session feel like an unfolding narrative?
Design for moments of surprise, frustration, and delight
Treat responsiveness and feedback not just as technical requirements, but as emotional design
Embrace the messy, social nature of live problem solving, and make it shine