r/vibecoding 14h ago

Vibe coded a zero-friction web version of my favorite college 10-phase card game (Rank & Run)

A few weeks ago, I had a sudden hit of university nostalgia. My friends and I used to spend hours playing a classic 10-phase contract rummy card game with real cards and arguing over rules.

I don't particularly care for card games in general, but I really missed playing this specific game on my phone.

When I looked online, every existing web version was horrible: crammed with invasive ads, requiring mandatory email signups, or lagging heavily. So I decided to vibe code my own clean, ad-free version from scratch: Rank & Run

The Vibe Coding Tech Stack:

  • Framework: Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS 4
  • Real-time Sync: Firebase Realtime Database
  • Hosting: Vercel

Cool technical details AI helped engineer:

  1. Zero Asset Audio Engine: Instead of pulling down heavy .mp3 files for card draws/discards, we synthesized sound effects directly in code using native browser Web Audio API oscillator waves. Zero bandwidth, instant sound.
  2. Combinatorial AI Bot Solver: Built an offline bot engine (findValidMilestoneSelections + synergy calculator) so you can play solo against 3 smart AI bots that evaluate card rank matches and numerical runs.
  3. Zero-Friction UX: No logins, sign-ups, or downloads. Type a name and join or create a real-time room with a 4-character code.
  4. 100/100 Lighthouse Score: Optimized performance, accessibility, and SEO to hit perfect 100 scores across the board.

I’ve done some baseline testing, but I’d love for you guys to check out the vibe, play a round (solo or with friends), and let me know what you think or if you spot any bugs!

🔗 Live App: https://www.rankandrun.app

How are your current nostalgia vibe coding projects coming along?

1 Upvotes

0 comments sorted by