51 lines
1.3 KiB
Markdown
51 lines
1.3 KiB
Markdown
# 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
|
||
|
||
```bash
|
||
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`.
|
||
|
||
```bash
|
||
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`) |
|