---
estimated_steps: 28
estimated_files: 3
skills_used: []
---

# T02: Add homepage stats scorecard section with live counts from /api/v1/stats

Wire up the frontend to fetch stats from the new endpoint and render a scorecard section on the homepage matching the dark/cyan design.

## Steps

1. Edit `frontend/src/api/public-client.ts`:
   - Add `StatsResponse` interface: `{ technique_count: number; creator_count: number }`
   - Add `fetchStats()` function: `return request<StatsResponse>(\`${BASE}/stats\`)` — follows the exact pattern of `fetchTopics()` at line 311.
2. Edit `frontend/src/pages/Home.tsx`:
   - Import `fetchStats` and `StatsResponse` (if exported as type) from `public-client`
   - Add state: `const [stats, setStats] = useState<{technique_count: number; creator_count: number} | null>(null)`
   - Add a `useEffect` (with cancellation flag pattern matching existing effects in the file) that calls `fetchStats()` and sets state.
   - Render a `<section className="home-stats">` between the nav-cards section (ends ~line 177) and the random technique button (starts ~line 180). Show two metric items: technique count labeled "Articles" and creator count labeled "Creators". Use `card-stagger` animation class. Only render when stats is non-null.
3. Edit `frontend/src/App.css`:
   - Add `.home-stats` section styles: centered flex row, gap, subtle background using `var(--surface-1)`, border using `var(--border)`.
   - `.home-stats__metric`: large font for the number (use `var(--accent)` cyan color), small label below in `var(--text-secondary)`.
   - Keep it subtle — communicating volume without being boastful per R034.
4. Verify `npm run build` compiles cleanly.
5. Rebuild and restart the web container on ub01:
   ```
   ssh ub01 'cd /vmPool/r/repos/xpltdco/chrysopedia && git pull && docker compose build chrysopedia-web-8096 && docker compose up -d chrysopedia-web-8096'
   ```
6. Verify the homepage at http://ub01:8096 shows the scorecard with real counts.

## Must-Haves

- [ ] `fetchStats()` function in public-client.ts
- [ ] Homepage renders scorecard section with technique count and creator count
- [ ] Scorecard uses existing CSS custom properties (--accent, --surface-1, --border, --text-secondary)
- [ ] `npm run build` succeeds

## Verification

- `cd frontend && npm run build` exits 0
- Homepage at http://ub01:8096 displays scorecard with two metrics showing numbers > 0

## Inputs

- ``backend/routers/stats.py` — stats endpoint created in T01`
- ``frontend/src/api/public-client.ts` — existing fetch pattern to follow`
- ``frontend/src/pages/Home.tsx` — homepage component to add scorecard section`
- ``frontend/src/App.css` — stylesheet for scorecard styles`

## Expected Output

- ``frontend/src/api/public-client.ts` — StatsResponse interface and fetchStats() added`
- ``frontend/src/pages/Home.tsx` — stats scorecard section rendered between nav-cards and random button`
- ``frontend/src/App.css` — .home-stats section styles added`

## Verification

cd frontend && npm run build
