NookDex
A Pokémon TCG collection tracker drawn as a cosy painted desk.
Your sets are binders on a shelf, the old computer on the desk runs your stats, and the cat sleeps next to your boosters.
→ nookdex.com · free, in French and English, on desktop and phone
What it does
- One binder per set. Pick a set (French, English or Japanese cards), it goes on the shelf. Open it, turn the pages:
grey cards are the ones you're missing, a tap marks a card as owned.
- Every copy, in detail. Variant (normal, reverse, holo), Cardmarket condition, duplicates, price paid or "pulled
from a booster". The card sheet shows today's market price, the 7-day trend and a price curve.
- Free binders for whatever you like: favourites, a deck, cards to trade. You can search all ~43,000 cards to fill them.
- NookDex OS, the desk computer: collection value, spending and gains, all cards (search, filter by rarity,
year and set, sort by price), wishlist, duplicates to trade, save and account.
- Prices in the card's own market. French and Japanese cards are priced on Cardmarket (€), English cards on
TCGplayer ($). Totals are added up in your currency. Prices are refreshed every day.
- Your collection follows you. You can sign in with an e-mail link or Google to sync across devices, or play
without an account and export a file.
- Share your progress: a picture of a binder (completion, value, best cards) ready for social media.
- Made to feel like a little game: hand-painted scene, low-fps "boil" animation, film grain, sounds synthesized in
the browser, a lofi radio, and a guided tour on your first visit.
The site also has a blog (price analyses, upcoming sets), one page per set with its most valuable cards, and a release
calendar.
How it's built
| |
|---|
| App | Next.js (App Router), React, zustand (state, saved in the browser), motion |
| Accounts and sync | Supabase (magic link and Google sign-in, one JSON save per player, asks which one to keep when two devices disagree) |
| Card data | TCGdex: cards, scans and Cardmarket prices. English prices from TCGplayer, with TCGCSV for the cards TCGdex doesn't link. |
| Data pipeline | Scripts turn the card data into static JSON (public/sets/). A daily GitHub Action refreshes prices and appends to a price history. |
| Hosting | Vercel, with e-mails sent through Brevo |
| Visuals | A painted scene, cut into layers (binders, cat, lamp…) by scripts/build-scene.mjs |
There's no card database server: every set is a static file the browser downloads when it needs it. The room is
client-only. The notebook pages (about, blog, set pages, release calendar) are server-rendered for search engines.
Run it locally
npm install
npm run dev
Dev-only URL shortcuts: ?skip (skip the loader), ?open=<setId> (open a binder), ?os (open the computer),
?demo (fill a test collection).
Card data
npm run fetch-set # sets not downloaded yet
npm run fetch-set -- --force # refresh every binder set's prices
npm run fetch-set -- sv08 # one set (and its sub-sets)
npm run fetch-set -- --lang=en # the same in English (TCGplayer prices); --lang=ja for Japanese
npm run build-scene # cut the painted scene into layers (public/scene, src/data/scene.json)
Where things are
| Path | What |
|---|
src/components/room/ | The painted desk, its layers and animations |
src/components/binder/ | A binder: cover, pages, card slots, the card sheet |
src/components/computer/ | NookDex OS |
src/components/shelf/ | First visit (welcome, guided tour), new-binder menu |
src/app/(desk)/ | The room, plus the notebook pages opened over it (about, blog, sets, release calendar) |
src/lib/ | Store, cloud sync, catalog, prices, search, sounds |
scripts/ | Card data, price history, scene and icon builders |
content/blog/ | Blog posts (Markdown, French and English) |
docs/ | Supabase schema, e-mail templates, blog guidelines, plans |
Credits
Card data, scans and Cardmarket prices: TCGdex. English prices: TCGplayer, via TCGdex and
TCGCSV.
NookDex is a fan project. It isn't affiliated with, endorsed or sponsored by Nintendo, The Pokémon Company, Creatures,
GAME FREAK, Cardmarket or TCGplayer. Pokémon and the card images are trademarks and © of their respective owners.
Made by Johan. If you like it, you can buy the cat a treat 🐈
