skip to content
sys.name
vvhybe_os 26.10
status
200 building papyrus
user
vvhybe (yassine bouba)

cat jnaninyoga/

10 / 19

Jnanin Yoga

A yoga studio's website: bookings, a weekly class calendar and galleries, in three languages.

role
full-stack developer
year
2023-24
access
-r--r--r-- (archived, read-only)

TL;DR

problem
A Marrakesh yoga studio needed a public face in English, French and Arabic, bookings that reach the instructor, and a timetable she could change herself.
approach
A React site on Firebase: the language in the URL, bookings saved and emailed to the studio, a weekly calendar the dashboard edits live.
outcome
About 400 commits of mine, most in the summer of 2023. The live site has since been rebuilt by someone else; this one is kept here, read-only.
Jnanin Yoga, screenshot

// overview

The studio's public face from 2023, designed around its logo and palette: bookings, a weekly class calendar, galleries and testimonials, in English, Arabic and French, built with SEO in mind. The site has since been rebuilt by someone else; this was mine.

Behind it, a real-time dashboard tracked contact forms, bookings, users and payments, with email notifications.

// a studio's own look

The design starts from the studio's logo and palette: a coral lotus, deep teal, linen textures, and photographs and video from the studio itself. Every section is a card laid on that linen.

01 / 03
fig. 01homePatanjali's line under the opening video, then the gallery of classes.
fig. 02the practiceSections on the practice, each a card on linen.
fig. 03on a phoneThe same page on a phone.
Jnanin Yoga: home
fig. 01 homePatanjali's line under the opening video, then the gallery of classes.
fig. 1 / 3

// three languages, one right to left

The language lives in the URL, /fr/classes or /ar/booknow, so every page can be shared and found in each language. Translations load on demand, one file per language.

Each language carries its direction. Choosing Arabic turns the page right to left, layouts mirror through Tailwind's rtl: variants, and name fields accept Arabic script.

01 / 02
fig. 04in ArabicThe home page in Arabic: the menu, the cards and the gallery's title all run right to left.
fig. 05booking, in ArabicLabels, placeholders and buttons turn around; the phone field's flag moves to the other side.
Jnanin Yoga: in Arabic
fig. 04 in ArabicThe home page in Arabic: the menu, the cards and the gallery's title all run right to left.
fig. 1 / 2

// bookings that reach the studio

A booking is saved as a request, tagged with the visitor's language, and a transactional email tells the studio, linking straight to it in the dashboard. The phone field picks the visitor's country by itself. Contact messages and reviews, stars included, travel the same way.

01 / 02
fig. 06book nowName, email, a phone number with the country already chosen, and what the visitor wants from yoga.
fig. 07booking on a phoneThe Arabic booking form, at phone size.
Jnanin Yoga: book now
fig. 06 book nowName, email, a phone number with the country already chosen, and what the visitor wants from yoga.
fig. 1 / 2

// a timetable she edits

The weekly calendar is one document per day, each an ordered list of sessions. The page listens for changes, so an edit in the dashboard shows on the public site at once, without a redeploy. On a phone each day takes most of the screen and the week scrolls sideways.

01 / 02
fig. 08classesThe week as tabs, and the four kinds of course. The sessions themselves came live from the database, which this archive runs without, so the table stays empty here.
fig. 09classes on a phoneOne day at a time on a phone, the course types below.
Jnanin Yoga: classes
fig. 08 classesThe week as tabs, and the four kinds of course. The sessions themselves came live from the database, which this archive runs without, so the table stays empty here.
fig. 1 / 2

// the back office

Behind the site: boards for sessions, bookings, contacts, reviews and clients, and carnets, prepaid packs of sessions with what's been paid and what's still owed. Charts break the clients down, and session reports print straight from the browser. In 2026 the back office got an app of its own, the command center.

// found in three languages

Every page has its own title, description, canonical link and social image in each language, the footer describes the studio in schema.org terms, and the sitemap lists every page three times over.

// stack

  • react
  • firebase
  • mui
  • i18next
  • tailwind

// links