ShibaCoder

Real-time 1v1 competitive programming battles.

Comment

Inspiration

Let's be real, LeetCode for the vast majority of people is not an enjoyable use of their time. It's too grindy, time consuming, and dreadful. But what if we made it fun? That's why we built ShibaCoder, a 1v1 competitive programming battle you can play against friends or online players.

ShibaCoder addresses these problems:

  • Traditional coding platforms feel sterile and isolating
  • Learning to code can be discouraging without community support
  • Competitive programming lacks the excitement and spectator experience of gaming
  • Code reviews happen too late in the learning process

What it Does

Our platform turns competitive coding into a real-time multiplayer game. Players join public or private lobbies and face off in fast-paced coding battles using a built-in editor and live execution engine. Spectators can watch code unfold live, send emoji reactions, and chat in real time. Gameplay includes attack mechanics like screen shake and flashbangs to distract opponents, adding a strategic twist. An ELO-based ranking system ensures fair matchmaking and progression. A retro UI, customizable Shiba avatars, and built-in learning tools make the experience fun, educational, and accessible—whether you're competing, spectating, or just exploring.

How we Built It

  • Frontend: React 18, Vite, TailwindCSS, Monaco Editor, React Router, WebSocket API
  • Backend: FastAPI, WebSocket, Railway, CORS, Uvicorn, Python Logging
  • Development Tools: npm/yarn, Git, VS Code, Browser DevTools, Railway Logs, Lighthouse

Challenges We Ran Into

There were six notable challenges we ran into during development:

1. Real-time state synchronization

  • Keeping the lobby state consistent across multiple clients.
  • Fixed by implementing comprehensive WebSocket event handling with proper cleanup and state management.

2. Judge0 API Integration

  • Handling API timeouts, rate limits, and unreliable responses.
  • Fixed by building a fallback system with realistic fake test results and comprehensive error handling.

3. Winner Detection Bug

  • Both players receiving winner popup, regardless of actual outcome (this was due to string comparison issues)
  • Fixed version handling whitespace and case sensitivity

4. Memory Leaks in Live Features

  • Timeout references weren't being cleaned up properly.
  • Fixed by implementing proper cleanup in useEffect hooks.

5. UI Clipping Issues

  • Daily button glowing effect was getting cut off.
  • Fixed by increasing navbar padding and optimizing shadow spread.

6. Cross-Platform Deployment

  • Different deployment requirements for frontend/backend.
  • Fixed by using Railway for our Python backend, and Vercel for our React frontend with proper CORS configuration.

Accomplishments that We're Proud of

  • 1. Zero-Breaking-Change Architecture: Additive feature development with full backward compatibility—no regressions throughout.

  • 2. Real-Time System at Scale: Handles 100+ concurrent users via WebSockets with sub-200ms latency, auto-reconnect, and efficient memory cleanup.

  • 3. Immersive Spectator Mode: Real-time code viewing, typing indicators, emoji reactions, and live chat for an engaging audience experience.

  • 4. Retro Gaming Aesthetic: Animated Shiba sprites, attack VFX, floating cloud background, and authentic NES.css styling for pixel-perfect visuals.

  • 5. Educational Integration: In-game CS learning modal, community forum, and ELO-based difficulty matching promote structured learning and growth.

What We Learned

  • Technical Lessons: Learned advanced WebSocket patterns, race condition prevention, robust API error handling, and performance-friendly CSS animations.

  • User Experience Insights: Gamification boosts engagement, community features foster collaboration, and accessibility is essential—even with a retro theme.

  • Project Management: Practiced additive development, emphasized thorough documentation, and developed a real-time testing strategy for varied network conditions.

What's Next for ShibaCoder

Immediate Roadmap (Next 2 months)

  • Tournament Mode: Bracket-style competitions with elimination rounds
  • Advanced Analytics: Detailed performance metrics and code quality scoring
  • Theme Customization: Multiple UI themes beyond retro (cyberpunk, nature, space)
  • Mobile Optimization: Responsive design for tablet/phone coding

Medium-Term Goals (6 months)

  • AI Code Review: Real-time suggestions and optimization tips
  • Educational Campaigns: Structured learning paths with progress tracking
  • Team Battles: 2v2 and 3v3 collaborative coding challenges
  • Language Support: Support for Python, JavaScript, Java, C++, etc.

Long-Term Vision (1 year +)

  • University Integration: Partner with CS programs for classroom use
  • Streaming Platform: Twitch-style streaming for coding battles
  • Corporate Training: Enterprise version for technical interviews and team building
  • Global Championships: International coding competitions with real prizes

Built With

  • browser-devtools
  • chat-gpt
  • claude
  • cors
  • cursor
  • fastapi
  • figma
  • figma-slides
  • git
  • github
  • iconify
  • judge0
  • lighthouse
  • monaco-editor
  • nes.css
  • npm
  • pixellab
  • python
  • python-socketio
  • railway
  • railway-logs
  • react-18
  • react-router
  • tailwind-css
  • uvicorn
  • vercel
  • vite
  • vs-code
  • websocket
  • websocket-api
  • yarn
+ 3 more
Share this project:

Updates