mirror of
https://github.com/AmanTahiliani/box-box.git
synced 2026-08-07 11:54:59 -04:00
Add React race hub frontend
This commit is contained in:
@@ -179,3 +179,11 @@ After v1:
|
||||
- Build full Command Center, Standings, Drivers, and Settings.
|
||||
- Improve mobile/iPad live layouts.
|
||||
- Add broader Playwright coverage and visual regression checks.
|
||||
|
||||
### Phase 6: React Race Hub Analytics
|
||||
|
||||
- Add Race Hub tabs or segmented views.
|
||||
- Keep classification and grid intact.
|
||||
- Add Dataset Status, Strategy, and Position Evolution views.
|
||||
- Use real local-first data where available and honest missing states otherwise.
|
||||
- Continue frontend work with Claude.
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
# Phase 6 React Race Hub Analytics
|
||||
|
||||
## Purpose
|
||||
|
||||
Phase 6 expands the React Race Hub from a classification/grid slice into a more
|
||||
useful race analysis surface. Phase 5 proved the React stack, API contract,
|
||||
desktop layout, and phone table behavior. This phase should add the first
|
||||
bespoke F1 analysis views without replacing the whole Web app.
|
||||
|
||||
This remains a frontend-led phase for Claude.
|
||||
|
||||
## Scope
|
||||
|
||||
Add Race Hub tabs or segmented views for:
|
||||
|
||||
- Overview / Classification
|
||||
- Starting Grid
|
||||
- Strategy
|
||||
- Position Evolution
|
||||
- Dataset Status
|
||||
|
||||
Strategy and position views should be built from local-first backend data only
|
||||
when the backend exposes the needed datasets. If laps/stints/positions are not
|
||||
yet available through `/api/v1/race-hub`, add clear missing states instead of
|
||||
fake charts.
|
||||
|
||||
## Backend Contract
|
||||
|
||||
Current Race Hub API:
|
||||
|
||||
```text
|
||||
GET /api/v1/race-hub?session_key=...
|
||||
```
|
||||
|
||||
Current datasets:
|
||||
|
||||
- meeting
|
||||
- session
|
||||
- drivers
|
||||
- results
|
||||
- starting_grid
|
||||
|
||||
If analytics require laps, stints, pit stops, or position samples, keep backend
|
||||
changes small and explicit. Do not reintroduce direct OpenF1 reads from the
|
||||
React app.
|
||||
|
||||
## Design Direction
|
||||
|
||||
Improve the information hierarchy without drifting into generic dashboard UI:
|
||||
|
||||
- stronger timing-wall readability;
|
||||
- compact controls;
|
||||
- minimal panel framing;
|
||||
- no decorative gradients or card sludge;
|
||||
- team colors as data accents;
|
||||
- mobile views that fit the active columns rather than relying on horizontal
|
||||
scrolling.
|
||||
|
||||
## Non-Goals
|
||||
|
||||
Do not include these in Phase 6:
|
||||
|
||||
- live timing React rewrite;
|
||||
- full season calendar rebuild;
|
||||
- settings UI;
|
||||
- ingest UI;
|
||||
- static archive support;
|
||||
- replacing the old Go-served Web UI entirely.
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
Phase 6 is complete when:
|
||||
|
||||
- Race Hub has an ergonomic tab/segmented-view structure;
|
||||
- classification and grid remain intact;
|
||||
- analytics views show either real local data or honest missing states;
|
||||
- desktop and phone layouts have been visually checked;
|
||||
- frontend tests/build pass;
|
||||
- Go build still passes.
|
||||
@@ -59,8 +59,10 @@ not implementation tickets yet.
|
||||
coding slice for store-backed Race Hub read models and Web API metadata.
|
||||
- [13 Phase 5 React Race Hub](13-phase-5-react-race-hub.md): first frontend
|
||||
implementation slice for the production Web UI.
|
||||
- [Claude Phase 5 Prompt](claude-phase-5-react-race-hub-prompt.md): current
|
||||
handoff prompt for Claude to begin React/frontend work.
|
||||
- [14 Phase 6 React Race Hub Analytics](14-phase-6-react-race-hub-analytics.md):
|
||||
next frontend slice for strategy, position, and richer Race Hub views.
|
||||
- [Claude Phase 6 Prompt](claude-phase-6-react-race-hub-analytics-prompt.md):
|
||||
current handoff prompt for the next Claude frontend phase.
|
||||
|
||||
## External References
|
||||
|
||||
|
||||
@@ -1,103 +0,0 @@
|
||||
# Claude Prompt: Phase 5 React Race Hub
|
||||
|
||||
You are the frontend/UI lead for `box-box`, an F1 local-first command center.
|
||||
|
||||
Backend Phases 1-4 are complete:
|
||||
|
||||
- `internal/live` owns shared official F1 SignalR live timing.
|
||||
- `internal/store` owns the local SQLite domain DB.
|
||||
- `internal/ingest` can ingest OpenF1 data into the local store.
|
||||
- `internal/query` and Web API expose local-first Race Hub data at:
|
||||
|
||||
```text
|
||||
GET /api/v1/race-hub?session_key=9472
|
||||
```
|
||||
|
||||
Your task is Phase 5: begin the production React Web UI with a focused Race Hub
|
||||
slice.
|
||||
|
||||
## Read First
|
||||
|
||||
Read these files before editing:
|
||||
|
||||
- `CLAUDE.md`
|
||||
- `documentations/refactor/04-web-ui-product.md`
|
||||
- `documentations/refactor/05-frontend-stack.md`
|
||||
- `documentations/refactor/06-visual-design-direction.md`
|
||||
- `documentations/refactor/12-phase-4-local-first-web-api.md`
|
||||
- `documentations/refactor/13-phase-5-react-race-hub.md`
|
||||
- `documentations/refactor/screens/index.html`
|
||||
- `documentations/refactor/screens/race-hub.html`
|
||||
- `documentations/refactor/screens/live-timing.html`
|
||||
- `documentations/refactor/screens/mobile-live.html`
|
||||
- `internal/web/racehub.go`
|
||||
- `internal/query/racehub.go`
|
||||
|
||||
## Goal
|
||||
|
||||
Add the first production React frontend slice for Race Hub. Keep the existing
|
||||
Go-served static Web UI working while the React route matures.
|
||||
|
||||
## Required Work
|
||||
|
||||
1. Add a Vite + React + TypeScript frontend foundation.
|
||||
2. Use TanStack Query for API loading.
|
||||
3. Use TanStack Router unless there is a clear reason to choose React Router.
|
||||
4. Build a Race Hub screen backed by:
|
||||
|
||||
```text
|
||||
/api/v1/race-hub?session_key=...
|
||||
```
|
||||
|
||||
5. Show:
|
||||
- meeting/session header;
|
||||
- source/dataset status strip;
|
||||
- classification table;
|
||||
- starting grid table;
|
||||
- driver/team identity treatment;
|
||||
- missing/partial dataset states;
|
||||
- desktop and phone-responsive layouts.
|
||||
6. Keep old Web UI routes/assets intact.
|
||||
7. Add at least basic tests or a smoke check.
|
||||
8. Document how to run the React dev server and how it connects to the Go API.
|
||||
|
||||
## Design Guardrails
|
||||
|
||||
- Make it feel F1-native and operational, not like a generic SaaS dashboard.
|
||||
- Avoid card sludge.
|
||||
- Avoid decorative gradients, blobs, fake hero sections, and meaningless chrome.
|
||||
- Prefer dense, scan-friendly timing-wall ergonomics.
|
||||
- Use team colors as structured data accents.
|
||||
- Do not put cards inside cards.
|
||||
- Build mobile intentionally; do not just squeeze desktop.
|
||||
- Use icons where appropriate, but do not overdecorate.
|
||||
|
||||
## Backend Guardrails
|
||||
|
||||
- Do not rewrite ingestion.
|
||||
- Do not persist live SignalR data.
|
||||
- Do not replace all Web endpoints.
|
||||
- Make only small API tweaks if integration reveals a real contract problem.
|
||||
- Preserve the existing static Web UI until the React slice is credible.
|
||||
|
||||
## Verification
|
||||
|
||||
Run the relevant frontend checks you add, plus:
|
||||
|
||||
```bash
|
||||
go build -o /tmp/box-box ./cmd/main.go
|
||||
```
|
||||
|
||||
If dependencies need to be installed, use the repo's package manager choice and
|
||||
record the commands in your final response.
|
||||
|
||||
## Final Response
|
||||
|
||||
Report:
|
||||
|
||||
- frontend package/files added;
|
||||
- dev command and URL;
|
||||
- API endpoint used;
|
||||
- tests/smoke checks run;
|
||||
- screenshots or notes about desktop/mobile behavior if available;
|
||||
- any backend contract issues discovered.
|
||||
@@ -0,0 +1,76 @@
|
||||
# Claude Prompt: Phase 6 React Race Hub Analytics
|
||||
|
||||
You are continuing the React frontend work for `box-box`.
|
||||
|
||||
Phase 5 added the Vite + React + TypeScript app under `frontend/` and built the
|
||||
first Race Hub route using:
|
||||
|
||||
```text
|
||||
GET /api/v1/race-hub?session_key=...
|
||||
```
|
||||
|
||||
Your task is Phase 6: expand Race Hub into a richer analysis surface while
|
||||
keeping the design F1-native and operational.
|
||||
|
||||
## Read First
|
||||
|
||||
Read:
|
||||
|
||||
- `frontend/README.md`
|
||||
- `frontend/src/pages/RaceHubPage.tsx`
|
||||
- `frontend/src/styles/app.css`
|
||||
- `frontend/src/types.ts`
|
||||
- `documentations/refactor/06-visual-design-direction.md`
|
||||
- `documentations/refactor/13-phase-5-react-race-hub.md`
|
||||
- `documentations/refactor/14-phase-6-react-race-hub-analytics.md`
|
||||
- `internal/query/racehub.go`
|
||||
|
||||
## Goal
|
||||
|
||||
Add a more useful Race Hub interaction model: tabs or segmented views for
|
||||
classification, grid, strategy, position evolution, and dataset status.
|
||||
|
||||
## Required Work
|
||||
|
||||
1. Add a compact Race Hub tab/segmented control.
|
||||
2. Preserve the existing classification and grid views.
|
||||
3. Add a Dataset Status view that makes available/missing datasets very clear.
|
||||
4. Add Strategy and Position Evolution views with honest missing states if the
|
||||
backend does not yet expose enough data.
|
||||
5. Improve the desktop information hierarchy so the timing table feels more
|
||||
legible and intentional.
|
||||
6. Preserve the mobile table fix: active phone columns must fit the viewport.
|
||||
7. Add or update frontend tests.
|
||||
|
||||
## Guardrails
|
||||
|
||||
- Do not fake analytics data.
|
||||
- Do not fetch OpenF1 directly from React.
|
||||
- Do not start live timing React work.
|
||||
- Avoid card sludge and generic SaaS dashboard patterns.
|
||||
- Keep old Web UI behavior intact.
|
||||
- Make backend changes only if they are tiny API contract fixes.
|
||||
|
||||
## Verification
|
||||
|
||||
Run:
|
||||
|
||||
```bash
|
||||
cd frontend
|
||||
npm test -- --run
|
||||
npm run build
|
||||
cd ..
|
||||
go build -o /tmp/box-box ./cmd/main.go
|
||||
```
|
||||
|
||||
Visually check desktop and phone widths.
|
||||
|
||||
## Final Response
|
||||
|
||||
Report:
|
||||
|
||||
- views/components added;
|
||||
- API datasets used;
|
||||
- tests/build results;
|
||||
- desktop/mobile visual notes;
|
||||
- any backend data needed for real strategy/position charts.
|
||||
Reference in New Issue
Block a user