7:00 am – 8:00 am 1 hr
Yoga Flow
- All levels
A website for independent gyms and studios
A timetable people can filter, passes they can compare, trainers they can meet, and a “My Week” they carry to their own calendar. Built for Northgate Fitness. Yours by replacing one file.
It opens sideways on a phone and nobody can filter it.
Four passes, five differences, and the member does the maths.
Nobody gives the member a way to plan.
How it works
Pick a class type, a level, a trainer, or all three. The URL keeps the filters, so “all the beginner yoga” is a link you can send.
One tap on any class saves it to My Week. It stays in the browser, grouped by day, and the badge in the navigation counts along.
Download one file and every saved class lands in your phone’s calendar as a weekly repeating event, starting from the next one.
What is in the box
Seven columns on desktop, one day at a time on a phone, today marked. Every class opens to its description, room, level and what to bring.
Type, level and trainer combine. The filtered page is a URL. Zero matches gets a message, not a blank.
Four passes as cards with the popular one marked, then a feature-by-feature table. Each card has an Enquire button that writes the email for you.
Every trainer has a profile: bio, specialities, certifications, and the classes they teach this week, each one saveable.
Saved classes grouped by day, a count in the navigation, remove one or clear all with a confirm, and a one-file export that repeats weekly.
No backend, no accounts, no network calls. Light and dark follow the system. Every control is labelled and keyboard operable.
The demo studio
This is the real app, running in the page. Filter it, save a class, open My Week. It keeps what you save in this browser.
For the owner
Every name, class, time, trainer and price lives in one typed content module. Change it and the whole site follows: timetable, filters, profiles, pass cards, the calendar export. A test suite fails the build if a class points at a trainer who doesn’t exist or a plan forgets a feature, so you can’t break it quietly.
export const site = {
id: "northgate-fitness",
name: "Northgate Fitness",
tagline: "Train with people who know your name.",
email: "hello@northgatefitness.example",
hours: [{ label: "Monday – Friday", value: "6:00 am – 9:00 pm" }],
currency: "$",
};
Classes, trainers, sessions and passes sit in
studio.ts next to it.
Two minutes in the demo tells you more than this page can.