Brahma Sutras
A network of wellness venues across Rishikesh — hotels, farmstays, and sacred spaces — unified under one digital experience.
Visit live site ↗Brahma Sutras brings together a network of diverse wellness venues around Rishikesh — from boutique hotels and farmstays to yoga shalas and retreat centres — into a single, cohesive digital presence.
We designed a calm, content-led experience that honours the depth of the tradition while helping seekers discover and book the right space for their practice.
Lucid Code Labs delivered a performant, responsive platform with a scalable content structure the client can extend as new venues and offerings join the network.
The challenge
Brahma Sutras brings together a network of diverse wellness venues around Rishikesh — from boutique hotels and farmstays to yoga shalas and retreat centres — and needed them to live inside a single, cohesive digital presence. The brief was a calm, content-led experience that honours the depth of the tradition while helping seekers discover and book the right space for their practice, sitting on a scalable content structure the client's own team can extend as new venues and offerings join the network. Multilingual delivery was part of the scope, which meant the content model itself — not only the interface strings — had to be translatable.
Our approach
- We built the site as a Next.js 16 App Router application in TypeScript, using React Server Components and route groups to keep the public experience, the localised routes and the admin panel cleanly separated.
- Supabase and PostgreSQL hold the content model, with the schema managed through version-controlled SQL migrations and row-level security enabled, so properties, room categories, facilities, reviews and blog content can evolve in step with the code.
- The visual language stays calm and content-led: Tailwind CSS v4, Outfit and Playfair Display loaded through next/font, restrained GSAP and ScrollTrigger motion, and a progressive video hero that cross-fades a high-quality clip over an autoplaying low-quality loop once it has downloaded, with separate mobile variants.
- Rather than translating interface strings alone, we translate admin-authored content at the database level, so property, facility and blog copy can be published per locale from the same admin panel and resolved with an English fallback.
- The live guest funnel is an enquiry flow: a booking form validated with React Hook Form and zod composes a structured message — rooms, dates, guests and an estimated total — and hands off to WhatsApp. Server-side Razorpay and Stripe endpoints, including HMAC-SHA256 signature verification, are built behind it for when the client moves to online payment.
What we built
Multi-property catalogue with per-room pricing
Each venue is stored with capacity, nightly rate, coordinates, amenities, images and four cover-video variants, alongside a linked set of room categories. Location pages fetch a property with its nested categories in one query, and the booking form renders per-category quantity selectors with a live price summary calculated as quantity times nightly rate times nights.
External iCal feeds folded into one shared calendar
A sync routine pulls every active iCal feed, parses its events with node-ical and writes them into the same bookings table as direct enquiries, marked as external, so dates blocked on outside listing sites sit on one shared calendar. It runs as an endpoint that is safe to re-run — events are matched on property and external UID, then updated rather than duplicated — with an admin screen for adding and removing feed sources.
Seven-locale site with database-level translations
next-intl middleware drives locale-prefixed routing across English, Hindi, Spanish, German, Russian, French and Italian, backed by per-locale message catalogues. Properties and facilities carry translated name and description columns, blog posts have full row-level translations in their own table, and the Metadata API emits hreflang alternates alongside a programmatic sitemap covering static, property, post and category URLs in every locale.
Custom blog CMS with rich-text editing
Admin CRUD covers posts, categories, tags and authors, with the slug derived from the title and excerpt, word count and reading time derived automatically from the editor output. The editor is Tiptap 3 extended with a custom resizable-image node that stores drag-resized dimensions and alignment in the schema, plus YouTube embeds and syntax-highlighted code blocks; the public reading surface adds pagination, category and tag listings, related posts, a table of contents and a reading-progress bar.
Signed Cloudinary uploads and delivery optimisation
A signing route authenticates upload parameters so the browser uploads media straight to Cloudinary, bypassing server payload limits. An idempotent transformation builder then injects f_auto and q_auto plus sizing into delivery URLs, replacing any existing transform segment rather than stacking one, and a CloudImage component wraps it with a responsive srcSet and lazy loading — including a helper that rewrites Cloudinary URLs embedded in rich-text article bodies.
Reusable facility library with per-property rules
A shared facilities table holds icons, images and a JSONB services menu of name, description, price and duration, with each text field carried in English plus six translated variants. Facilities join to properties through a many-to-many table with a sort order, an 'included' flag and a free-text note, so the same spa or yoga hall can be listed as included at one venue and simply offered at another.
Technology
Frontend
- Next.js 16.2.1 (App Router, React Server Components, route groups)
- React 19.2.4
- TypeScript 5
- Tailwind CSS v4
- GSAP 3.13 with ScrollTrigger
- next/font (Outfit, Playfair Display)
- lucide-react, clsx, tailwind-merge
Backend & Data
- Supabase (@supabase/supabase-js 2.86)
- PostgreSQL with Row Level Security
- Version-controlled SQL migrations
- Next.js Route Handlers
- Next.js Server Actions
- bcryptjs hashing with httpOnly cookie sessions
Content & Media
- Tiptap 3.20 with custom ResizableImage node
- lowlight code-block highlighting
- Cloudinary 2.10 and next-cloudinary 6.17
- Signed direct-to-browser uploads
- f_auto/q_auto delivery transformation layer
Internationalisation & SEO
- next-intl 4.8 across 7 locales (en/hi/es/de/ru/fr/it)
- Next.js Metadata API with hreflang alternates
- Programmatic sitemap and robots routes
- JSON-LD (Organization, Article, LodgingBusiness, BreadcrumbList)
- RSS 2.0 feed
- Dynamic Open Graph image route for blog posts
Forms, Payments & Integrations
- react-hook-form 7.68 with zod 4
- react-day-picker 9, react-date-range 2, date-fns 4
- Leaflet 1.9 and react-leaflet 5
- node-ical 0.22 calendar ingest
- papaparse 5.5 CSV review import
- Razorpay Node SDK 2.9 with HMAC-SHA256 verification
- Stripe 20.1 server SDK (INR PaymentIntents)
- WhatsApp deep-link enquiry handoff
Project Gallery
