Page: Course Detail
Code: CDET Route:
/courses/[slug] Access: Public Priority: P0 Status: In Scope 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 (inline or 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
- • **Left/Top:**
- • **Right/Bottom:**
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
- • For each module:
- • Video/reading counts if available
Meet Your Student-Teachers
- • Grid of ST cards:
- • Only shows if course has certified STs
About the Creator
- • Creator card (larger):
Reviews/Testimonials
- • Featured testimonials
- • Average rating display
- • Source: course_testimonials
PeerLoop Features
- • Highlight peer teaching model:
- • Source: peerloop_features
Related Courses (Optional for MVP)
- • 3-4 related course cards
- • Based on category or tags
User Stories Fulfilled
- • US-G006: View full course details before signup
- • US-G007: See course price and what's included
- • US-S005: Review curriculum before enrolling
- • US-S059: See learning objectives
- • US-S060: See what's included
- • US-S061: See available Student-Teachers
- • US-S083: See course price equals ST session price (per CD-033)
- • US-S084: Access ST calendar during enrollment
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" |
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 |
Notes
- • 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
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'm 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