Why Another Deck Builder?#
The TCG community is ridden with deck builders - every developer who plays a TCG has their own ideas as to what constitutes “the best” when it comes to deck builders.
If there’s one thing I learned building my startup Paire Appetit, it’s that “the best” is subjective (thanks to my partner Josh for instilling that in me!) The best is subjective - that doesn’t just apply to food - it applies to, well, everything.
There’s a reason the TCG community is so fragmented. Every game plays different; is built different. And if you’re like me, you play multiple games! But that also means you use multiple deck builders - and in some cases, that means you love some and hate the others, but you don’t have a choice what you can use, since every game has its own set of dedicated deck builders.
There are 3 core things I’ve always wanted in any deck builder I use:
- Intelligent searching. I’ve only come across one deck builder that was able to provide me close what I want (shoutout to OrangeSwim with https://digimoncard.dev) but unfortunately, that deck builder isn’t mobile friendly, and the search isn’t all the way there.
- Mobile-optimized. Everyone deck builds from the desktop, but sometimes you want to look at cards on-the-go, or you have a quick idea you want to sketch out. Unfortunately, not every deck builder has a good mobile interface.
- Collection tracking. Need I say more? Who doesn’t want to track their collections? Can you imagine how easy it would be to make decks if your collection quantities were at your fingertips and you didn’t have to go check every time? No? Just me?
I know I said 3 core things, but in reality it’s 4 core things, with this being the nucleus of it all: I need to be able to use the deck builder I like with whatever game I’m playing. And so, Sleeved was born! (Without collection tracking, at the moment. I’m working to make it a feature I’d love to use, so it’s not released just yet.)
The Tech#
Let’s get down and dirty. The pitch is that Sleeved is a multi-game, multi-faceted TCG platform built in React using TypeScript with a Express-backed Node.js server. The core concept of how I developed Sleeved is utilizing a modular GameAdapter architecture. We currently support the following games:
- Digimon Card Game
- Gundam Card Game
- Chrono Core TCG
- Grand Archive TCG
Technical mumbo jumbo that means integrating a new TCG takes me a week or two instead of a couple months. How? Well, there are core concepts to every TCG that you can abstract - and we used Domain-Driven Design to do it.
Core Architecture#
The GameAdapter<TCard> interface defines the contract each game must implement:
- Card models and type definitions
- Deck zone configurations (main deck, sideboard, resource piles)
- Search facets and filter configurations
- Card detail rendering
- Import/export codecs for various deck formats
To cement the idea, think of it like this: Digimon has a Digi-Egg deck with 0-5 cards. Chrono Core has a Starting Loadout that must include a certain amount and types of cards. Grand Archive has a Material Deck. And our adapter handles all of these - same UI, same components, just different rules under the hood.
Every feature & component we design is coded against our GameAdapter, which means every component works seamlessly with new game integrations, requiring little to no changes every time we drop in a new TCG.
Data Pipelines#
Believe it or not, when it comes to TCG data - sometimes you hit the jackpot and there’s an official source easy enough for you to ingest. Other times?
…
Well, needless to say - that’s why data pipelines are a big part of Sleeved.
A lot of work goes into developing our pipelines. The world we live in today, the likes of Anthropic’s Claude models are huge boons - but make no mistake, those models are not perfect. They get you halfway there, but it’s a relay race and you have to be able to finish the job. While our GameAdapter architecture helps greatly with reducing TTI (Time To Implement) for new TCGs, it doesn’t help with the data pipeline. You have to vet sources, figure out structures and monitor the pipelines over the first few runs. But that just barely touches the surface of how intensive data pipelines can get.
We extensively use Firebase Cloud Functions to power our data infrastructure. Sure, I could’ve run CRON jobs on the server, but where’s the fun in that? Prior to this project, I’ve never worked with Firebase, so I aimed to expand my repertoire here. I also benefitted from the fact that we use Firestore heavily, so Cloud Functions gave us a straight pipeline into it, no problems. And hey, who can ignore the minimal ops overhead involved?
Intelligent Searching
The reason we put so much time into our data pipeline is because it powers our intelligent searching with Algolia. Their technology allows us to perform instant searches with game-specific facets - meaning you can find Digimon by level, color AND effect, or Chrono Core equipment by Mk. Value, type and keyword. Combine whatever you need to find the exact card you need. The process is meant to be as simple and intuitive as possible.
Lessons Learned#
Invest time in learning software engineering methodologies, paradigms and designs. A breadth of knowledge will take you a long way - sure, you cannot know everything to the fullest extent, but if you can understand what it is you’re looking at, you can solve any problem in your way. This is the core of what they teach you in Computer Science programs. Unfortunately, I never got to finish (though I most certainly plan to, one day!)
Data is NOT one-size-fits-all. Try as you might, different sources mean different patterns, which means different ingestion and different transformations. Data is as opinionated as we are as TCG players, software developers and people. Make sure to vet your sources AND your parsers. One mismatch can mess up the entire pipeline, so take it seriously - there’s a reason there’s an entire employment field dedicated to Data Scientists and Engineers!