Sometimes the best ideas come from the darkest places. About 15 years ago, I was in one of those places—a really low point where all I had was time and a deck of cards. What started as mindless card flipping became something unexpected: a game I'd eventually call Margin Match.

The Birth of Margin Match

Picture this: me, sitting alone, pulling cards one from the top of the deck, one from the bottom, discarding them, and repeating. But then I started noticing patterns and asking myself questions. What if the left card I drew could only "play" on the right card if their values were within a specific margin?

The rule became simple: the left card can only match the right card if it's plus one, minus one, or exactly the same value. A 7 matches with a 6, 7, or 8. Nothing else. If they don't match, you discard both cards, shuffle everything back together, and try again.

It sounds almost trivial, but this little constraint turned a mindless activity into something genuinely engaging. The decisions started mattering. When do you play? When do you discard? How do you strategically work through your deck?

🧑🏼‍🤝‍🧑🏾 A Late-Night Conversation

Fast forward to recently. I was talking to someone who mentioned she was up at 2 AM playing solitaire, and naturally, I told her about this weird game I'd invented years ago. But here's the thing about card games—they're nearly impossible to explain without actually showing someone. She asked for a visual, and that simple request lit a fire under me.

I had to build this thing.

👨🏾‍💻 Building Margin Match: The Tech Stack

When I decided to bring Margin Match to life digitally, I wanted to use modern tools that would let me create something polished and professional. Here's what I landed on:

Next.js 15 became my foundation—the latest version with all the performance improvements and developer experience enhancements. There's something satisfying about building on cutting-edge tech.

Framer Motion handles all the card animations. When you draw cards or play matches, everything flows smoothly. Cards slide, flip, and transition in ways that make the digital version feel almost tactile.

Capacitor lets me export the web app as an Android build. Sure, there are always a few quirks with Capacitor builds (they tend to lag behind the web version), but being able to take a web application and turn it into a native mobile app still feels like magic.

For the visual polish, I incorporated Lucide and React Icons for crisp, modern iconography. The interface needed to feel clean and intuitive—after all, the game's complexity should come from the strategy, not from figuring out how to use the app.

The Details That Matter

One thing I'm particularly proud of is integrating ElevenLabs sound effects—completely free—that give the game audio feedback. There's something deeply satisfying about hearing cards flip and matches register.

The whole thing is hosted on Vercel because, honestly, the deployment process is so smooth it almost feels like cheating. Push to GitHub, and within minutes, the updated version is live.

I even set it up as a Progressive Web App, so it can be installed on phones and desktops, giving it that native app feel without requiring app store distribution.

🎮 The Game Rules (In Case You Want to Try)

Here's how Margin Match actually works:

🌀 Begin Your Journey: Hit 'Start Game' to get your first hand from the deck.

🎲 Draw with Intent: Tap 'Draw Cards' to pull one from the top, one from the bottom.

🔁 Play with Precision: The left card must align with the right board card—it must be +1, 0, or -1 in value (with Aces looping to Kings and vice versa).

🃏 Make Your Move: If they match, hit 'Play' to make your move.

❌ When Fate Frowns: No match? Press 'Discard' to send both cards to the discard pile.

♻️ A Deck Reborn: When you run out of cards, the discard pile gets shuffled back into the deck.

🏆 Victory or Defeat: Win by clearing all cards, or lose if no more plays are possible.

Margin Match Game

Deck

52

Discard

0

Status

Ready

Board Cards

?

?

↓

Drawn Cards

Draw

Cards

Click "Start Game" to begin playing Margin Match!

Why This Matters to Me

What started as a way to pass time during a really difficult period became something I'm genuinely proud of. There's something beautiful about taking an idea that existed only in my head and as scattered cards on a table, and turning it into something other people can experience.

The technical challenge was fun—figuring out card game logic, smooth animations, mobile responsiveness, and audio integration. But more than that, it represents a full circle moment. From that low place where I had nothing but time and cards, to now having the skills and tools to build something real and share it with the world.

Sometimes the best projects aren't the ones we plan meticulously, but the ones that emerge from genuine personal experience and the simple desire to share something meaningful with others.

Now, when someone asks me about that weird card game I invented, I don't have to struggle with explanations. I can just send them a link.

Check out the game here via the web:
https://marginmatch.app/

Projects