Fluently — language school template - Opencals Developer Docs

A complete language-school website you can clone and deploy today. Fluently is built for schools and courses: group classes with levels, private 1:1 lessons, a free trial, teachers, campuses and a live online classroom. Start here for a language, music, coding, art or tutoring school. It runs on the same Storefront API and typed TypeScript SDK as Haar, Frisor, Clear Care, VOLT and NOIR Drive. It’s set in New York (USD, America/New_York) with two campuses and an online classroom, teaching Spanish, French, German, Italian, Japanese and Mandarin. The design is friendly and colorful: chunky sticker buttons, speech-bubble chips and 3D mascots next to real photos.

Live demo

template-fluently.vercel.app

Source code

letsopencals/template-fluently (MIT)

Deploy to Vercel

One-click deploy

Build it with AI

classes-and-lessons reference

Fluently language school website template on a laptop and two phones in a classroom — Fluently — the storefront on desktop and mobile

Fluently template homepage hero reading Speak a new language by summer, with a waving mascot and greetings in six languages — Homepage hero — friendly and colorful, with a free trial up front

The school model

This is the part worth copying even if you never ship Fluently itself. It uses existing Opencals features only, and the template reads everything from the data, so nothing about languages is hard-coded.

Piece	How it’s modelled
A subject (a language)	A collection. A separate `start-here` collection holds the trial and conversation club
A group class	A product with `maxAttendees > 1`, assigned to its teachers
Levels (A1, A2, B1)	Variants of the group class, each with its own slug and price
A private lesson	A 1-seat product whose variants are lengths (45 / 60 min)
The free trial	A 1-seat product priced `0`, booked without a card
Online vs campus	Derived from the class’s location types: all `ONLINE` means an online group
Teachers	Staff members; their languages and campuses come from their class and location assignments
Seats left	`maxAttendees - attendees` on each availability slot
The online classroom	The `ONLINE` location’s `link`, returned on the booked appointment’s location
Colors	Each product’s dashboard color picks its swatch

What’s inside

Fluently template class booking flow with campus choice, level variants, a date strip and a time slot showing seats left — Class booking — campus or online, level, date and time, with live seats left

Fluently template weekly timetable with a day strip, language filters and a bookable class showing seats left — Timetable — group classes for the week ahead, filterable by language

Feature	Notes
Home	Mascot hero with real teacher portraits, stats counted from your data, language tiles, a format switcher, a level-finder quiz, testimonials and FAQ
This week timetable	Next seven days of group sessions across every class, with seats left, language filters and one-click booking (one cached availability call per level)
Classes	Catalog filtered by language, format and level, with shareable URLs
Language and teacher pages	Per-language classes, private lessons and teachers; teacher profiles with “Book with “
Booking	Online or campus, level or length, teacher, extras, placement questions, details, payment. Deep links: `/booking/<variant-slug>?date=&staff=&location=`
Online lessons	A Join lesson button on online bookings, live from 15 minutes before the start
Cart & Stripe checkout	Cart + Checkout + Payment endpoints, with the no-payment path for the free trial
Passwordless accounts	6-digit email login (password fallback), one-time email links via `/link/[token]`
SEO	Per-page metadata, Open Graph, `LanguageSchool` and `FAQPage` structured data, `robots.txt`, `sitemap.xml`
Stack	Next.js 15, TypeScript, Tailwind v4, Framer Motion, `@opencals/storefront-sdk` v0.3.14

Get started

Clone and install

git clone https://github.com/letsopencals/template-fluently.git
cd template-fluently
npm install

Add your API key

Create a store in the Opencals dashboard and choose the Fluently dataset preset (language_school). It seeds the six languages, campus and online group classes with level variants, private lessons, the free trial, teachers, both campuses, the online classroom with its link, extras and placement questions. Then grab a Storefront API key (see Authentication) and set OPENCALS_API_KEY, AUTH_SECRET and NEXT_PUBLIC_SITE_URL in .env.local.

Run it

npm run dev

Your classes, teachers and timetable render immediately.

Deploy

Push to your own repo and deploy to Vercel, or host anywhere Next.js runs.

Pages are server-rendered, so their API calls carry no browser Origin. Leave allowed origins empty on the key you give this template, or those calls are rejected.

Set Storefront Base URL in your dashboard (Settings → API) to your deployed domain. Every customer link (view, reschedule, cancel, leave feedback) is built as {storefrontBaseUrl}/link/{token}, so if it still points at localhost those emailed links go nowhere.

Make it yours

MIT-licensed: rebrand it, restructure it, or use it for client work. All copy lives in lib/site-config.ts: hero, format descriptions, the level quiz, how it works, testimonials, FAQ and values. Every colour and font is a Tailwind v4 @theme token in app/globals.css:

@theme {
  --color-bg: #FBF8F3;        /* warm paper */
  --color-ink: #16131F;       /* ink + outlines */
  --color-primary: #7C5CFF;   /* grape */
  --color-sun: #FFC93C;       /* sunflower accent */
}

Building a different school site with an AI agent? The build-booking-site skill has a classes-and-lessons reference with the full pattern.

Live demo

Source code

Deploy to Vercel

Build it with AI

​The school model

​What’s inside

​Get started

​Make it yours

The school model

What’s inside

Get started

Make it yours