To Be Played - Frontend

A modern web application to manage your game backlog, built with React and Vite.

🚀 Tech Stack

Framework: React
Build Tool: Vite
Styling: Tailwind CSS 4
Icons: Material Design Icons (MDI)

📂 Project Structure

├── public/          # Static assets (favicons, icons)
├── src/
│   ├── assets/      # Images and global media
│   ├── components/  # Reusable React components
│   ├── App.jsx      # Main application layout and entry component
│   ├── main.jsx     # App initialization (React DOM, Styles)
│   └── style.css    # Global Tailwind and custom CSS
├── index.html       # Entry HTML file
├── package.json     # Dependencies and scripts
└── vite.config.js   # Vite configuration

🛠️ Development

Setup

npm install

Start Development Server

npm run dev

Build for Production

npm run build

🗺️ Roadmap / Open Topics

Tracking known work that is not yet implemented. Each item is independently actionable.

Security

Move JWT out of localStorage. Today the token is stored under localStorage["tbp_jwt"], which makes it readable by any script running on the page — a single XSS in an npm dependency exfiltrates every session. Switch to an httpOnly Secure SameSite=Lax cookie set by tbp-auth-service on login. The SPA no longer touches the token directly; the browser attaches it automatically to requests to *.tbp.andreas-dahm.eu. Requires coordinated changes in Auth (set the cookie) and Deployment (cookie domain + CORS allowCredentials=true).
Add CSRF handling. Once auth rides on a cookie, the SPA must echo a CSRF token in a header on state-changing requests. Spring Security's CookieCsrfTokenRepository.withHttpOnlyFalse() on the server pairs with a small fetch interceptor on the client that reads XSRF-TOKEN and sets X-XSRF-TOKEN.
Content Security Policy. Add a CSP header in nginx.conf so XSS exfiltration paths are blocked even if a vulnerability slips in. Minimum starting point: default-src 'self'; img-src 'self' data: https://*.steamstatic.com; object-src 'none'; base-uri 'self'; frame-ancestors 'none'. Tighten further by replacing inline styles/scripts (Tailwind is already build-time, so this should be feasible).

Testing

The project has no test runner today. Suggested setup:

Unit / component tests: Vitest + React Testing Library. Tests live next to the component (Component.test.jsx).
API mocking: MSW (Mock Service Worker) so component tests don't hit the real backend and the same handlers can drive Storybook later.
End-to-end tests: Playwright, scoped to the golden paths (login → see library → log out, registration with invitation code, settings update). Run against the real tbp-auth-service + tbp-core-service via docker-compose.dev.yml in CI.
First test targets: the auth context / token-handling code, the dark-mode toggle (localStorage["tbp_dark_mode"]), and i18n string resolution.

Other

Audit localStorage usage. Currently used for tbp_jwt (planned to move) and tbp_dark_mode. Document any other keys before they accumulate.
API base URL handling. VITE_API_URL covers Auth; Core's base URL is implicit. Make both explicit (e.g. VITE_AUTH_URL, VITE_API_URL) so dev / prod / preview environments are unambiguous.

3.5 KiB Raw Blame History