Page: Course Browse
Code: CBRO Route:
/courses Access: Public Priority: P0 Status: In Scope Purpose
Allow visitors and users to discover courses through browsing, filtering, and searching.
Connections
Incoming (users arrive from)
| Source | Trigger | Notes |
|---|---|---|
| HOME | "Browse Courses" CTA | Primary path |
| HOME | "View All Courses" link | From featured section |
| CDET | Back/breadcrumb | Return from course detail |
| CPRO | "View Courses" on creator profile | Filtered by creator |
| Nav | "Courses" nav link | Global navigation |
| (External) | Direct URL, search | `/courses` or `/courses?q=...` |
Outgoing (users navigate to)
Data Requirements
| Entity | Fields Used | Purpose |
|---|---|---|
| courses | id, title, slug, thumbnail, price, rating, rating_count, level, duration, badge, student_count | Course cards |
| categories | id, name, slug | Filter options |
| course_tags | tag | Filter/search |
| users (creators) | id, name, avatar | Creator info on cards |
Sections
Header
- • Page title: "Browse Courses" or "Courses"
- • Search bar with placeholder text
Filters Sidebar/Bar
- • **Category:** Dropdown or checkbox list (15 categories from CD-021)
- • **Level:** Beginner, Intermediate, Advanced
- • **Price Range:** Slider or preset ranges (Free, $1-100, $100-500, $500+)
- • **Duration:** Short (<4 weeks), Medium (4-8 weeks), Long (8+ weeks)
- • Clear filters button
- • Active filter pills
Sort Options
- • Relevance (default for search)
- • Newest
- • Most Popular (student_count)
- • Highest Rated
- • Price: Low to High
- • Price: High to Low
Course Grid
- • Responsive grid: 3 columns desktop, 2 tablet, 1 mobile
- • Course card components (see COMPONENTS.md):
Pagination/Load More
- • Pagination or infinite scroll
- • Results count: "Showing 1-12 of 48 courses"
Empty State
- • No courses match filters
- • Suggestion to clear filters or browse all
User Stories Fulfilled
- • US-G005: Browse available courses without login
- • US-S001: Find courses by category
- • US-S003: Filter courses by criteria
- • US-S057: Filter by difficulty level
- • US-S058: Filter by category
States & Variations
| State | Description |
|---|---|
| Default | All courses, no filters |
| Filtered | Active filters applied, filter pills shown |
| Search Results | Query in search bar, results sorted by relevance |
| Empty Results | No courses match, show empty state |
| Loading | Skeleton cards while fetching |
| Creator Filtered | Arrived from CPRO, pre-filtered by creator |
Mobile Considerations
- • Filters collapse into modal/drawer (tap "Filters" button)
- • Single column course cards
- • Sticky search bar at top
- • Sort dropdown accessible
Error Handling
| Error | Display |
|---|---|
| Search/filter fails | "Unable to load courses. Please try again." + retry button |
| No results | Empty state with clear filters suggestion |
Analytics Events
| Event | Trigger | Data |
|---|---|---|
`page_view` | Page load | filters_applied, search_query |
`search` | Search submitted | query, results_count |
`filter_applied` | Filter changed | filter_type, filter_value |
`course_card_click` | Course clicked | course_id, position, filters_active |
`sort_changed` | Sort option changed | sort_option |
API Calls
| Endpoint | When | Purpose |
|---|---|---|
`GET /api/courses` | Page load | Course list with pagination |
`GET /api/courses?q=...&level=...&category=...` | Filter/search | Filtered results |
`GET /api/categories` | Page load | Filter options |
Notes
- • Genesis Cohort: Only 4 courses initially, consider hiding some filters
- • URL should reflect filters for shareability: `/courses?level=beginner&category=ai`
- • Consider saved filters for logged-in users (future)
Browse Courses
Discover courses taught by expert creators with 1-on-1 guidance.
4 courses
AI Tools Overview
AI Tools Overview
Navigate the AI landscape with confidence - choose the right tools without the overwhelm
4.9(34)
67 students
2 sessions3 hoursbeginner
$249
Intro to Claude Code
Intro to Claude Code
Master AI-powered coding in the terminal - no coding experience required
4.8(28)
52 students
2 sessions3 hoursbeginner
$249
Intro to n8n
Intro to n8n
Master workflow automation and connect your apps - no coding required
4.7(19)
38 students
2 sessions3 hoursbeginner
$249
Vibe Coding 101
Vibe Coding 101
Build and deploy real websites with AI - from idea to production
4.9(8)
15 students
2 sessions3 hoursintermediate
$249