Page: Course Detail

Code: CDET Route: /courses/:slug Access: Public Priority: P0 Test Script: scripts/page-tests/test-CDET.sh Components: src/components/courses/CourseDetail.tsxsrc/components/context-actions/index.ts

Purpose

Display comprehensive course information to help visitors make enrollment decisions, and provide enrolled students with course access.

Connections

Incoming (users arrive from)

Source	Trigger	Notes
CBRO	Course card click	Primary discovery path
HOME	Featured course click	From homepage
CPRO	Course card in creator's courses	From creator profile
SDSH	"Continue Learning" or course card	Enrolled student returning
IFED	Course mention/link	From instructor feed
(External)	Direct URL, search, marketing	Shareable course link

Outgoing (users navigate to)

Target	Trigger	Notes
SBOK	"Book a Session" / ST card click	Select ST and schedule
SGUP	"Enroll" (logged out)	Redirect to signup, return after
CCNT	"Start Learning" (enrolled)	Access course content
CPRO	Creator name/avatar click	View creator profile
STPR	ST name click in ST list	View ST profile
CBRO	Breadcrumb "Courses"	Back to browse
(Payment)	"Enroll Now" button	Payment flow (Stripe)

Data Requirements

Entity	Fields Used	Purpose
courses	`All fields`	Main course display
course_objectives	`objective, display_order`	"What You'll Learn" section
course_includes	`item, display_order`	"What's Included" section
course_curriculum	`title, description, duration, session_number`	Curriculum display
course_prerequisites	`type, content`	Prerequisites section
course_target_audience	`description`	"Who This Is For" section
course_testimonials	`quote, student_name, student_role`	Social proof
student_teachers	`user_id, students_taught, certified_date`	ST listing
users (creator)	`name, avatar, title, bio`	Creator card
users (STs)	`name, avatar`	ST cards
enrollments	`status`	Check if current user enrolled
peerloop_features	`all`	PeerLoop-specific features display

Sections

Breadcrumb

• Home > Courses > [Category] > [Course Title]

Hero Section

• Course thumbnail (large) with badge overlay
• Title and tagline
• Creator info (avatar, name, link to CPRO)
• Rating stars + review count
• Level badge, Duration, Format
• Price (prominent)
• Primary CTA: "Enroll Now" or "Start Learning" (if enrolled)

What You'll Learn

• Checkmark list of learning objectives
• Source: course_objectives

What's Included

• Icon list of included items
• Source: course_includes

Who This Is For

• Target audience descriptions
• Source: course_target_audience

Prerequisites

• Grouped by type: Required, Nice to Have, Not Required
• Source: course_prerequisites

Curriculum

• Expandable/collapsible module list
• Title, duration per module
• Description (collapsed by default)
• Session number grouping if applicable

Meet Your Student-Teachers

• Grid of ST cards: Avatar, name, Students taught count, Certified date
• "Book with [Name]" CTA → SBOK (pre-selected)
• Only shows if course has certified STs

About the Creator

• Creator card: Avatar, name, title, Short bio
• "View Full Profile" → CPRO

Reviews/Testimonials

• Featured testimonials
• Average rating display
• Source: course_testimonials

PeerLoop Features

• 1-on-1 teaching sessions
• Earn while you learn
• Become a certified teacher

Related Courses

• 3-4 related course cards
• Based on category or tags

User Stories Fulfilled

• US-G006
• US-G007
• US-S005
• US-S059
• US-S060
• US-S061
• US-S083
• US-S084

States & Variations

State	Description
Visitor	Full info, "Enroll" CTA leads to signup
Logged In (Not Enrolled)	"Enroll" CTA leads to payment
Enrolled	"Start Learning" CTA, "Book Session" CTA prominent
Completed	"Review Course" option, teaching path highlighted

Mobile Considerations

• Hero becomes stacked (image, then content)
• Sticky "Enroll" button at bottom
• Curriculum sections accordion-style
• ST cards horizontal scroll

Error Handling

Error	Display
Course not found	404 page with search suggestion
Course inactive	"This course is no longer available"
STs unavailable	Hide ST section, show "Check back soon"
Payment fails	Stripe handles errors, return to course page

Analytics Events

Event	Trigger	Data
`page_view`	Page load	course_id, source
`enroll_click`	Enroll CTA clicked	course_id, user_logged_in
`st_selected`	ST card clicked	course_id, st_id
`creator_click`	Creator profile clicked	creator_id
`curriculum_expanded`	Module expanded	course_id, module_id

Planned API Calls

Endpoint	When	Purpose
`GET /api/courses/:slug`	Page load	Course data + enrollment status
`POST /api/checkout/session`	Enroll click	Create Stripe checkout
`GET /api/categories`	Page load	Breadcrumb navigation
`GET /api/courses?limit=4`	Page load	Related courses

Notes

• SSR for SEO, CSR overlay for personalization ("You're enrolled")
• EnrollButton component handles auth state and Stripe checkout
• CD-033: Price shown = price for ST sessions (unified pricing)
• CD-029: "Book Free Intro" for trust-building (no payment)
• SEO: Course pages are key for organic discovery
• Schema.org Course markup for rich snippets
• Stripe Checkout handles PCI compliance
• Webhook is source of truth for enrollment creation

Features

Hero Section

