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

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.

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

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.

README.md Unescape Escape

To Be Played – Frontend