---
estimated_steps: 48
estimated_files: 5
skills_used: []
---

# T04: Build frontend browse pages (creators, topics) and verify full build

## Description

Build the remaining browse pages: CreatorsBrowse (R007, R014 creator equity with randomized default sort), CreatorDetail, and TopicsBrowse (R008 two-level hierarchy). Then run final verification to confirm the full frontend builds cleanly and all requirements are covered.

## Steps

1. Create `frontend/src/pages/CreatorsBrowse.tsx` — creators browse page (R007, R014):
   - Fetch creators from `/api/v1/creators?sort=random` (default) via `fetchCreators()`
   - Genre filter pills at top (fetch unique genres from creator data, or hardcode from canonical_tags.yaml genres)
   - Type-to-narrow input that filters displayed creators client-side by name
   - Sort toggle: Random (default), Alphabetical, Views — each triggers re-fetch with `sort=random|alpha|views`
   - Each creator row: name, genre tags (pills), technique_count, video_count, view_count
   - Click row → navigate to `/creators/{slug}`
   - All creators get equal visual weight (no featured/highlighted creators) per R014

2. Create `frontend/src/pages/CreatorDetail.tsx` — creator detail page:
   - Fetch creator by slug via `fetchCreator(slug)` — shows name, genres, video_count, technique_count
   - Fetch creator's technique pages via `fetchTechniques({ creator_slug: slug })`
   - List technique pages with title (linked to `/techniques/{slug}`), category, tags, summary
   - Loading state and 404 error state

3. Create `frontend/src/pages/TopicsBrowse.tsx` — topics browse page (R008):
   - Fetch topics from `/api/v1/topics` via `fetchTopics()`
   - Two-level hierarchy: 6 top-level categories (Sound design, Mixing, Synthesis, Arrangement, Workflow, Mastering)
   - Each category expandable/collapsible, showing sub-topics
   - Each sub-topic shows technique_count and creator_count
   - Click sub-topic → navigate to `/search?q={sub_topic_name}&scope=topics` or filter technique list
   - Filter input at top to narrow categories/sub-topics

4. Update `frontend/src/App.tsx` — add routes for browse pages:
   - `/creators` → CreatorsBrowse
   - `/creators/:slug` → CreatorDetail
   - `/topics` → TopicsBrowse
   - Import new page components

5. Add CSS to `frontend/src/App.css` for browse pages:
   - Creator list styles (rows, genre pills, counts)
   - Creator detail page layout
   - Topics hierarchy styles (collapsible sections, sub-topic rows, counts)
   - Filter input styles
   - Sort toggle button group

6. Final verification:
   - `cd frontend && npx tsc -b` — zero errors
   - `cd frontend && npm run build` — clean build
   - Verify all 6 page files exist

## Must-Haves

- [ ] Creators browse page with randomized default sort (R014), genre filter, type-to-narrow, sort toggle (R007)
- [ ] Creator detail page showing creator info and their technique pages
- [ ] Topics browse page with two-level hierarchy, counts, clickable sub-topics (R008)
- [ ] All routes registered in App.tsx
- [ ] `cd frontend && npx tsc -b` passes with zero errors
- [ ] `cd frontend && npm run build` succeeds

## Verification

- `cd frontend && npx tsc -b && npm run build && echo 'Build OK'`
- `test -f frontend/src/pages/CreatorsBrowse.tsx && test -f frontend/src/pages/CreatorDetail.tsx && test -f frontend/src/pages/TopicsBrowse.tsx && echo 'All pages exist'`

## Inputs

- ``frontend/src/api/public-client.ts` — typed API client with fetchCreators, fetchCreator, fetchTopics, fetchTechniques`
- ``frontend/src/App.tsx` — routing structure from T03 to extend with browse routes`
- ``frontend/src/App.css` — styles from T03 to extend with browse page styles`
- ``frontend/src/pages/Home.tsx` — reference for component patterns established in T03`
- ``config/canonical_tags.yaml` — genre list for creator filter pills (Bass music, Drum & bass, etc.)`

## Expected Output

- ``frontend/src/pages/CreatorsBrowse.tsx` — creators browse page with randomized sort, genre filter, type-to-narrow`
- ``frontend/src/pages/CreatorDetail.tsx` — creator detail page with technique page list`
- ``frontend/src/pages/TopicsBrowse.tsx` — two-level topic hierarchy with counts`
- ``frontend/src/App.tsx` — all 9 routes registered (3 public + 3 browse + 2 admin + fallback)`
- ``frontend/src/App.css` — complete CSS for all S05 pages`

## Verification

cd frontend && npx tsc -b && npm run build && test -f src/pages/CreatorsBrowse.tsx && test -f src/pages/CreatorDetail.tsx && test -f src/pages/TopicsBrowse.tsx && echo 'All browse pages built OK'
