# 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`) |