Maison Velure: Luxury Salon & Spa Platform Case Study
Maison Velure transforms luxury salon operations through a cinematic website and intelligent booking platform built for Dubai's high-end clientele. It combines artisan scheduling, multilingual AI assistance, and live activity feeds into a single, repeatable product that feels like an extension of the brand itself rather than a generic booking widget.
Service
Web Development
Industry
Luxury Hospitality & Wellness
Category
LUXURY TECH
Built with: Next.js, React, Supabase, Claude.
Overview
The Problem
Luxury salons invest heavily in interiors and service, then direct guests to generic booking widgets that undermine the premium experience
Treatment information is scattered or hidden: prices require phone calls, durations vary, and guests ask identical questions repeatedly across multiple languages
Double bookings occur when two guests select the same artisan and time slot simultaneously, with most small-business tools unable to prevent this at the database level
Staff have no visibility into online bookings until they manually check a dashboard, causing service disruption and missed communication
The Solution
Built a cinematic hero experience with five short films (one per treatment world) that slow visitors down and convey luxury before booking begins
Engineered a booking engine that respects artisan shifts, breaks, and cleanup buffers, with triple-layer protection against double bookings: engine validation, cross-server locks, and a Postgres rule that rejects overlapping bookings
Deployed Iris, an AI concierge that converses in English, Arabic, Hindi, Urdu and Roman Urdu, recommends treatments, holds time slots, and quotes real prices drawn directly from the menu
Created a live desk interface for staff that shows real-time bookings, daily revenue, and guest activity, with an optional chime notification for new reservations
Implemented a complete, searchable treatment menu with pricing, duration, inclusions, and artisan filtering, all updated through a single configuration file
Solution Workflow
Arrive
Discover
Choose
Book
Confirm
Full Technical Breakdown
WebGL 2 Film Renderer
Custom-built with a single quad, two video textures, and water-ripple simulation using no 3D library. Supports oil-drop transitions that expand outward to reveal the next clip, interactive ripples on pointer movement, slow-motion mode on press-and-hold, and automatic fallback to plain video crossfades on low-power devices or when WebGL 2 is unavailable.
Availability Engine Logic
Pure algorithm with no database calls, shared across the website, AI concierge, demo data generator and test suites. Handles 15-minute start-time grids, 10-minute cleanup buffers, 30-minute booking notice, 45-day forward booking window, per-artisan working days and shifts, treatment-specific per-person eligibility, and add-on duration extension.
Booking Hold and Lock System
Chosen time slots are reserved for 10 minutes while guests complete their details. A cross-server shared lock (via Postgres) protects the final write operation. A Postgres CHECK rule with exclusion constraint rejects any confirmed booking that overlaps with another confirmed booking for the same artisan.
AI Concierge with Tool Integration
Claude conversations stream word-by-word with nine tools: get_menu, get_artisans, check_availability, hold_slot, prepare_booking, lookup_booking, request_cancellation, get_salon_info and recommend_services. Instructions are generated from the brand file so prices and hours cannot drift. All tool inputs validated with Zod before processing. Iris can never book or cancel on her own; guests confirm via the same endpoints as manual booking.
Real-Time Live Layer
Server-Sent Events stream signed booking notifications to all browsers. Privacy-first design shows only treatment name, artisan first name and last initial, time and visit date. Mixed Arabic-English names are handled to prevent text scrambling. Messages are signed to prevent injection. Toast notifications throttled to one every 45 seconds, optional to disable. Visitor count aggregates across all servers so one person on two servers counts once.
Multi-Language Support
Full internationalization with Iris available in English, Arabic (with right-to-left layout), Hindi, Urdu and Roman Urdu. IBM Plex Sans Arabic font loads only when Arabic text is present, avoiding bandwidth cost for English-only visitors. Menu search handles accents and transliteration. Staff desk design accommodates RTL script display without text reflow issues.
Front Desk Owner View
Passcode authentication with timing-safe comparison prevents timing attacks. Signed 12-hour session cookie expires on password change, signing out all staff. Timeline shows every artisan and every booking across the day with revenue totals. Live booking updates trigger without page refresh. Staff can cancel bookings on behalf of guests from this interface.
Security and Row-Level Access Control
Supabase Row Level Security with no public database policies. Public API key can read nothing; only the backend touches the tables. Content Security Policy restricts loading and connections to the site itself. HSTS with preload, no framing allowed, and microphone access isolated to this domain for voice input. Rate limits shared across servers in Postgres, fall back to per-server memory if database is unreachable.
Responsive Design and Fallbacks
Portrait phones receive dedicated vertical video (1080x1920); other screens receive 1280 or 1920 wide versions. Only the first clip loads initially, next one preloads during playback. WebGL automatically falls back to video crossfades if unsupported or performance drops below 24 fps. Lite mode disables film, custom cursor, grain and glow, toggled automatically on low-memory devices or Save-Data preference.
Brand Configuration and Consistency Testing
139 automated tests across 13 files validate the booking engine, concierge accuracy, live layer, lite mode, cursor behaviour and brand consistency. Tests run against real Supabase instance and Realtime channel. Checks catch artisan offering non-existent treatment, service no one performs, shifts outside opening hours, price disagreement across systems, invalid menu quotes and oversized hero videos before launch.
Results
Key Features
Cinematic Hero Films: Five short films (Arrival, Awakening, Rituals, Artisans, Your Moment) rendered with a custom WebGL 2 engine featuring oil-drop transitions, interactive ripples, slow-motion hold state, and time-of-day colour grading that follows Dubai's light cycle.
Triple-Layer Double-Booking Prevention: Bookings are validated by the availability engine, protected by a shared lock across servers, and finally rejected at the Postgres level if any overlap is detected, ensuring no two guests can claim the same artisan and time slot.
Iris AI Concierge: A Claude-powered conversational agent fluent in English, Arabic (right-to-left), Hindi, Urdu and Roman Urdu that recommends treatments, checks real availability, holds time slots, and quotes accurate AED prices drawn from the live menu.
Complete, Transparent Menu: All 22 treatments and 9 add-ons display price with VAT, duration, inclusions and ideal use cases. Sticky category tabs, accent-aware search, and duration filters make discovery immediate, eliminating need for guest inquiry.
Live Staff Desk: A passcode-protected owner interface showing a real-time day timeline across all artisans, current revenue and booking count, incoming reservations with optional chime notification, and instant cancellation capability.
One-File Rebrand System: Salon name, logo, colours, address, hours, currency, menu, team, and every headline are managed in a single brand.ts file. Automated tests catch configuration errors before launch, enabling new salon deployments in approximately one hour.
Before
The salon operated with a split experience: guests encountered a beautiful physical villa but were directed to a generic, feature-poor booking widget that provided no luxury feeling. Pricing information was hidden, requiring guests to call or message, often in multiple languages. Staff spent time answering repetitive questions about treatment details, and the front desk had no visibility into online bookings until manually checking a dashboard. Double bookings were a recurring operational failure, causing service disruptions and guest frustration.
After
The website now extends the salon's identity from the moment a guest arrives, with cinematic films setting a premium tone before any booking interaction. Every treatment price, duration, and inclusion is immediately visible, dramatically reducing WhatsApp inquiries. Iris answers guest questions around the clock in their preferred language, using real availability and pricing data. The booking engine prevents double bookings through three independent layers of validation, and the staff desk displays new reservations in real time with optional audio notification. Configuration changes to pricing, menus, or artisan details propagate automatically across the entire platform without code edits.
What This Proves
This project demonstrates that premium branding and operational functionality are not in conflict. The technical architecture backs every brand promise: a booking cannot be assigned to two guests because the database itself enforces uniqueness; prices shown to guests are always consistent with Iris and Google's listing because all pull from a single source; and guest privacy is preserved because personal names never reach other visitors' browsers. The ability to launch a new salon using the same codebase in under an hour, verified by automated tests that catch configuration errors before deployment, shows this is a repeatable product for luxury spas and salons, not a one-off custom build. The combination of custom WebGL rendering, a pure availability engine, cross-server real-time messaging, and a grounded AI agent with tools demonstrates full-stack depth solving both aesthetic and operational challenges simultaneously.
Tech Stack
Frontend
Next.js 16.4 — App framework with pre-rendered home page and server routes
React 19.3 — 57 component files for hero, chapters, booking, concierge and desk
TypeScript — Strict typing throughout, including brand configuration
CSS Modules + Design Tokens — 27 scoped stylesheets with one token file and colour injection
AI & Voice
Anthropic Claude — Streaming conversation with nine tools and cached instructions
Zod 4 — Input validation for every tool and API request
Web Speech API — Voice questions and input for accessibility
Infrastructure
Vercel — Automatic deployments from GitHub in Seoul region (icn1)
Server-Sent Events — One-way live updates through site's own address with 20-second heartbeat
Backend & Database
Next.js Route Handlers — 14 API routes for booking, desk, concierge and live stream
Supabase PostgreSQL — Bookings, holds, shared locks and rate limits across servers
Postgres Rules — Database-level rejection of overlapping bookings for same artisan
Supabase Realtime — Signed messages between server instances for live updates
Design & Animation
Raw WebGL 2 — Custom film renderer and ripple simulation with no 3D library
Web Audio API — Generative ambience and UI sounds without audio files
Scalability & Flexibility
Horizontal Server Scaling: Holds, locks, rate limits, live events and presence counts are all managed in shared Postgres, not in-memory. Platform works identically on one server or fifty Vercel instances without code changes.
One-File Configuration System: All salon metadata (name, logo, colours, address, hours, currency, menu, team, concierge language list, tax note, every headline) lives in brand.ts. A new salon launches with a new config file, three font calls, and a folder of photos, without editing any component.
Multi-City and Multi-Currency Ready: Timezone, currency code, tax text, opening days and extended weekend hours are settings, not hardcoded. The booking engine, open-now sign, day-phase grading, footer and Iris automatically follow these settings.
Any Language Mix Support: Iris's language list is configurable. Full Arabic support includes fonts, right-to-left layout, and Arabic-English name scrambling prevention. Adding a new language requires only an entry in the config and Claude's multilingual capabilities.
Swappable Data Storage: Booking storage is behind a single interface with two implementations: Postgres and local JSON file. Switching databases requires only a new implementation of that interface without touching business logic or API routes.
Payment Integration Ready: The confirm route has a marked extension point for Stripe deposits. Current design is pay-at-salon (matching Dubai luxury spa norms), but card flows can be added without refactoring.
Backward-Compatible URL Rewrites: When treatment categories are renamed, old category IDs are kept functional so links from old Instagram bios and WhatsApp campaigns continue to open the correct page without 404s.
Performance Optimization via Regional Deployment: Vercel Functions deployed to Seoul (icn1) region, co-located with Supabase database, reduce booking hold and confirm latency from 4-5 seconds to approximately 0.5 seconds per step.
Automatic Fallback and Degradation: Without AI concierge key or during Anthropic outage, Iris gracefully points guests to the manual booking section and WhatsApp. Rate limits fall back to server memory if Supabase is unreachable. Live events survive serverless function freezing between requests.
Caching and Content Delivery: Films and photos cached for one week with background refresh. Images served as AVIF and WebP with automatic format selection. First clip loads immediately, next clips preload during playback, reducing perceived load time.