Saal — a tutor marketplace, not a course catalogue
Almost every education template on the market sells a catalogue of courses. Saal sells the other half of the industry: a directory of people. A parent or an adult learner filters a roster, reads a profile, shortlists three, compares them side by side, picks a slot from a real availability grid and books it. Nineteen routes carry that from the first search to the receipt.
It is built for an agency quoting a two-sided marketplace front end, or a tutoring business that has outgrown a WordPress LMS theme with no tutor profiles and no booking flow in it.
What you get
Nineteen routes and 184 components. Every screen runs on local data in lib/data/, so the template installs and runs with nothing behind it.
- Home — search panel, who teaches here, subjects, how it works, tutor results, what verified means, the lesson itself, booking, pricing, results, reviews, recruitment and FAQ
- Tutor listing — a filter rail on rate, mode, day part, level, subject, verified status, rating and language, with sort, pagination and a real empty state
- Tutor profile — photo, verified badge, rating, rate, credentials, subjects and levels, a weekly availability grid, reviews and similar tutors. 24 profiles ship
- Subjects hub and subject page — every subject by faculty with counts and a starting price, then one subject sold: level breakdown, price band, top tutors, a first lesson, subject FAQ. 16 subject pages ship
- Booking flow — five steps from slot and length through plan, learner details and payment to a confirmation and a receipt, with validation at every step
- Compare — up to three tutors side by side across eleven rows, with a book action per column
- Near you — twelve metro tiles with in-person counts and top subjects, a travel radius control and a pinned map
- Pricing — rate bands by level, four ways to pay, a school year costed, and where the money goes
- Trust and safety — five named checks with what each one proves, the acceptance rate, what a check does not cover, and the report path
- Become a tutor — earnings calculator, the bar, the checks, tutor voices and an application form
- Dashboard — upcoming and past lessons, saved tutors, the shortlist and an inbox
- About, Contact, Blog index, Article, Sign in, Sign up, 404
Built in and working, with no backend
- Filter rail and sort on the listing, with the state kept in the URL
- Compare table for up to three tutors
- Weekly availability grid with exam-week slots marked
- Five step booking flow with validation and a receipt
- Four calculators: monthly cost, a school year, tutor take-home, and a rate picker
- Shortlist and favourites
- Metro travel radius control
- Review filtering by tag, with a rating histogram
- Five validated forms, each with its own success state
- Currency selector in the footer
- Mega menus, a mobile menu and a skip link
Stack
- Next.js 16.3.4, App Router, Turbopack
- React 19.2.8, TypeScript 5.9, strict
- Tailwind CSS v4, with no custom token layer. The style lives in the CSS variables a standard shadcn project already writes
- shadcn/ui on Base UI 1.8
- HugeIcons and Heroicons
- Fonts through next/font, self-hosted at build. Nothing to download
Design and accessibility
One brand hue, changed in one line. Pastel accents that carry meaning rather than decoration. Every route was measured at 320, 360, 390, 768 and 1024 pixels, and every route carries its own title, description, canonical, Open Graph card and JSON-LD. Colour contrast holds 4.5:1 across the palette.
What is not included
- No backend. Every form validates and shows a success state, and none of them send anything. There is no database, no API key and no service to sign up for
- Portrait photography is not included. Every face loads at runtime from assets.lummi.ai and is licensed for the demo, not to you. Replace the portraits with your own before launch
- Scene photography is included, under the Unsplash License
- Brand marks are logoipsum.com placeholders
- The tutors, reviews, results and metro figures are invented for the demo
Documentation
An offline HTML guide ships in the download, an AGENTS.md sits at the root of the source for anyone working with an AI coding assistant, and the full documentation is online at https://nghiaxchis.gitbook.io/next.js-template-docs/