Page: Testimonials
/testimonials Access: Public Priority: P1 Test Script: scripts/page-tests/test-TSTM.sh Components: src/components/testimonials/index.ts Purpose
Display student testimonials with filtering by category and course to build trust and social proof.
Connections
Incoming (users arrive from)
| Source | Trigger | Notes |
|---|---|---|
| HOME | Footer "Testimonials" link | Footer navigation |
| Footer | "Testimonials" link | All pages |
| (External) | Direct URL | /testimonials |
Outgoing (users navigate to)
Data Requirements
| Entity | Fields Used | Purpose |
|---|---|---|
| course_testimonials | id, quote, student_name, student_role, is_featured, created_at, course_id | Testimonial display |
| courses | id, title, slug, category_id | Course reference |
| categories | id, name | Category filtering |
Sections
Hero
- • Title: "What Our Students Say"
- • Subtitle: "Real feedback from real learners on their Peerloop journey."
Stats Bar
- • Total testimonials
- • Courses reviewed
- • Average rating (4.8)
Featured Reviews
- • Top 3 featured testimonials
- • Hidden when filters active
Filters
- • Category radio buttons
- • Course radio buttons (filtered by category)
- • Active filter pills
Testimonials Grid
- • Responsive grid
- • Testimonial cards with quote, name, role, course link
CTA Banner
- • "Browse Courses" button
- • "Get Started" button
User Stories Fulfilled
- • US-G009
States & Variations
| State | Description |
|---|---|
| Default | All testimonials, featured first |
| Filtered by category | Shows only selected category |
| Filtered by course | Shows only selected course |
| Empty | No testimonials match filter |
| Paginated | Multiple pages of results |
Mobile Considerations
- • Filter drawer instead of sidebar
- • Single column grid
- • Full-width filter button
Error Handling
| Error | Display |
|---|---|
| No testimonials | Empty state with "Clear all filters" button |
| API error | Shows empty state |
Analytics Events
| Event | Trigger | Data |
|---|---|---|
page_view | Page load | - |
filter_change | Filter changed | filter_type, value |
testimonial_view | Card in viewport | testimonial_id |
cta_click | CTA button clicked | button_type |
course_click | Course link clicked | course_id |
Planned API Calls
| Endpoint | When | Purpose |
|---|---|---|
GET /api/testimonials?featured=false&limit=50 | Page load (SSR) | All testimonials |
GET /api/categories | Page load (SSR) | Category filter options |
GET /api/courses?limit=50 | Page load (SSR) | Course filter options |
Notes
- • Data from course_testimonials D1 table
- • Filterable by course and category
- • Course filter auto-filters based on category selection
- • Client-side filtering after SSR data load
- • Pagination with 12 items per page
- • Featured testimonials shown first (when no filters)
Features
Hero Section
- ✓ Title: "What Our Students Say" [US-G009]
- ✓ Subtitle describing testimonials [US-G009]
Stats Bar
- ✓ Total testimonials count (dynamic) [US-G009]
- ✓ Courses reviewed count (dynamic) [US-G009]
- ✓ Average rating [US-G009] Hardcoded 4.8
Featured Reviews
- ✓ Featured testimonials section (top 3) [US-G009]
- ✓ Only shows when no filters active [US-G009]
- ✓ Larger card styling [US-G009]
Filters
- ✓ Category filter (radio buttons) [US-G009]
- ✓ Course filter (filtered by category) [US-G009]
- ✓ Active filter pills with × to remove [US-G009]
- ✓ "Clear all filters" link [US-G009]
- ✓ Mobile filter drawer [US-G009]
Testimonials Grid
- ✓ Responsive grid (3 → 2 → 1 columns) [US-G009]
- ✓ Testimonial cards with quote, name, role [US-G009]
- ✓ Course link on each card [US-G009]
- ✓ Category label [US-G009]
- ✓ Date display [US-G009]
- ✓ Featured badge [US-G009]
Pagination
- ✓ Previous/Next buttons [US-G009]
- ✓ Page number buttons [US-G009]
- ✓ 12 items per page [US-G009]
Empty State
- ✓ "No testimonials found" message [US-G009]
- ✓ "Clear all filters" button [US-G009]
CTA Section
- ✓ "Ready to Start Your Journey?" heading [US-G009]
- ✓ "Browse Courses" button → /courses [US-G009]
- ✓ "Get Started" button → /signup [US-G009]
Interactive Elements
Buttons
| Element | Component | Action | Status |
|---|---|---|---|
| Category radio buttons | TestimonialsBrowse | Sets category filter | active |
| Course radio buttons | TestimonialsBrowse | Sets course filter | active |
| Category pill × button | TestimonialsBrowse | Clears category filter | active |
| Course pill × button | TestimonialsBrowse | Clears course filter | active |
| "Clear all filters" link | TestimonialsBrowse | Clears all filters | active |
| Mobile "Filters" button | TestimonialsBrowse | Opens filter drawer | active |
| Mobile drawer close | TestimonialsBrowse | Closes drawer | active |
| Mobile "Clear All" | TestimonialsBrowse | Clears filters | active |
| Mobile "Apply Filters" | TestimonialsBrowse | Closes drawer | active |
| Pagination buttons | TestimonialsBrowse | Navigate pages | active |
Links
Testimonial Cards
| Element | Target | Status |
|---|---|---|
| Course title link | /courses/{slug} | active |
CTA Section
| Element | Target | Status |
|---|---|---|
| "Browse Courses" | /courses | active |
| "Get Started" | /signup | active |
Target Pages Status
| Target | Page Code | Status |
|---|---|---|
/courses | CBRO | Implemented |
/signup | SGUP | Implemented |
/courses/{slug} | CDET | Implemented |
Verification Notes
Verified Components
- ✓
src/components/testimonials/TestimonialsBrowse.tsx - ✓
src/components/testimonials/TestimonialCard.tsx - ✓
src/pages/testimonials.astro
Screenshots
- 📷
TSTM-2026-01-07-06-44-23.png- Testimonials page with filters and featured reviews
Notes
- • Page fully functional with filtering and pagination
- • Has 5 testimonials, 4 courses in database
- • Course filter cascades from category selection
- • Featured testimonials shown at top (when no filters)
- • Mobile filter drawer works well
- • Avg rating is hardcoded (4.8)
Test Coverage
scripts/page-tests/test-TSTM.sh tests/pages/testimonials.test.tsx ○ tests/components/testimonials/TestimonialsBrowse.test.tsx ✓ tests/ssr/static.test.ts → fetchTestimonialsData() ✓ Discrepancies (Spec vs Implementation)
As of 2026-01-08
Planned but Not Implemented
| Feature | Original Spec | Status | Priority |
|---|---|---|---|
| Analytics events | 5 events (page_view, filter_change, testimonial_view, cta_click, course_click) | Not implemented | Low |
Implemented Differently
| Feature | Original Spec | Reality | Note |
|---|---|---|---|
| Average rating | Dynamic from data | Hardcoded 4.8 | Acceptable - would need ratings table |
What Our Students Say
Real feedback from real learners on their Peerloop journey.
Featured Reviews
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.
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.
Guy helped me realize I do not need 15 AI subscriptions. I narrowed down to 3 tools I actually use daily. Saved $200/month and got more productive.
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.
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.
Guy helped me realize I do not need 15 AI subscriptions. I narrowed down to 3 tools I actually use daily. Saved $200/month and got more productive.
I was drowning in AI tool announcements and felt like I was missing out constantly. This course gave me a framework to think clearly about what I actually need.
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.
Ready to Start Your Journey?
Join thousands of students learning with personalized 1-on-1 guidance.