When I first set out to build Slots of Fun, my goal was to recreate the thrill of a casino slot machine in a web browser—complete with spinning reels, flashy win effects, and the promise of a jackpot. I chose Next.js with React for its server-side capabilities, NextAuth for seamless Google and magic-link authentication, and Upstash Redis to store user balances and daily bonuses. Early on, I hit my first snag: making sure each user got a daily coin top-up without wiping out their existing balance. After a few iterations, I settled on a simple “days-since-last” calculation that adds coins rather than resets them—problem solved!
The next big hurdle was the core gameplay: generating a 3×5 grid of symbols, unlocking multiple payline patterns as the bet increases, and awarding every winning line in one spin. I experimented with everything from uniform random symbols to weighted distributions, ultimately landing on a configuration where common cherries and lemons light up small 2× or 3× wins, while rare 7️⃣s and diamonds deliver the occasional heart-pounding 50× or 100× payoff. Tracking and highlighting each winning path—whether straight across, zig-zag, or V-shape—took some SVG trickery, but the result feels both intuitive and rewarding.
On the front end, styling felt just as important as the logic. I leaned into Tailwind CSS for quick, responsive layouts and backdrop-blur for that frosted-glass look. Adding confetti animations on wins was straightforward with react-confetti, but getting a non-disruptive, centered win banner—complete with glow and fade—meant juggling absolute positioning, overflow-hidden containers, and timed state changes. I’ve learned that a small layout shift can ruin the magic, so keeping everything locked in place was key.
One of the most satisfying parts of this project was iterating on the payline logic. Early tests showed players rarely won anything beyond a single cherry trio. Introducing micro-payouts for two-of-a-kind, scatter rewards for three stars anywhere on the grid, and tiered symbol-specific jackpots not only keeps the reels sizzling with excitement, it also taught me a lot about balancing probability and player engagement. Simulating thousands of spins in a quick script helped me tune hit rates to around 90–95% RTP while still preserving that “big win” rarity.
Looking back, Slots of Fun has been a crash course in full-stack web development: from authentication flows and Redis data handling, to dynamic gameplay logic, to pixel-perfect UI polish. It’s not just a portfolio piece—it’s a testament to the iterative, problem-solving mindset that makes building interactive web apps so rewarding. Next on my list is integrating a real “Buy Coins” flow with Stripe and a global leaderboard, but for now, I’m thrilled with how it’s come together. Feel free to give it a spin!
🔗 Check it out live: Slots Of Fun