Add Sets page, React Router navigation, collection export, and README

2026-05-16 00:51:45 +02:00
parent 6aa3dcf41b
commit 1b91a0cc3c
8 changed files with 357 additions and 25 deletions
@@ -1,18 +1,50 @@
-# React + Vite
+# YuGiOh Collection Manager — Frontend

-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+React frontend for browsing and managing a personal YuGiOh card collection.

-Currently, two official plugins are available:
+## Tech Stack

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+- **React 19** + Vite
+- **react-virtuoso** — virtualized card list (handles 13k+ cards)
+- **react-router-dom** — client-side routing

-## React Compiler
+## Pages

-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+| Route | Description |
+|---|---|
+| `/` | Card list with search, filters, owned count tracking |
+| `/sets` | Browse sets, view cards per set with owned counts |

-## Expanding the ESLint configuration
+## Features

-If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
+- 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

-## Start Frontend: npm run dev
+## 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`) |