# S01: Frontend Schema Sync + Hero Section — UAT

**Milestone:** M017
**Written:** 2026-04-03T08:53:14.207Z

# S01 UAT — Frontend Schema Sync + Hero Section

## Preconditions
- Frontend built and deployed (or running via `npm run dev`)
- At least one creator exists in the database with techniques
- Browser at desktop viewport (≥1024px)

---

## TC-01: Schema fields consumed — bio renders when present
1. Navigate to a creator detail page for a creator with a bio set (e.g., via API or DB seed)
2. **Expected:** Bio paragraph visible below the creator name in the hero section
3. **Expected:** Bio text uses secondary color, max-width 48rem, comfortable line-height

## TC-02: Schema fields consumed — bio hidden when null
1. Navigate to a creator detail page for a creator with no bio (bio is null)
2. **Expected:** No empty paragraph or whitespace gap where bio would be — hero shows name then genre pills directly

## TC-03: Avatar displays at 96px using avatar_url
1. Navigate to any creator detail page
2. **Expected:** Avatar is 96px in the hero section
3. If `avatar_url` is set, the avatar image loads from that URL
4. If `avatar_url` is null, the fallback initial-based avatar renders at 96px

## TC-04: Genre pills display
1. Navigate to a creator with genres assigned (e.g., ["Drum & Bass", "Sound Design"])
2. **Expected:** Genre pills appear below the name/bio using the `.pill` class styling
3. **Expected:** Pills are flex-wrapped if many genres

## TC-05: Genre pills hidden when empty
1. Navigate to a creator with no genres (genres is null or empty array)
2. **Expected:** No genre pill section rendered — no empty container or gap

## TC-06: Stats bar separated from hero
1. Navigate to any creator detail page
2. **Expected:** Stats bar (video count, technique count, topic breakdown pills) is below the hero section, separated by a border or spacing
3. **Expected:** Stats are NOT inside the hero section

## TC-07: Technique count from backend
1. Navigate to a creator detail page
2. **Expected:** Technique count displayed matches `technique_count` from the API response (not client-side array length)

## TC-08: No redundant fetchTechniques call
1. Open browser DevTools Network tab, navigate to a creator detail page
2. **Expected:** Only one API call to `/api/v1/creators/{slug}` — no separate call to fetch techniques
3. **Expected:** Techniques list renders from the detail response

## TC-09: Responsive — mobile stacking
1. Resize viewport to 375px width (or use device emulation)
2. Navigate to a creator detail page
3. **Expected:** Hero stacks vertically — avatar centered above name/bio/pills
4. **Expected:** No horizontal overflow

## TC-10: Production build clean
1. Run `cd frontend && npm run build`
2. **Expected:** Build succeeds with zero errors and zero warnings
