box-box/documentations/refactor/claude-phase-5-react-race-hub-prompt.md

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:

  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:

   /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:

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.