May 18, 2025 2 min read Projects

From Game Idea to Web & Android App: My Margin Match Journey

One quiet afternoon, I was absentmindedly shuffling a deck of cards — just a regular old deck. I started laying them out, wondering if there was a game I could play by myself. Nothing grand or world-shaking — just something to pass the time.
As I flipped cards from both the top and bottom of the deck, I noticed interesting patterns when comparing their values. That's when the concept hit me: a tactical game that played with the margins between card values. I called it Margin Match.

As I refined the rules, playing game after game, I wasn't sure where it would go. Would it just remain a personal pastime with my trusty deck of cards? Or could I actually bring it to life in digital form?
Well, I'm thrilled to say: it's alive and playable — both on the web and Android. And building it turned out to be just as fun as the game itself.

🎮 What is Margin Match?

Margin Match is a solo card game born from my experiments with a standard deck.
The concept is based on a clever twist:

You draw two cards — one from the top of the deck, one from the bottom — and you're only allowed to "match" them if their values are within a margin of ±1.
For example:

A 7 can match with a 6, 7, or 8.
Sounds simple? It is — until you're faced with tough decisions:

When to play?
When to discard?
How to strategically deplete your deck?

What started as me flipping cards on my living room floor turned into a genuine challenge that kept me engaged hour after hour.

🛠️ Building the Game with Next.js 15 + Capacitor

When I decided to turn Margin Match into a real, digital game, I wanted a stack that was modern and future-proof. Here's the tech combo that made it all happen:

Next.js 15 (with the new App Router)
Framer Motion for smooth card animations and UI transitions
TypeScript (because type safety saves sanity)
Tailwind CSS for rapid, clean styling
Capacitor to export it to Android with minimal effort

The structure came together beautifully. From Card.tsx to GameBoard.tsx, every component clicked together like pieces of a puzzle — which is honestly what coding sometimes feels like.

The Logic Behind the Fun

Taking a physical card game I'd created and translating it to code was both challenging and rewarding.
Thanks to custom React hooks and useReducer, managing game state was straightforward but robust.
The rules weren't complicated (I’d already tested them countless times with my actual deck), but I still wanted every digital move to feel tactile and impactful. So I made sure: