YuGiOh Collection Manager — Frontend
React frontend for browsing and managing a personal YuGiOh card collection.
Tech Stack
- React 19 + Vite
- react-virtuoso — virtualized card list (handles 13k+ cards)
- react-router-dom — client-side routing
Pages
| Route | Description |
|---|---|
/ |
Card list with search, filters, owned count tracking |
/sets |
Browse sets, view cards per set with owned counts |
Features
- Search by name with punctuation normalization and typo tolerance
- Filter by type (Monster / Spell / Trap), owned-only toggle, sort by name or owned count
- Per-printing owned count with +/− controls
- Card detail panel with artwork switcher (multiple artworks per card)
- Collection export as JSON backup
- Mobile layout with swipeable bottom sheet for card/set detail
- Full DB import via YGOPRODeck API
Development
npm install
npm run dev
Requires the API running at http://localhost:3000 (proxied via /api).
Deployment
Built as a Docker image served by Nginx. CI/CD via Woodpecker on push to main.
docker build -t yugioh-frontend .
docker run -d --name yugioh-frontend --network yugioh -p 8041:80 yugioh-frontend
Environment
| Variable | Description |
|---|---|
VITE_API_URL |
API base URL for dev proxy (default: http://localhost:3000) |