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

# T02: Create SubTopicPage component, wire route and API client, update TopicsBrowse links

Create the SubTopicPage React component at frontend/src/pages/SubTopicPage.tsx following the CreatorDetail pattern. Add fetchSubTopicTechniques function to public-client.ts that calls GET /topics/{category}/{subtopic}. Register route /topics/:category/:subtopic in App.tsx (before the /topics catch-all). Update TopicsBrowse.tsx sub-topic links from /search?q=... to /topics/{cat}/{subtopic}. Add CSS for breadcrumbs and creator-grouped layout to App.css.

SubTopicPage must:
- Extract category and subtopic from URL params
- Fetch techniques via the new API client function
- Group techniques by creator_name and render sections per creator
- Show breadcrumbs: Topics > {Category Name} > {Sub-topic Name} (Topics links to /topics, category name is non-link text, sub-topic is current page)
- Handle loading, error, and empty states
- Each technique links to /techniques/{slug}

Slug-to-display-name conversion: replace hyphens with spaces, title-case. E.g. 'sound-design' → 'Sound Design', 'hi-hat' → 'Hi Hat'.

## Inputs

- ``backend/routers/topics.py` — the new subtopic endpoint from T01 (contract: GET /topics/{cat}/{subtopic} returns PaginatedResponse with TechniquePageRead items)`
- ``frontend/src/api/public-client.ts` — existing API client with fetchTopics, fetchTechniques, TechniqueListItem, TechniqueListResponse types`
- ``frontend/src/pages/CreatorDetail.tsx` — reference pattern for detail page structure (fetch, loading/error/404 states)`
- ``frontend/src/pages/TopicsBrowse.tsx` — sub-topic links to update from /search?q=... to /topics/{cat}/{subtopic}`
- ``frontend/src/App.tsx` — route registration (add before /topics catch-all)`
- ``frontend/src/App.css` — existing styles including .topic-card and .creator-detail patterns`

## Expected Output

- ``frontend/src/pages/SubTopicPage.tsx` — new page component with breadcrumbs and creator-grouped technique list`
- ``frontend/src/api/public-client.ts` — new fetchSubTopicTechniques function added`
- ``frontend/src/App.tsx` — new route /topics/:category/:subtopic registered`
- ``frontend/src/pages/TopicsBrowse.tsx` — sub-topic links updated to /topics/{cat}/{subtopic}`
- ``frontend/src/App.css` — breadcrumb and sub-topic page styles added`

## Verification

cd frontend && npx tsc --noEmit && npm run build
