The idea for CodeJam came after seeing many people stuck in Long Tutorial Videos. I noticed that beginners often spend hours passively watching video tutorials but miss the most critical part of learning: building logic through hands on practice. They feel productive but freeze when faced with a blank editor.

I wanted to solve this by making coding feel less like homework and more like a high-stakes arcade game. Visually, I was heavily inspired by the playful, non intimidating aesthetic of nvg8.io. My goal make it more gamified and playful interface that draws exploration, treating every syntax error not as a failure, but as part of the gameplay loop.

CodeJam is a high performance, multiplayer coding esports platform. It transforms the solitary act of debugging into a social, competitive experience.

• The Roadmap: Instead of a boring list of videos, user goes through a gamified journey. They must pass "Skirmish" levels (AI-generated challenges and problems) to unlock the next tier.
• Boss Battles (Daytona Powered): This is the flagship feature. Users are dropped into ephemeral Linux sandboxes (powered by Daytona) where they must fix "Live Incidents" for instance: memory leaks or CPU hogs running on a real server.
• Ghost Mode (Async Multiplayer): Users can challenge friends even when they’re offline. Player 1 plays the game and sets a score against Player 2. Player 2 is then notified and gets a chance to take revenge by beating that score. This cycle continues until a winner is determined, creating a cohesive asynchronous gameplay experience.
• The Social Ecosystem: A robust friend system where beating a friend’s score triggers a "Revenge Loop," notifying them to fight back.

I prioritized a modern and efficient stack to ensure the application felt instant and "juicy."

• Frontend: Built with React framework: Next.js. I used Tailwind CSS and Framer Motion to implement a distinct "Neubrutalist" design system (Nav-Black / Nav-Lime) that feels raw and developer-centric.
• Backend & Real-Time: I utilized Convex DB for the entire backend. It handles user sessions, realtime presence (Online/Offline heartbeat), and the synchronization of battle states without needing complex WebSocket boilerplate.
• Infrastructure: I integrated the Daytona SDK to provision isolated, secure coding environments on the fly. This allows the app to run Python and C++ code in the cloud safely.
• AI Engine: I used OpenRouter to dynamically generate "Interactive Guides" and infinite level variations, ensuring no two playthroughs are exactly the same. Development Workflow:: I used the Antigravity IDE along with Gemini 3 Pro and Claude Opus 4.5 as AI agents during development to rapidly prototype, iterate on features, and stress test gameplay mechanics.

• The Concurrency Conflict: Building the logic for the Interactive Guides was my biggest technical hurdle. Streaming AI tokens directly from the LLM to the database caused massive write conflicts due to the high frequency of updates. I fixed this by using streaming, batches & chunks ensuring smooth text rendering without crashing the database.
• Mobile Responsiveness: Adapting the complex "Bento Grid" dashboard for mobile users was tricky. It took several iterations to fix the UX flaws and ensure that the "Drawer" navigation felt native and intuitive on smaller screens.

• The "Social" Engine: My favorite feature to develop was the Friend & Battle system. Getting the asynchronous "Ghost" logic to work where you race against a friend's past performance felt like magic when I first saw it running.
• Performance & Polish: I'm incredibly proud of how fast the website is. Despite the heavy animations and realtime data, the UI/UX turned out pretty darn good. It feels "snappy" and playful, exactly like the game like vibe I aimed for.
• True Sandbox Execution: Successfully wiring up Daytona to run real code in the cloud gave the project a level of technical depth that I believe sets it apart from standard quiz apps.

• Convex DB: This was my first time using Convex DB, and it was a revelation. It made handling sessions, data fetching, and realtime updates significantly easier than traditional SQL databases.
• Design Systems: I learned a lot about maintaining a consistent UI/UX. Sticking to a strict design system (colors, spacing, typography) was crucial in making the app feel professional and cohesive rather than a patchwork of components.

• TailwindBattle: I am building a new game mode, a "CSSBattle" specifically for Tailwind CSS. It will use computer vision / Multimodal AI Agents to grade how closely a user can replicate a target UI using utility classes.
• Daytona Expansion: I plan to expand the Daytona integration to support more complex "Boss Scenarios," including multifile projects and full-stack debugging challenges in Rust and Go.