Phantom

Real-time 1v1 competitive coding platform where developers battle in algorithmic challenges, judged by AI, with cyberpunk UI and live opponent tracking.

Comment

Phantom - Devpost Submission

Inspiration

Coding practice platforms like LeetCode are solitary and monotonous. You grind problems alone, get a green checkmark, and move on. There's no excitement, no adrenaline, no reason to push yourself beyond "it works."

We wanted to transform algorithmic practice into something thrilling—like esports for programmers. What if solving a two-sum problem felt as intense as a ranked match in your favorite game? What if you could watch your opponent's progress in real-time, feel the pressure of their test cases passing, and race to submit first?

Phantom makes learning to code exciting by adding real-time competition, AI-powered feedback, and a visually stunning cyberpunk interface.

What it does

Phantom is a real-time 1v1 competitive coding platform where developers battle head-to-head in algorithmic challenges.

Core Features:

  • Live Split-Screen Battles - Watch your opponent code in real-time as you compete side-by-side
  • AI-Powered Judging - Gemini analyzes code for correctness, efficiency, and quality
  • Real-Time Synchronization - See opponent's test case progress instantly via WebSockets
  • Power-ups System - Strategic abilities like Time Freeze, Code Peek, and Debug Shield
  • AI Code Coach - Get contextual hints without spoiling the solution
  • ELO Matchmaking - Fair matches against similarly skilled opponents
  • Ghost Race Mode - Practice against recorded sessions from top players
  • Beautiful Dark UI - Cyberpunk-inspired glassmorphism with smooth animations

How we built it

Tech Stack:

  • Frontend: Next.js 14, React 18, TypeScript, TailwindCSS, Monaco Editor, Framer Motion
  • Backend: Node.js, Express, TypeScript, Socket.io for WebSockets
  • Databases: PostgreSQL (user data, matches), Redis (sessions, real-time state)
  • Code Execution: Judge0 Cloud API (production), Docker containers (development)
  • AI Integration: Google Gemini API for code coaching and analysis
  • Deployment: Vercel (frontend), Railway (backend, PostgreSQL, Redis)

Kiro's Impact:

Kiro was transformational for this project. We used:

  • Spec-Driven Development - Every major feature started with requirements, design docs, and task breakdowns before writing code. The .kiro/specs/ folder contains complete specifications for battle mechanics, power-ups, AI coaching, and Judge0 integration.

  • Systematic Troubleshooting - When Railway deployment kept failing, Kiro helped us work through error logs, configuration issues, and environment variable problems step by step.

  • Architecture Guidance - Kiro helped design the WebSocket event protocol, database schema, and real-time state management patterns.

What would have taken weeks was completed in days thanks to Kiro's intelligent assistance.

Challenges we ran into

🐳 Docker to Judge0 Migration Crisis

Our biggest challenge hit during deployment. We built a beautiful Docker-based code execution system locally—sandboxed containers with CPU/memory limits, secure isolation, network restrictions. It worked perfectly.

Then we tried deploying to Railway.

The Problem: Railway doesn't support Docker-in-Docker (DinD). Our entire code execution engine was unusable in production.

The Pivot: We had to completely rewrite the execution pipeline to use Judge0's cloud API instead. This meant:

  • Adapting to Judge0's API format and rate limits
  • Working within free-tier API key constraints
  • Handling latency differences between local Docker and cloud API
  • Rewriting all the test case validation logic

Kiro's judge0-cloud-integration spec helped us plan this migration systematically without breaking existing battle functionality.

🚂 Railway Deployment Nightmares

Deploying the backend to Railway was brutal:

  • Environment variables - PostgreSQL and Redis connection strings needed specific formatting
  • Build failures - TypeScript errors that only appeared in Railway's build environment, not locally
  • Health check timeouts - Service kept failing health checks during cold starts
  • WebSocket drops - Socket.io connections dying due to proxy configuration issues
  • Dashboard timeouts - Railway's web UI kept timing out during deploys

The Solution: Kiro helped troubleshoot each issue by analyzing error logs and suggesting fixes. We eventually deployed everything through Railway's CLI after the dashboard proved unreliable. Backend, PostgreSQL, and Redis—all via command line.

⚡ Real-Time Synchronization

Keeping two players' editors in sync with sub-100ms latency while handling network disconnections, race conditions on submissions, and state recovery on reconnect required careful WebSocket architecture and Redis pub/sub.

🔒 API Rate Limits

Both Gemini and Judge0 have strict rate limits. During intense battles with rapid submissions, we implemented request queuing, caching for similar patterns, and graceful degradation.

Accomplishments that we're proud of

  • It actually works in production - Real-time multiplayer with WebSockets, deployed and functional, not just a local demo
  • Survived the Docker → Judge0 pivot - Complete architecture change mid-project without losing momentum
  • Sub-100ms sync latency - Opponent progress updates feel instant
  • Clean spec-driven codebase - Every feature has documented requirements, design, and implementation tasks
  • Deployed via CLI under pressure - When the dashboard failed, we adapted and shipped anyway
  • AI integration that adds value - The code coach gives genuinely helpful hints without spoiling solutions

What we learned

  • Research deployment constraints FIRST - Our Docker execution system was elegant but unusable. Check platform limitations before building.
  • CLI > Dashboard - When Railway's web UI kept timing out, the CLI was rock solid
  • Kiro excels at troubleshooting - Beyond code generation, Kiro is incredible for systematic debugging and working through deployment issues
  • Always have a fallback plan - Judge0's cloud API saved the project when Docker hit a wall
  • Real-time is genuinely hard - WebSocket state management across reconnections needs careful upfront planning
  • Spec-driven development pays off - Having clear requirements made the Judge0 migration much smoother

What's next for Phantom

Immediate:

  • Mobile-responsive UI improvements
  • Additional language support (Python, C++, Rust, Go)
  • Tournament system with brackets
  • Team battles (2v2 relay races)

Medium-term:

  • Ranked seasons with divisions (Bronze → Grandmaster)
  • Challenge Workshop for community-created problems
  • 3D algorithm visualizations during matches
  • Mentorship system pairing beginners with experts

Long-term Vision:

  • Corporate training platform for engineering teams
  • Integration with coding bootcamps and universities
  • Esports-style tournaments with live streaming
  • International Phantom Championship

Phantom isn't just a hackathon project—it's the foundation for making coding practice as engaging as competitive gaming.

Links

Resource URL
Live Demo https://kiroween-phantom.vercel.app
GitHub https://github.com/AhmadYasi/Phantom

Test Accounts

  • player1@test.com / player1@test.com
  • player2@test.com / player2@test.com

Built With

Share this project:

Updates