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
Vibe Coding 101
Build and deploy real websites with AI - from idea to production
4.9(8 reviews)
15 students
intermediateGuy Rymberg
AI & Automation Expert
Vibe Coding 101
$249
Live 1-on-1 sessions
2 live sessions (3 hours)
Lifetime access to materials
Certificate of Completion
Learn the emerging art of vibe coding - using AI tools to build real, deployable web projects without traditional programming knowledge. Go from idea to live website using Claude Code, GitHub, and modern deployment platforms.
What You'll Learn
Understand the vibe coding philosophy and approach
Set up a complete development environment with AI tools
Build a real web project from scratch using AI assistance
Deploy your project to a live URL
Maintain and iterate on AI-built projects
Curriculum
The Vibe Coding Philosophy
Understand the mindset and approach of AI-assisted development.
Project Setup
Set up your development environment and project structure.
Building with AI
Start building your project using AI assistance.
GitHub Basics
Version control fundamentals for your projects.
Prerequisites
Required
- Completion of Intro to Claude Code (or equivalent experience)
- GitHub account
Nice to Have
- Basic understanding of HTML/CSS concepts
What Students Say
"Finally deployed my first real website! The step-by-step process made it feel achievable. I am now building a second site for a client."
The PeerLoop Difference
Learn differently with our peer-to-peer teaching model
1-on-1 Sessions
Personal attention from a certified Student-Teacher who recently mastered this material
Earn While You Learn
Complete the course, get certified, and earn 70% commission teaching others
Get Certified
Become a certified Student-Teacher and join our teaching community
What's Included
- 2 live 1-on-1 sessions (90 min each)
- Lifetime access to course materials
- Project templates and starters
- Deployment guides for multiple platforms
- Certificate of completion
Who This Is For
- Graduates of Intro to Claude Code (recommended)
- Anyone who wants to build real web projects with AI
- Entrepreneurs who need custom web tools
- Creatives who want to bring ideas to life
About the Creator
Guy Rymberg
AI & Automation Expert
AI enthusiast and entrepreneur helping people navigate the AI tool landscape strategically.
View full profile →Topics
Vibe CodingAI DevelopmentGitHubVercel DeploymentWeb Development