What this project demonstrates
- End-to-end product execution from concept to shipped experience
- Interaction design under real-time constraints
- Systems design and behavior tuning
- Technical implementation and performance optimization
- Visual polish and usability under pressure
- Product judgment around scope, pacing, and feedback loops
Projects like this are part of my independent lab. They are here as proof of interaction design depth, systems thinking, technical execution, and the ability to ship polished products end to end.
Rummy 500 is one of those card games everyone knows but nobody has built properly for the web. Most implementations either ignore the rules (especially the critical "deepest card" rule when drawing from the discard pile) or the interface falls apart on a phone screen. This version gets both right.
The game engine is a complete, rule-accurate Rummy 500 implementation built in pure TypeScript. Sets, runs, layoffs onto opponent melds, proper Ace handling (high or low depending on context), the 25-point go-out bonus, and multi-round scoring up to 500 points. Every rule was tested against the official game rules, with a comprehensive test suite covering edge cases that most card games get wrong.
The AI opponent comes in three difficulty levels. Easy mode makes random decisions and holds melds longer than it should. Medium plays strategically, evaluating card value and avoiding moves that help the opponent. Hard mode tracks discards, plays optimally, and punishes mistakes. The AI runs through the same game engine as the human player, so it follows every rule exactly.
What took six months was the UX. Drag and drop works on touch screens using gesture recognition. Cards fan properly at any hand size. Melds display clearly even on a 4-inch screen. Animations give feedback without slowing down gameplay. The interface uses a glassmorphic design language with smooth Framer Motion transitions that make the game feel polished rather than functional.
The game ships as a Progressive Web App. Add it to your home screen and it runs full-screen like a native app. It also builds as a desktop app through Electron and as an iOS app through Capacitor, all from the same codebase.
What it does
Complete Rules Engine
Full Rummy 500 rules including the deepest card rule, layoffs, Ace flexibility, go-out bonuses, and multi-round 500-point scoring.
Three AI Difficulties
Easy, Medium, and Hard opponents. Hard mode tracks discards and plays optimally against your strategy.
Touch-First UX
Drag and drop with gesture recognition. Card fanning, meld display, and animations all designed to work on small screens.
Full Card Graphics
Beautiful card artwork with smooth Framer Motion animations for dealing, drawing, melding, and discarding.
PWA + Native Builds
Runs in the browser, installs as a PWA, and builds as a desktop or iOS app from the same codebase.
Layoff System
Add cards to your opponent’s melds for strategic point scoring. A critical part of Rummy 500 that most digital versions skip.
Product gallery




Comments
Built with
- Next.js
- TypeScript
- Zustand
- Framer Motion
- Capacitor
More from the lab
A few related projects that share the same design sensibility and build approach.