Saal — Tutor Marketplace React NextJs Template

Saal — Tutor Marketplace React NextJs Template (AI Ready)

Saal is the other half of the education shelf: a directory of people, where most templates sell a catalogue of courses. 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. From version 1.1.0 the template carries its design language in a form AI coding agents read, so the pages you add with Claude Code, Cursor or Copilot look like the nineteen you bought.

What makes it AI Ready

• DESIGN.md at the project root, in the shape of Google’s DESIGN.md format. Its front matter lists every colour, type size and radius, generated from app/globals.css. Below it, twelve sections of rules: colour, light and dark, typography, spacing, icons, shapes, component states, motion, sections, drawn marks, imagery and copy.
• AGENTS.md, the file Cursor, Copilot and Codex read first. It covers the stack, where the data lives, what to set before deploying and the six conventions a plausible edit breaks first.
• Three agent skills in .claude/skills/. build-page adds a page or section in the house style. restyle changes the brand colour, fonts, corners, motion or opening mode in both halves. review-design checks changed files against DESIGN.md. Claude Code loads them on its own; any other agent can read them as plain files.
• One source of truth. After you edit globals.css, npm run design rewrites the values in DESIGN.md, and npm run check fails if the two have drifted apart.
• Tokens all the way down. Colours, the control corner radius and every animation length and curve are named tokens, so “use our blue” or “square the buttons” is a one-line edit your agent can find.

New in 1.1.0

• Dark mode on every page, drawn as its own near-black palette with the four pastel tints carried across. A toggle in the header switches it on desktop and phone, and the choice is remembered. The site opens light; following the visitor’s system setting is a two-prop change.
• DESIGN.md, AGENTS.md and the three agent skills described above.
• A pressed state on every control: buttons, chips and pills sink while held, cards and rows darken one step.
• One knob each for the corner radius and the motion speed.

Pages

• 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 an 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 with its level breakdown, price band, top tutors, a first lesson and an 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, 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 and 404.

What is built in

• Dark mode on every page, with a header toggle that remembers the choice
• 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 kept between visits, with a counter in the header
• Metro travel radius control
• Review filtering by tag, over a rating histogram
• Five validated forms, each with its own success state
• Currency selector, mega menus, a mobile menu and a skip link

Everything runs on demo data in lib/data/ and client state. There is nothing to configure before the first npm run dev.

Built with

• Next.js 16.3.4 (App Router, Turbopack) and React 19.2.8
• TypeScript 5.9, strict
• Tailwind CSS v4, Base UI 1.8 and shadcn/ui primitives
• next-themes for light and dark
• HugeIcons and Heroicons
• Plus Jakarta Sans and Geist through next/font, self-hosted at build
• Responsive from 320px, keyboard accessible, AA contrast in both modes
• Per-page metadata, sitemap, robots and JSON-LD

What is not included

• No backend. Tutors, subjects and reviews are typed arrays in .ts files, and the forms show a success state without sending anything.
• 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.
• Press logos are logoipsum placeholders, and the tutors, reviews and figures are invented for the demo.