Page: Creator Profile

Code: CPRO Route: /creators/:handle Access: Public Priority: P0 Test Script: scripts/page-tests/test-CPRO.sh Components: src/components/creators/CreatorProfile.tsxsrc/components/context-actions/index.ts

Purpose

Display comprehensive creator information including qualifications, expertise, courses, and teaching philosophy to build trust and drive course enrollment.

Connections

Incoming (users arrive from)

Source	Trigger	Notes
CRLS	Creator card click	From creator listing
CDET	Creator name/avatar click	From course detail
CBRO	Creator name on course card	From browse results
SDSH	Creator link on enrolled course	Student viewing creator
IFED	Creator header/link	From instructor feed
(External)	Direct URL, shared link	/@brian or /creators/brian

Outgoing (users navigate to)

Target	Trigger	Notes
CDET	Course card click	View specific course
CBRO	"View All Courses"	Filtered by this creator
IFED	"View Feed" (if enrolled in any course)	Access-controlled
SGUP	Follow button (logged out)	Redirect to signup

Data Requirements

Entity	Fields Used	Purpose
users	`id, name, handle, avatar, title, bio, website, teaching_philosophy`	Profile display
user_qualifications	`sentence, display_order`	Credentials section
user_expertise	`tag`	Expertise tags
user_stats	`students_taught, courses_created, average_rating, total_reviews`	Stats bar
courses	`id, title, slug, thumbnail, price, rating, level`	Courses list
follows	`count where followed_id = creator`	Follower count
instructor_followers	`exists check`	Access to IFED

Sections

Profile Header

• Avatar: Large circular image
• Name: Display name
• Handle: @handle
• Title: Professional title
• Follow button: Follows creator (logged in) or prompts signup
• Website link: External link icon

Stats Bar

• Students taught
• Courses created
• Average rating (stars + number)
• Total reviews

Bio Section

• Full biography text
• Expandable if long

Teaching Philosophy (if present)

• Quote-styled or highlighted section
• Source: users.teaching_philosophy

Qualifications

• Credential list with icons
• Source: user_qualifications

Expertise

• Tag pills
• Source: user_expertise

Courses by [Creator Name]

• Grid of course cards (same as CBRO)
• Show all courses by this creator
• "View All" if more than 3 → CBRO?creator=handle

User Stories Fulfilled

• US-G008
• US-G010
• US-C008
• US-C009
• US-C036

States & Variations

State	Description
Visitor	Public view, follow prompts signup
Logged In (Not Following)	Follow button active
Logged In (Following)	"Following" state, unfollow option
Enrolled in Creator's Course	"View Feed" link visible (→ IFED)
Own Profile (Creator viewing self)	"Edit Profile" link → PROF

Mobile Considerations

• Header stacks vertically
• Stats become 2x2 grid
• Course cards single column
• Sticky "Follow" button at bottom

Error Handling

Error	Display
Creator not found	404 with "Creator not found"
Profile private	"This profile is private" (shouldn't happen for creators)

Analytics Events

Event	Trigger	Data
`page_view`	Page load	creator_id, source
`follow_click`	Follow clicked	creator_id
`course_click`	Course card clicked	course_id
`website_click`	External link clicked	creator_id

Planned API Calls

Endpoint	When	Purpose
`GET /api/creators/:handle`	Page load	Creator profile data

Notes

• SSR with dynamic route parameter
• Courses fetched from /api/creators/:id/courses
• CD-017: Creator profiles are a key trust signal ($8K-11K estimate)
• Consider verification badge for vetted creators (future)
• SEO: Creator pages should be indexable

Features

Profile Header

✓
Avatar (large, circular) [US-G008]
✓
Name and handle (@handle) [US-G008]
✓
Title (professional title) [US-G008]
✓
Follow button [US-G008] UI only - backend not connected
○
Follower count [US-G008] Not shown
✓
Website link (external icon) [US-G008]

Stats Bar

✓
Students taught [US-G008]
✓
Courses created [US-G008]
✓
Average rating (stars + number) [US-G008]
✓
Total reviews [US-G008]

Content Sections

✓
Bio section (full biography) [US-G008]
✓
Teaching philosophy (quote-styled) [US-G010]
✓
Qualifications (credential list with icons) [US-G010]
✓
Expertise tags (pills) [US-C009, US-C036]

Courses Section

✓
Grid of course cards by this creator [US-C008]
✓
"View All" link if more than 3 → CBRO?creator=handle [US-C008] Shows at >3, not >6 as originally spec'd

Interactive Elements

Buttons: 0/1 active Links: 8/8 active

Buttons

Element	Component	Action	Status
Follow	`CreatorProfile`	UI only - not connected to backend	placeholder

Links

Breadcrumb

Element	Target	Status
Home	`/`	active
Creators	`/creators`	active

Header Actions

Element	Target	Status
Website button	`{creator.website} (external)`	active

Courses Section

Element	Target	Status
"View all →"	`/courses?creator={handle}`	active
Course cards	`/courses/{slug}`	active

Not Found State

Element	Target	Status
"← Back to creators"	`/creators`	active

Target Pages Status

Target	Page Code	Status
`/`	HOME	Implemented
`/creators`	CRLS	Implemented
`/courses`	CBRO	Implemented
`/courses/{slug}`	CDET	Implemented

Verification Notes

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

Verified Components

✓ src/components/creators/CreatorProfile.tsx
✓ src/components/courses/CourseCard.tsx
✓ src/pages/creators/[handle].astro

Screenshots

📷 CPRO-2026-01-07-06-03-55.png - Full creator profile page

Notes

• All display sections working correctly
• Follow button renders but is not connected to backend
• Follower count not displayed (backend not ready)
• At a Glance sidebar card duplicates header stats (acceptable)
• View all link shows when >3 courses (not >6 as spec said)

Test Coverage

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

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

Page Test: tests/pages/creators/[handle].test.tsx ○

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

Discrepancies (Spec vs Implementation)

As of 2026-01-08

Planned but Not Implemented

Feature	Original Spec	Status	Priority
Follower count	Display "X followers" in profile header	Deferred	Low
Follow API endpoints	POST /api/follows, DELETE /api/follows/:id, GET /api/users/me/follows/:creator_id	Deferred	Medium
Analytics events	4 events (page_view, follow_click, course_click, website_click)	Not implemented	Low

Implemented Differently

Feature	Original Spec	Reality	Note
Follow button	Fully functional follow/unfollow	UI renders but backend not connected	Placeholder until follow backend is ready
View All courses threshold	Show "View All" if more than 6 courses	Shows at >3 courses	Acceptable - earlier visibility