UniCodeArena - Campus Coding

A real-time, high-performance competitive programming platform built to power university-level coding battles.

Comment

Inspiration

As a software engineering student at Mehran University of Engineering and Technology (MUET), our team saw a gap in how we conduct competitive programming at the university level. We needed a platform that was fast, secure, and specifically built for real-time campus battles. UniCodeArena was built to solve the logistical nightmare of hosting local, department-level hackathons by providing an all-in-one execution and ranking ecosystem.

What it does

UniCodeArena is the ultimate gateway to the coding battlefield. It features: Practice Arena: A lightweight, powerful IDE built directly into the browser supporting Python, C++, and Java out of the box. Admin Control Center: Allows department heads to set precise Unix timestamp-based start times and generate unique 6-character alphanumeric access codes for private sessions. Live Competitions: A high-pressure, competitive environment featuring a dynamic, real-time leaderboard that updates the instant a user passes all test cases. God View: Administrators can monitor live submissions, track participants, and ensure a smooth event.

How we built it

To move fast and establish a clean, dark-mode aesthetic, we utilized Lovable AI to rapidly scaffold our initial React, Vite, and Tailwind CSS frontend components. This AI-assisted prototyping allowed us to dedicate our core engineering hours to the complex backend logic. Once the UI foundation was laid, we custom-integrated the CodeArena/Judge0 API. When a user hits "Run Code," our logic sends the source code and language ID to our backend, which interfaces with Judge0 and streams the results back to the UI. For the database and state management, we utilized Supabase. The dynamic leaderboard is entirely powered by Supabase Realtime, instantly reflecting score changes across all participants' screens without any manual refreshing.

Challenges we ran into

State Synchronization: Ensuring the countdown timer was perfectly synchronized for every single participant, regardless of when they joined, required careful implementation and conversion of Unix timestamps. Client-Side Routing on Deployment: Configuring our Vercel deployment to properly handle dynamic URL parameters without throwing "404 NOT_FOUND" errors required setting up custom rewrite rules in our vercel.json configuration.

Accomplishments that we're proud of

  • Successfully integrating Judge0 to provide a seamless, multi-language execution environment right in the browser.
  • Building a secure "Handshake" entry system using access codes that prevents unauthorized entry into live campus battles.
  • Implementing "Continuity Checks" so that if a user accidentally leaves, their progress is synced to the database and preserved upon re-entry.

What we learned

  • How to effectively prompt and collaborate with AI code generators like Lovable to accelerate UI development without losing control over our custom backend integrations.
  • Managing complex Realtime database connections to keep a leaderboard perfectly synced for multiple concurrent users.

What's next for UniCodeArena - Campus Coding

Moving forward, we plan to add an automated admin UI for problem creation and deeper analytics tailored specifically for university professors. We want this to become the standard ecosystem for campus coding growth.

Built With

  • codearena-api
  • judge0-api
  • lovable-ai
  • react
  • shadcn-ui
  • supabase
  • tailwind-css
  • typescript
  • vercel
  • vite
Share this project:

Updates