mirror of
https://github.com/AmanTahiliani/box-box.git
synced 2026-08-07 19:56:18 -04:00
77 lines
2.0 KiB
Markdown
77 lines
2.0 KiB
Markdown
|
# 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.
|