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

New

Intro to n8n

Master workflow automation and connect your apps - no coding required

4.7(19 reviews)

38 students

beginner

Guy Rymberg

AI & Automation Expert

Intro to n8n

$249

Live 1-on-1 sessions

2 live sessions (3 hours)

Lifetime access to materials

Certificate of Completion

Learn to automate your business processes with n8n, the powerful open-source workflow automation platform. Connect your apps, automate repetitive tasks, and build complex workflows using a visual, node-based interface - no coding required.

What You'll Learn

Understand the fundamentals of workflow automation

Set up and navigate the n8n interface

Connect popular apps and services

Build multi-step automated workflows

Handle errors and edge cases in your automations

Curriculum

Automation Fundamentals

Understand triggers, actions, and workflow logic.

20 min

Navigating n8n

Learn n8n interface and core concepts.

25 min

Your First Workflow

Build a simple but useful automation.

25 min

Connecting Apps

Learn to connect and authenticate with popular services.

20 min

Prerequisites

Required

Basic computer skills

Nice to Have

Familiarity with apps like Google Sheets, Slack, or email

Not Required

No coding experience needed

What Students Say

"My team used to spend 10 hours a week on manual data entry. After this course, I automated it all in n8n. Best investment I have made."
D
David R.
Operations Manager