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)