HearthSwipe
React · TypeScript · Product Build
Overview
My friends and I play Hearthstone a lot, and I'd spent weeks staring at the card data as rows in a dataframe — so I figured it would be fun to build something that made the data feel like a game. HearthSwipe is what came out of that. You swipe through a 30-card run, judge each card on its own terms, and walk out with a deck code you can paste straight into the game.
The challenge
Making it feel like something you would actually want to use. Swipe mechanics are either satisfying or they feel like a proof of concept, and the gap comes down to small things: responsiveness, feedback, run rules that do not require reading documentation. Deck export also had to respect Hearthstone's duplicate and collection constraints, which added real complexity underneath what looks like a very simple interface.
The approach
- 01 Built the app in React and TypeScript with both gesture and button controls: Like, Nope, Super Like, Reverse.
- 02 Added run mode filters by card type, class, and set, with defaults that make each run playable immediately without any configuration.
- 03 Implemented summary stats, badge logic, and feedback loops so each run has a clear and satisfying finish state.
- 04 Integrated HearthSim deckstrings to export liked cards into a valid copy-ready deck code, handling duplicate rules and collection constraints automatically.
Outcome
What started as "I will throw together a UI around the notebook data" turned into a proper product with a custom visual identity, badge system, and deck export that actually works in game. One of the clearest examples I have of going from raw data to something you would willingly show someone else.
Working on something in the maritime software or applied AI space? Let's talk →
Next project