Code Arena

Code Arena is a competitive coding platform where users improve programming skills through real-time battles, with interactive abilities, AI-powered hints, and an ELO ranking system.

Comment

Code Arena

Try our app here

Code Arena

Code Arena Demo

Inspiration

Learning to code is most effective when it is active, engaging, and social, yet many coding platforms today focus on solo practice, which can feel repetitive and isolating over time. While problem-solving is essential, motivation often drops when learning lacks interaction and real-time feedback.

This project was inspired by the idea of transforming coding practice into a shared, competitive learning experience. By allowing users to solve the same problem simultaneously and interact with each other in real time, we encourage deeper focus, adaptability, and learning through challenge. Friendly competition pushes learners to think faster, stay resilient under pressure, and continuously improve their coding skills.

By combining gamification elements, interactive abilities, and an ELO-based ranking system, the platform makes learning fun, engaging, and repeatable. Studies (Source) show that gamification can reduce the time required to grasp coding concepts by up to 40%, helping users build strong problem-solving skills while enjoying the process. Our goal is to create a platform where people don’t just practice coding, but learn, grow, and improve together.

What it does

Our platform enables users to engage in real-time, head-to-head coding challenges by solving the same programming problem simultaneously. Players code live in an interactive editor while their solutions are evaluated against predefined test cases to ensure correctness and efficiency.

To make learning more engaging, users can activate game-like abilities that temporarily affect their opponent’s coding environment, such as freezing the screen, scrambling code, or changing font size. These mechanics introduce fun distractions that encourage adaptability, focus, and problem-solving under pressure.

The platform features an ELO-based ranking system that matches players of similar skill levels and tracks long-term progress. An AI coding assistant provides real-time hints during gameplay, while AI-driven analysis explains mistakes after failed submissions. By combining competitive play, instant feedback, and AI-powered guidance, the platform turns coding practice into an interactive learning experience that motivates continuous improvement through repeated play.

How we built it

We built the platform using React and Next.js on the frontend with Monaco Editor for the code editor. The backend runs on FastAPI with Socket.IO for real-time WebSocket communication, allowing both players to see each other's actions instantly. To safely run user code, we use Docker containers that isolate and execute submissions securely. We integrated AI-powered hints that help users learn without giving away the solution. All data is stored in SQLite, and we built separate services to handle authentication, matchmaking, battle state management, chat, and the ELO rating system

Challenges we ran into

One of our biggest challenges was real-time state synchronization. Keeping both players' screens in sync during battles was harder than expected. When one player casts an ability or submits code, the other player needs to see it instantly. We had to handle cases where messages arrive out of order or connections drop mid-battle. Getting both players' SP, timers, and ability effects to update smoothly across different devices required careful testing and debugging.

Accomplishments that we're proud of

We’re proud to have built a real-time competitive coding platform from scratch within a tight hackathon timeline. This includes live matchmaking, synchronized code execution, interactive in-game abilities, and an ELO-based ranking system.

Beyond the core features, we delivered a clean and intuitive user experience that makes coding practice fun, social, and engaging. Most importantly, we demonstrated strong teamwork, rapid iteration, and the ability to turn a bold idea into a working product.

What we learned

We learned how to design and implement a real-time multiplayer coding system, including live code execution, synchronization, and fair matchmaking. Building interactive abilities pushed us to think carefully about system robustness, state management, and user experience under unpredictable conditions.

At the same time, this project increased our awareness of how thoughtful technical design and gamification can significantly improve learning motivation. We learned that by combining real-time interaction with solid engineering, coding platforms can go beyond assessment and become powerful tools for engaging, collaborative skill development.

What's next for Code Arena

We plan to add an AI-Powered Personalized Learning Paths paragraph by using AI to track each user's strengths and weaknesses over time. By analyzing which types of problems they struggle with, the system will automatically recommend practice problems that target those specific areas. As users improve, the AI will adapt and suggest harder challenges, creating a personalized curriculum that evolves with their skill level. This means every user gets a custom learning experience tailored to help them grow where they need it most.

Built With

Share this project:

Updates