Page: Creator Listing

Code: CRLS Route: /creators Access: Public Priority: P0 Test Script: scripts/page-tests/test-CRLS.sh Components: src/components/creators/CreatorBrowse.tsx

Purpose

Allow visitors to discover and browse course creators, building trust and enabling creator-first discovery.

Connections

Incoming (users arrive from)

Source	Trigger	Notes
HOME	"Meet Our Creators" link	From homepage
Nav	"Creators" nav link	Global navigation
CPRO	Back/breadcrumb	Return from creator profile
(External)	Direct URL	/creators

Outgoing (users navigate to)

Target	Trigger	Notes
CPRO	Creator card click	View creator profile
CDET	Course link on creator card	Direct to course (if shown)

Data Requirements

Entity	Fields Used	Purpose
users (creators)	`id, name, handle, avatar, title, bio_short`	Creator cards
user_expertise	`tag`	Expertise tags on cards
user_stats	`students_taught, courses_created, average_rating`	Stats display
courses	`count per creator`	Course count badge

Sections

Header

• Page title: "Our Creators" or "Meet the Experts"
• Subtitle: Brief explanation of creator role

Search

• Search by name or expertise
• Placeholder: "Search by name or expertise..."

Filter Options

• Expertise Area: Tag-based filtering
• Sort: Most Students, Highest Rated, Newest, A-Z

Creator Grid

• Responsive grid: 3 columns desktop, 2 tablet, 1 mobile
• Creator card:
• - Avatar (large, circular)
• - Name
• - Title
• - Short bio (truncated)
• - Expertise tags (top 3)
• - Stats row: X students, Y courses, Z rating
• - "View Profile" link → CPRO

Pagination

• Show 12-24 creators per page
• Page numbers or load more

Empty State

• No creators match search/filter
• "Try a different search term"

User Stories Fulfilled

• US-S004
• US-G008

States & Variations

State	Description
Default	All creators, sorted by popularity
Filtered	Active expertise filter
Search Results	Searching by name/expertise
Empty	No results, show empty state

Mobile Considerations

• Single column cards
• Search sticky at top
• Filters in collapsible section

Error Handling

Error	Display
Load fails	"Unable to load creators. Please try again."
No results	Empty state with suggestion

Analytics Events

Event	Trigger	Data
`page_view`	Page load	filters, search_query
`search`	Search submitted	query
`creator_click`	Creator card clicked	creator_id, position

Planned API Calls

Endpoint	When	Purpose
`GET /api/creators`	Page load	Creator list with stats

Notes

• Responsive grid layout
• Filters by expertise tags from user_expertise table
• Genesis Cohort: Only 3 creators initially (per CD-008)
• May want to highlight "Featured Creator" or sort by activity

Features

Search & Discovery

✓
Search by name or expertise [US-S004]
✓
Expertise filter (tag-based) [US-S004]
✓
Sort options (Most Students, Highest Rated, Newest, A-Z) [US-G008]

Display

✓
Creator cards grid (responsive: 3 → 2 → 1 columns) [US-G008]
✓
Avatar (large, circular) [US-G008]
✓
Name and title [US-G008]
✓
Short bio (truncated) [US-G008]
✓
Expertise tags (top 3) [US-S004]
✓
Stats row: students, courses, rating [US-G008]
✓
"View Profile" link → CPRO [US-G008]

States

✓
Empty state (no results) [US-G008]
✓
Pagination [US-G008] Not visible with current creator count (<12)

Interactive Elements

Buttons: 16/16 active Links: 4/4 active

Buttons

Element	Component	Action	Status
Search input	`CreatorBrowse`	Filters by name/title/expertise	active
Sort dropdown	`CreatorBrowse`	Changes sort (students, rating, courses, A-Z)	active
"All" button	`CreatorBrowse`	Clears expertise filter	active
Tag buttons (dynamic)	`CreatorBrowse`	Filters to selected expertise	active
"Clear filters" link	`CreatorBrowse`	Resets all filters	active
"Clear filters" button (empty state)	`CreatorBrowse`	Resets all filters	active

Links

Creator Cards

Element	Target	Status
Creator card (entire card)	`/creators/{handle}`	active

CTA Banner

Element	Target	Status
"Learn More" button	`/for-creators`	active

Target Pages Status

Target	Page Code	Status
`/creators/{handle}`	CPRO	Implemented
`/for-creators`	FCRE	PageSpecView
`/`	HOME	Implemented

Verification Notes

Verified: 2026-01-07 Consolidated: 2026-01-08

Verified Components

✓ src/components/creators/CreatorBrowse.tsx
✓ src/components/creators/CreatorCard.tsx
✓ src/pages/creators/index.astro

Screenshots

📷 CRLS-2026-01-07-06-07-17.png - Creator listing with filter pills

Notes

• All filtering works client-side (no server round-trips)
• Expertise tags dynamically extracted from creator data
• "Become a Creator" CTA banner at bottom
• Pagination not visible (Genesis Cohort has <12 creators)
• Creator cards show top 3 tags with "+N" overflow indicator

Test Coverage

Component ✓ Page ○ SSR ○ API 0/0 ✓ Ready

Script: scripts/page-tests/test-CRLS.sh

Page Test: tests/pages/creators/index.test.tsx ○

Component Test: tests/pages/creators/CreatorBrowse.test.tsx ✓

Discrepancies (Spec vs Implementation)

As of 2026-01-08

Planned but Not Implemented

Feature	Original Spec	Status	Priority
Analytics events	3 events (page_view, search, creator_click)	Not implemented	Low

Implemented Differently

Feature	Original Spec	Reality	Note
Pagination visibility	Show 12-24 creators per page	Pagination exists but not visible (only ~3 creators in Genesis Cohort)	Will become visible when more creators added

Meet Our Creators

Learn from industry experts who are passionate about teaching. Our creators design courses and certify Student-Teachers to deliver personalized 1-on-1 learning.