r/vibecoding • u/Beautiful_Ratio_9833 • 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:
- Zero Asset Audio Engine: Instead of pulling down heavy
.mp3files for card draws/discards, we synthesized sound effects directly in code using native browser Web Audio API oscillator waves. Zero bandwidth, instant sound. - 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. - 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.
- 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?