Public Access
92 lines
3.5 KiB
Markdown
92 lines
3.5 KiB
Markdown
# To Be Played – Frontend
|
||
|
||
Web app of **To Be Played**, a Steam backlog tracker: import your Steam library, decide what to play, and track what
|
||
you finished. The app is shown as "Game Log" in the UI, in German and English, light and dark.
|
||
|
||
|
||
|
||
| Game detail | Public profile | Mobile |
|
||
|---|---|---|
|
||
|  |  |  |
|
||
|
||
To Be Played is split into three repositories:
|
||
|
||
| Repository | Role |
|
||
|---|---|
|
||
| ToBePlayed-Auth | Users, login, settings, signs JWTs |
|
||
| ToBePlayed-Core | Steam library, backlog, wishlist, stats; verifies JWTs |
|
||
| **ToBePlayed-Frontend** (this one) | React single-page app |
|
||
|
||
## Features
|
||
|
||
- **Dashboard**: most played games, games in progress, "Pile of Shame" with backlog hours and a random suggestion,
|
||
Steam avatar and a banner from the most played game of the last two weeks.
|
||
- **Library**: status filters, "short games" filter (up to 10 h), search, sorting by playtime, recently seen, newest
|
||
in library, rating or priority, paging.
|
||
- **Game detail**: status, priority, 1–5 star rating, notes, achievements, time to beat (story / extras / 100 %),
|
||
and a hint when Steam shows recent playtime for a game still in the backlog.
|
||
- **Wishlist** with store price and discount.
|
||
- **Public profile** at `/u/<display name>`, opt-in in the settings.
|
||
- **Appearance**: accent color, corner style, wide layout, page background and banner from your own game art.
|
||
Saved in Auth, so it follows you to every device.
|
||
- German and English, dark mode, mobile layout, session-expired message instead of a silent logout.
|
||
|
||
## Tech stack
|
||
|
||
- React 19, React Router 7, Vite 8
|
||
- Tailwind CSS 4, Radix UI primitives (shadcn/ui style components), Lucide icons
|
||
- react-hook-form + zod for forms, i18next for translations (`public/i18n`)
|
||
- Vitest + React Testing Library + jsdom
|
||
- Production image: nginx (Alpine), SPA fallback and long-term caching for hashed assets
|
||
- CI: Forgejo Actions (`npm ci`, `npm test`, `npm run build`, Docker image)
|
||
|
||
## Project structure
|
||
|
||
```text
|
||
src/
|
||
├── pages/ # One component per route (Dashboard, GameLibrary, GameDetail, ...)
|
||
├── components/ # Shared components; ui/ holds the base components
|
||
├── hooks/ # Data hooks (library sync, Steam profile, appearance, session expiry)
|
||
├── context/ # PreferencesContext: theme, language, appearance
|
||
├── utils/ # Validation schemas and helpers
|
||
└── test/ # Test setup (i18n mock)
|
||
```
|
||
|
||
Tests sit next to the code they test (`Component.test.jsx`).
|
||
|
||
## Run locally
|
||
|
||
Needs Node 24 and running Auth and Core services.
|
||
|
||
```bash
|
||
npm install
|
||
npm run dev
|
||
```
|
||
|
||
| Variable | Purpose |
|
||
|---|---|
|
||
| `VITE_API_URL` | Base URL of the Auth service |
|
||
| `VITE_CORE_API_URL` | Base URL of the Core service |
|
||
|
||
Values for development and production live in `.env.development` and `.env.production`. They end up in the
|
||
browser bundle, so they must never hold a secret.
|
||
|
||
## Tests and build
|
||
|
||
```bash
|
||
npm test
|
||
npm run build
|
||
```
|
||
|
||
## Roadmap
|
||
|
||
- "What to play next" page: time budget and mood on top of the current random suggestion.
|
||
- Achievement progress on the library cards and a library-wide achievement page.
|
||
- Move the JWT from `localStorage` to an httpOnly cookie (needs Auth changes) and add a Content Security Policy in
|
||
`nginx.conf`.
|
||
- Installable PWA.
|
||
|
||
## License
|
||
|
||
All rights reserved. The source is public for reading only.
|