diff --git a/README.md b/README.md index c9f74f7..4c4072d 100644 --- a/README.md +++ b/README.md @@ -65,3 +65,59 @@ The project has no test runner today. Suggested setup: - **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. +## 🎯 Product Roadmap (Frontend-owned slices) + +The full cross-service product roadmap lives in `ToBePlayed-Deployment/README.md`. This section lists only the UI / UX slices that land in the Frontend. + +### 1. Backlog tracking UI + +Today `GameLibrary.jsx` is a paginated grid of synced Steam games — there is no per-game state. Once Core exposes status + notes + rating, the Frontend needs: + +- **Status chips** on each game card (`BACKLOG / PLAYING / COMPLETED / DROPPED / ON_HOLD / WISHLIST`) with one-click cycling or a popover for explicit selection. +- **Status filter bar** above the grid; multi-select; persisted to URL search params so links are shareable and back-button works. +- **Game detail page** (`GameDetail.jsx` exists — extend it) with rating widget (stars or 1–10), completion date picker, markdown notes editor with preview. Optimistic update on save, server reconciliation on failure. +- **Drag-to-reorder** within `BACKLOG` for priority. Use a small library (`@dnd-kit/core`) — well-maintained, accessible. + +### 2. "What to play next" page + +- New route: `/play-next` (or surface from Dashboard). +- Form: time budget radio (15 min / 1 h / weekend), mood tag multi-select. +- On submit: call Core's picker endpoint, render 3 cards. "Reroll" button calls again. +- One-tap "Start playing" sets game status to `PLAYING`. + +This page is the single best mobile entry point — design mobile-first. + +### 3. Achievement views + +Data is already in Core. The Frontend needs: + +- Achievement progress ring on each game card + game detail. +- New route `/achievements` showing library-wide unlocked / total / percent. +- "Closest to 100%" widget on Dashboard. + +### 4. Public profile + sharing + +- New route `/u/:username` rendered server-friendly (consider SSR / pre-render for SEO, or at least set proper `` / `<meta>` via `react-router` loaders so link previews work). +- "Currently playing" + "Recently completed" sections. +- "Share my profile" button (copies URL). +- Settings toggle for `profile_public`. + +### 5. Friends + compare + +- `/friends` page: list, request, accept, remove. +- "Add friend" search by username (autocomplete against Auth endpoint). +- "Compare backlogs with X" page: lists games both own, intersected with `BACKLOG` status on either side — i.e. "next co-op night candidates". + +### 6. Mobile / PWA + +- Verify the SPA is installable as a PWA: manifest, icons (already in `public/`?), service worker via `vite-plugin-pwa`. +- Test core flows (login, picker, status update) on a real phone, not just devtools. The "what to play tonight" use case is mobile-primary. + +### 7. UX details that compound + +- **Search**: client-side fuzzy search across library (Fuse.js or similar) on the already-loaded page; server-side search if the library gets large enough that pagination hurts. +- **Empty states**: every list should have an empty state with a clear next action ("Connect Steam to import games", "No completed games yet — mark one!"). +- **Optimistic updates** for any status / rating / notes change — they should feel instant. +- **Keyboard shortcuts** for power users (`j/k` to navigate, `s` to set status, `?` to show shortcut list). +- **i18n** is already wired (`i18next`); make sure every new string lands in the translation files, not hardcoded. +