dex-binder

A Gen 1 Pokémon TCG binder tracker focused on Japanese cards. Browse all 151 original Pokémon in a book-style binder, pick the exact Japanese card you own from a visual card browser, and track your collection — with offline support via PWA.

Features

• Book-style binder — 3×3 card grid per page, paginated as a two-page spread
• Japanese card browser — 400+ Japanese cards indexed from modern SV-era sets via TCGDex
• Custom card entry — paste any image URL for cards not in the index (e.g. older or obscure sets)
• German Pokémon names — fetched from PokéAPI and cached server-side
• Search — find any Pokémon by German name, English name, or Pokédex number
• Offline support — IndexedDB cache + PWA service worker
• Persistent storage — SQLite via Prisma, survives restarts

Stack

Layer	Technology
Framework	Next.js 16 (App Router, TypeScript)
Styling	Tailwind CSS
Database	SQLite via Prisma v7 + better-sqlite3
Card data	TCGDex Japanese API (static seed)
Pokémon names	PokéAPI
Offline cache	IndexedDB (idb)
PWA	Custom service worker + Web App Manifest

Getting Started

Prerequisites

• Node.js 24+
• npm

Local development

npm install
npx prisma migrate dev
node scripts/seed-jp-cards.js   # builds data/gen1-jp-cards.json (~434 cards)
npm run dev

Open http://localhost:3000.

Re-seeding card data

The card index in data/gen1-jp-cards.json is a static snapshot built from TCGDex. Re-run the seed script whenever you want to pick up newly indexed sets:

node scripts/seed-jp-cards.js

Usage

• Click a card slot to mark it as done — opens the Japanese card picker
• Right-click a completed slot to change the card
• Click a completed slot again to unmark it
• Use the search bar to jump to any Pokémon by name or #number
• If a card isn't in the index, use the "Custom card" section at the bottom of the picker to paste any image URL directly

Deployment

Docker Compose

docker compose up --build

The SQLite database is stored in a named Docker volume (db-data) mounted at /data/dex-binder.db inside the container. Migrations run automatically on startup.

Environment variables

Variable	Default	Description
DATABASE_URL	file:./dev.db	SQLite path (file:<path>)

CI

Forgejo Actions workflow at .forgejo/workflows/ci.yaml runs on every push and pull request to main:

1. npm ci
2. npx prisma generate
3. npm run lint
4. npm run build