An online course marketplace where AI works at both ends
Waypoint is a Next.js template for a multi-instructor course platform. Learners get a lesson player with an AI tutor that answers from the lesson they have open. Teachers get a course studio that drafts an outline, splits a recording into lessons and writes quiz questions for them to rewrite. It is built for developers and studios shipping an e-learning site, an LMS front end or a course marketplace for a client.
Every control on the demo works from state in the browser: filters filter, the player seeks, notes save, checkout validates, certificates download. There is no backend to set up.
Pages
- Home: search, subjects, the tutor and the studio shown working, a path planner, instructors, pricing and FAQ.
- Course catalogue: filters in seven groups, sort, search with suggestions, grid and list views, compare, recently viewed and an empty state.
- Course page: a syllabus that opens before purchase, free preview lessons, a rating breakdown, the instructor, related courses and a buy card that follows the scroll.
- Lesson player: a scrubber and playback speeds, a contents list that ticks off, a transcript that seeks on click, notes stamped to the second, a quiz marked on the spot and the AI tutor panel.
- Learning paths: five courses toward a job, with prerequisites and a slider for hours a week that moves the finish date.
- Instructor directory and profiles: filters by field and verification; career, courses, reviews and upcoming cohorts.
- Teach: the revenue split, three steps, an earnings calculator and an application form.
- Course studio: an outline drafted from one line, a recording split into lessons, generated quiz questions to approve, revenue by course and drafts.
- Learner dashboard: courses under way, the learning path, certificates to download or share, and saved courses.
- Pricing: three plans, a monthly and yearly toggle, a full comparison, team seats and pricing FAQ.
- Checkout: three steps with real validation, a promo code, an order summary and a success screen.
- About, Contact with live desk hours and an office map, Sign in with a three-step password reset, Sign up in three steps, and a 404.
Built in
- 36 courses, 15 instructors and 4 learning paths of mock data, all in TypeScript arrays a page reads from.
- Saved courses, progress, notes and path choices kept in the browser and shared across tabs.
- Course comparison, recently viewed, follow an instructor, cohort waitlist.
- Earnings calculator, plan picker, hours-a-week planner.
- Downloadable certificates with share links.
- Responsive from 320px to wide desktop.
- SEO: per-route titles and link previews, a sitemap, robots and JSON-LD.
Stack
- Next.js 16.3 (App Router) and React 19.2
- Tailwind CSS 4.3 and shadcn/ui on Base UI
- TypeScript
- HugeIcons and Heroicons
Not included
- No backend, database or payment processing. The forms validate and do not send, and the AI tutor and studio answer from prepared demo data.
- Photography is loaded from Unsplash and Lummi for the demo and is not part of the download.
- The heading font, Cabinet Grotesk, is free but cannot be redistributed. One command,
npm run fonts, downloads it from Fontshare.