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 |