✓
Course thumbnail (large) with badge overlay [US-G006]
✓
Title and tagline [US-G006]
✓
Creator info (avatar, name, link to CPRO) [US-G006]
✓
Rating stars + review count [US-G006]
✓
Level badge, Duration, Format [US-G006]
✓
Price (prominent) [US-G007]
✓
Primary CTA: "Enroll Now" or "Start Learning" (if enrolled) [US-G007]
○
Secondary CTA: "Book Free Intro" (if available) [US-S084] Deferred to future phase

What You'll Learn

✓
Checkmark list of learning objectives [US-S059]

What's Included

✓
Icon list of included items [US-S060]

Who This Is For

✓
Target audience descriptions [US-G006]

Prerequisites

✓
Grouped by type: Required, Nice to Have, Not Required [US-S005]

Curriculum

✓
Expandable/collapsible module list (accordion) [US-S005]
✓
Module title and duration [US-S005]
✓
Description (collapsed by default) [US-S005]
✓
Session number grouping [US-S005]

Meet Your Student-Teachers

✓
Grid of ST cards with avatar, name, stats [US-S061]
✓
"Book with [Name]" CTA → SBOK [US-S061]
✓
Only shows if course has certified STs [US-S061]

About the Creator

✓
Creator card with avatar, name, title, bio [US-G006]
○
Qualifications (top 3) [US-G006] Deferred
○
Stats: courses created, students taught, rating [US-G006] Deferred
✓
"View Full Profile" → CPRO [US-G006]

Reviews/Testimonials

✓
Featured testimonials [US-G006]
✓
Average rating display [US-G006]

Related Courses

✓
3-4 related course cards [US-G006]

Enrollment

✓
Enroll button (Stripe integration) [US-G007]

Interactive Elements

Buttons: 5/5 active Links: 10/10 active

Buttons

Element	Component	Action	Status
Enroll Now	`EnrollButton`	Initiates Stripe checkout	active
Curriculum session toggle	`CourseDetail`	Expands/collapses session modules	active
Book with [ST Name]	`CourseDetail`	Links to /courses/{slug}/book?st={id}	active

Links

Breadcrumb

Element	Target	Status
Home	`/`	active
Courses	`/courses`	active
Category	`/courses?category={id}`	active

Hero Section

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

Sidebar

Element	Target	Status
Creator avatar/name	`/creators/{handle}`	active
"View full profile →"	`/creators/{handle}`	active

Student-Teachers Section

Element	Target	Status
"Book with [Name]" button	`/courses/{slug}/book?st={id}`	active

Related Courses

Element	Target	Status
Course cards	`/courses/{slug}`	active

Target Pages Status

Target	Page Code	Status
`/`	HOME	Implemented
`/courses`	CBRO	Implemented
`/creators/{handle}`	CPRO	Implemented
`/courses/{slug}/book`	SBOK	PageSpecView
`/courses/{slug}`	CDET	Implemented

Verification Notes

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

Verified Components

✓ src/components/courses/CourseDetail.tsx
✓ src/components/courses/EnrollButton.tsx
✓ src/components/courses/CourseCard.tsx
✓ src/pages/courses/[slug].astro

Screenshots

📷 CDET-2026-01-07-05-58-56.png - Full course detail page

Notes

• All major sections implemented and working
• ST section shows when course has student-teachers
• Curriculum accordion works with session grouping
• Enroll button integrates with Stripe checkout
• Creator qualifications/stats not shown (deferred)

Test Coverage

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

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

Page Test: tests/pages/courses/[slug].test.tsx ○

Component Test: tests/pages/courses/CourseDetail.test.tsx ✓

SSR Loader Test: tests/ssr/courses.test.ts → fetchCourseDetailData() ✓

Discrepancies (Spec vs Implementation)

As of 2026-01-08

Planned but Not Implemented

Feature	Original Spec	Status	Priority
Book Free Intro secondary CTA	"Book Free Intro" for trust-building (CD-029)	Deferred	Medium
Creator qualifications	Show top 3 qualifications on creator card	Deferred	Low
Creator stats	Stats: courses created, students taught, rating	Deferred	Low
Analytics events	5 events (page_view, enroll_click, st_selected, creator_click, curriculum_expanded)	Not implemented	Low

Popular

Intro to Claude Code

Master AI-powered coding in the terminal - no coding experience required

4.8(28 reviews)

52 students

beginner

Guy Rymberg

AI & Automation Expert

Intro to Claude Code

$249

Live 1-on-1 sessions

2 live sessions (3 hours)

Lifetime access to materials

Certificate of Completion

Learn to use Claude Code, the powerful AI coding assistant from Anthropic. Build real projects using natural language commands, understand how to structure requests for best results, and develop the skills to leverage AI for development tasks - even if you have never written code before.

What You'll Learn

Install and configure Claude Code on your computer

Understand the fundamentals of working with an AI coding assistant

Write effective prompts that get the results you want

Build a complete project from scratch using Claude Code

Debug and troubleshoot common issues

Curriculum

Setting Up Claude Code

Install Claude Code and configure your development environment.

25 min

Your First Claude Code Session

Learn the basics of interacting with Claude Code.

30 min

Effective Prompting

Master the art of writing prompts that get great results.

25 min

Mini Project: Personal Script

Build a useful automation script for yourself.

10 min

Prerequisites

Required

Mac or Linux computer (Windows WSL works too)
Comfort using the terminal/command line basics

Nice to Have

Claude Pro subscription (for extended usage)

Not Required

No prior coding experience needed

What Students Say

"I went from zero coding knowledge to building a real website in two sessions. Claude Code is magic, and Guy shows you exactly how to use it."
J
Jennifer K.
Small Business Owner