---
estimated_steps: 42
estimated_files: 2
skills_used: []
---

# T01: Sync CreatorDetailResponse interface and remove redundant fetchTechniques call

The frontend `CreatorDetailResponse` interface in `public-client.ts` is missing fields the backend already returns: `bio`, `social_links`, `featured`, `avatar_url`, `technique_count`, `techniques` (array of `CreatorTechniqueItem`), and `genre_breakdown`. The `CreatorDetail.tsx` page makes a separate `fetchTechniques()` call even though the detail endpoint already returns the techniques list. This task syncs the interface and simplifies the data fetching.

## Steps

1. Open `frontend/src/api/public-client.ts`. Find the `CreatorDetailResponse` interface (line ~177).
2. Add a new `CreatorTechniqueItem` interface above it:
   ```ts
   export interface CreatorTechniqueItem {
     title: string;
     slug: string;
     topic_category: string;
     created_at: string;
   }
   ```
3. Add the missing fields to `CreatorDetailResponse`:
   ```ts
   export interface CreatorDetailResponse {
     id: string;
     name: string;
     slug: string;
     genres: string[] | null;
     folder_name: string;
     view_count: number;
     created_at: string;
     updated_at: string;
     video_count: number;
     // New fields from backend CreatorDetail schema
     bio: string | null;
     social_links: Record<string, string> | null;
     featured: boolean;
     avatar_url: string | null;
     technique_count: number;
     techniques: CreatorTechniqueItem[];
     genre_breakdown: Record<string, number>;
   }
   ```
4. Open `frontend/src/pages/CreatorDetail.tsx`. Remove the `fetchTechniques` import and the separate `fetchTechniques()` call from the `useEffect`. The `techniques` state should be derived from `creator.techniques` instead. Remove the `techniques` useState — use `creator?.techniques ?? []` directly, or keep a derived variable.
5. Update the techniques count display to use `creator.technique_count` instead of `techniques.length` where applicable.
6. Run `cd frontend && npx tsc --noEmit` to verify zero type errors.

## Must-Haves

- [ ] `CreatorTechniqueItem` interface exported from public-client.ts
- [ ] `CreatorDetailResponse` includes bio, social_links, featured, avatar_url, technique_count, techniques, genre_breakdown
- [ ] Separate `fetchTechniques` call removed from CreatorDetail.tsx — techniques sourced from detail response
- [ ] TypeScript compiles with zero errors

## Inputs

- `frontend/src/api/public-client.ts`
- `frontend/src/pages/CreatorDetail.tsx`

## Expected Output

- `frontend/src/api/public-client.ts`
- `frontend/src/pages/CreatorDetail.tsx`

## Verification

cd frontend && npx tsc --noEmit
