NEON ARENA

Neon-drenched duels. One-shot ultimates. Global ranked ladder. Can you reach the top?

Comment

Inspiration

It started with a simple observation: Reddit is full of competitive communities — r/place, r/thetaggame, r/battlebirds — where thousands of strangers rally around a shared goal. But most games on the platform are single-player or turn-based. We wanted to build something that captured the real-time chaos of an actual arena battle, where every match feels like it matters and every loss makes you want to come back and try again.

We were also inspired by classic fighting games like Street Fighter and Smash Bros, but wanted to strip them down to the core loop: pick a class, enter the arena, climb the ladder. No bloat. No pay-to-win. Just pure skill-based PvP that fits in a browser tab and runs natively on a Reddit post.

The name NEON ARENA came from the visual identity we wanted: bright neon glow, dark backgrounds, arcade-style energy. The kind of game that looks like it belongs on a cabinet in a 90s arcade — but built for the modern Reddit feed.

The goal was clear: build a game that redditors would check every single day to see if they'd climbed the ranks.

What it does

NEON ARENA is a real-time PvP battle arena where players:

  1. Enter a username and join the global ladder
  2. Pick a fighter class — each with unique stats, abilities, and playstyles
  3. Battle in real-time against other players in a canvas-rendered arena
  4. Win matches to earn ELO, coins, and XP
  5. Buy gear from the shop to customize their loadout
  6. Complete daily challenges for bonus rewards
  7. Climb the leaderboard and become a legend on the subreddit

Core features:

  • ⚔️ 5 unique fighter classes with rock-paper-scissors balance
  • ELO matchmaking for fair fights (±150 rating)
  • 🏪 Shop & inventory system with cosmetics and gear
  • 🎯 Daily rotating challenges that reset every 24 hours
  • 🏆 Global leaderboard driving community competition
  • 📱 Mobile-first design — plays great on phones

How we built it

Tech Stack

  • Frontend: Next.js 16 (App Router) + React + TypeScript
  • Backend: Next.js API routes (serverless functions)
  • Database: PostgreSQL + Drizzle ORM
  • Hosting: Vercel (frontend + API) + Neon (cloud Postgres)
  • Game Engine: Custom HTML5 Canvas renderer at 60fps

Architecture

The game is split into three layers:

  1. Client (React + Canvas): Handles rendering, input, and real-time animations. The battle arena is a custom canvas loop with sprite-based fighters, particle effects, screen shake, and hit detection.

  2. API (Next.js Routes): Handles player creation, matchmaking, battle resolution, shop purchases, challenge tracking, and ELO updates. Every action is validated server-side to prevent cheating.

  3. Database (Postgres via Drizzle): Five core tables — players, matches, challenges, shop_items, player_inventory — connected via foreign keys. Drizzle's type-safe queries made schema iteration painless.

Key Systems

  • Modified Glicko ELO: Pairs players within ±150 rating for fair matches; updates ratings based on expected outcome.
  • Daily Challenge Rotation: Server-time check resets challenges every 24 hours with new objectives.
  • Class Balance Matrix: Each class has strengths and counters, tuned via playtesting.
  • Optimistic UI: Client predicts battle outcomes for instant feedback, then reconciles with server.

Challenges we ran into

1. Real-Time Without WebSockets

Vercel's serverless functions don't support persistent WebSocket connections on the free tier. We had to get creative: we used short-polling with optimistic UI updates to simulate real-time feel. The client predicts the outcome of an action, shows it instantly, then reconciles with the server response. Not perfect, but it feels real-time.

2. Database Setup Hell

Setting up PostgreSQL locally on Windows was a nightmare — PATH issues, service startup errors, password confusion, silent drizzle-kit push failures. We eventually switched to Neon for the cloud database, which made deployment 10x easier. Lesson learned: cloud DBs are worth it for hackathons.

3. Balancing Five Classes

Making five classes feel unique and fair was way harder than expected. Our first version had Warriors destroying everything. We had to add class-specific counters (Mages beat Warriors at range, Rogues dodge Mage spells, etc.) and playtest for hours to tune damage numbers.

4. Mobile Responsiveness

Reddit is mostly mobile, so the game HAD to work on phones. Canvas rendering on mobile Safari was tricky — touch events, viewport scaling, and performance all needed custom handling. We ended up using a responsive canvas that scales to viewport width while maintaining aspect ratio.

5. Avoiding "AI Slop"

The hackathon rules explicitly call out AI-generated UI as a negative. We hand-designed every screen, picked the neon color palette ourselves, and wrote all the game text. The goal was to make NEON ARENA feel like a real indie game, not a template.

6. Migration Headaches

Getting Drizzle migrations to run against a cloud database from a Windows PowerShell terminal required more troubleshooting than the actual game code. Between connection string typos and silent failures, we learned to always verify with \dt after every push.

Accomplishments that we're proud of

  • 🎮 Built a full real-time PvP game in a browser with no game engine — just Canvas and React
  • ⚡ Shipped a complete full-stack app (frontend + API + DB + deployment) solo
  • 🎨 Designed a cohesive neon aesthetic from scratch — no templates, no AI art
  • 📱 Made it mobile-first so Reddit's mobile users get a great experience
  • 🏆 Implemented a real ELO matchmaking system that produces fair, satisfying matches
  • 🛒 Built a complete economy loop — earn coins, buy gear, equip loadouts, flex cosmetics
  • 🌐 Deployed live on Vercel + Neon with zero downtime during development

What we learned

  • Game feel > features. A simple punch with the right screen shake feels better than a complex combat system that plays stiff. We spent hours tuning hit detection windows and damage numbers just to make every match satisfying.
  • Retention is a design problem, not a tech problem. Daily challenges and a visible ELO ladder did more for engagement than any fancy visual effect.
  • Cloud DBs save lives. Local Postgres on Windows nearly broke us. Neon made deployment trivial.
  • Type-safe ORMs are worth it. Drizzle caught more bugs at compile time than we expected, especially during schema changes.
  • Playtest early, playtest often. Our first class balance was broken. Real player feedback fixed it faster than any spreadsheet.
  • Mobile is not optional. Over 60% of Reddit traffic is mobile. Designing for desktop-only would have killed the project.

What's next for NEON ARENA

NEON ARENA is just getting started. On the roadmap:

  • 👁️ Spectator Mode — watch top-ELO matches live with real-time commentary
  • 🏰 Guilds & Clans — tied to subreddit flairs, with guild-vs-guild tournaments
  • 🎨 User-Submitted Cosmetics — design skins, vote them into the shop (UGC loop)
  • 🎯 Community Challenges — players submit challenge ideas, top-voted ones go live daily
  • 📅 Seasonal Leaderboards — 30-day seasons with exclusive cosmetic rewards for top 100
  • 🔔 Reddit Notifications — get pinged when you're challenged or when your rank changes
  • 🎵 Original Soundtrack — synthwave beats to match the neon aesthetic
  • 🌍 Regional Ladders — compete in your timezone for fairer matchmaking

The dream: NEON ARENA becomes the r/place of PvP games — a daily ritual where thousands of redditors show up to fight, climb, and flex. One match at a time. ⚔️

Built With

Share this project:

Updates

Submission history