What this showcases
Pokémon TCG Living Dex & Binder Tracker
A full-stack app for tracking a physical Pokémon card collection the way it actually lives in your binders — not as a flat checklist, but as real pages, pockets, and volumes you can flip through.
It models two collecting styles. A Living Dex gives every species one slot, laid out across a page-accurate binder with covers, volumes, and generation breakdowns, so you can see at a glance which pockets are still empty. A Master Set tracks a set at the card level, driven by a rule builder (by set, artist, or Pokémon, combined with AND/OR logic) that populates the target card list and supports "Michi" art slots — decorative pockets the layout engine flows real cards around so nothing is ever dropped.
Under the hood it's a normalized Postgres schema (Prisma) covering species, regional and alternate forms, cards, sets, binders, rules, and per-slot placement, fed by PokéAPI and TCGdex with a strict fetch-once-then-cache policy. The React + TypeScript frontend renders the binder spreads, live progress, stats, and bulk collection tools.
> The live demo runs entirely on bundled fixture data — no backend — so you > can browse a seeded Kanto Living Dex and a Base Set master set right in the page.
Highlights
- Page-accurate binder UI — two-page spreads, covers, volumes, and Michi art slots
- Two tracking modes — species-level Living Dex and card-level Master Sets
- Rule-driven master sets — build sets by artist/set/Pokémon with AND/OR groups
- Layout engine — cards automatically reflow around art slots and page geometry
- Full-stack data modeling — Prisma/PostgreSQL schema over PokéAPI + TCGdex
- Tech stack — React 18, TypeScript, Vite · Node/Express 5, Prisma 7, PostgreSQL · Docker + Kubernetes
Live demo
Loads the live demo in this frame.