Studio Iluma
Studio Iluma (Salong Iluma) is a self-built demo, not a client case study. It uses the same React 18 + TypeScript + Vite SPA base as the other demos (Tailwind, shadcn/ui, React Router, TanStack Query, react-hook-form, zod, Vitest), built to static files and served with Nginx in Docker. This is the most extended of the four: framer-motion, The Seasons via local @font-face, Mapbox GL + react-map-gl, an ogl WebGL aurora in the hero, react-helmet-async for SEO, and treatment pages with slugs. No Google Fonts CDN.
TL;DR
A React + Vite salon demo with custom fonts, Mapbox, WebGL aurora, and react-helmet-async SEO, shipped as static files via Nginx in Docker. Result: A live salon demo that combines booking-focused UX with Mapbox, WebGL, and stronger on-page SEO defaults.
Concept site
Development time
Solo
Collaboration
Success
Project outcome
100%
Client satisfaction
The challenge
Local salons need a site that feels personal and premium, but still loads well on mobile. Many templates look generic or struggle once maps, motion, and custom type enter the build.
My approach
I extended the shared Vite + React + shadcn SPA with framer-motion, a local display font, Mapbox, and an ogl-based hero effect, then wired react-helmet-async for clearer SEO defaults. Delivery stays frontend-only: static files behind Nginx in Docker.
Technical features
Built with modern technologies and best practices for reliability and performance
Technology stack
Modern technologies and frameworks for optimal performance
Security and quality
Built with security best practices and quality assurance
Clean architecture
Well-structured codebase following industry standards
Performance
Optimized for speed, scalability, and user experience
Key features
Warm salon branding with The Seasons loaded via local @font-face
Hero WebGL aurora built with ogl
Contact map with Mapbox GL and react-map-gl
react-helmet-async plus Open Graph and Twitter meta in index.html
Treatment routes with slug pages for service detail
Static build served by Nginx in Docker (npm ci in the image build)
Project gallery
Selected screenshots from the project.
Technologies used
Related articles
Project impact
Salon and beauty owners can browse a live example that shows booking flow, map contact, and a richer visual stack without pretending it is a paid client case.