VA Beauty
Showcase Website & Booking System
Overview
Context
VA Beauty is a boutique beauty institute in Aubagne, France, specializing in high-quality facial treatments and micropigmentation. The owner needed a digital presence that reflected the premium quality of her services. The problem: no online presence, manual phone/WhatsApp appointments, no visual portfolio to showcase results, and manual management of services and prices.
Solution
Development of a complete professional showcase website with: (1) Premium landing page with service sections, before/after gallery and testimonials; (2) Booking system integrated with Cal.com with real-time calendar and Stripe payment; (3) Dynamic gallery supporting images, before/after and social media videos; (4) Blog managed via Sanity CMS for marketing content; (5) Admin panel for service and gallery management without technical knowledge.
My Role
I worked as Full Stack Developer and UI/UX Designer, creating the entire interface design from scratch and implementing the complete solution. I developed the architecture with Next.js 15 and React 19, integrated multiple external services (Supabase, Cal.com, Stripe, Cloudinary, Sanity), and built the admin panel for autonomous content management.
Tech Stack
Frontend
Backend
Projects
Showcase Site & Booking
Complete Online Booking Platform
Professional showcase website with integrated booking system. I created the entire UI/UX design and implemented premium landing page, service catalog, dynamic gallery, blog, and complete booking flow with payment.
Features
Premium Landing Page
Hero with gradient, trust indicators (500+ clients, 5★), service sections and testimonials
Service Catalog
Grid with 3 categories (Sourcils, Lèvres, Soins), combos/packages with prices
Before/After Gallery
Filter by category, media types (images, before/after, videos), full-screen modal
Multi-Step Booking Flow
4 steps: service selection → date/time → information → confirmation/payment
Cal.com Calendar
Embedded widget with real-time availability and automatic timezone
Embedded Videos
Support for Instagram, YouTube and TikTok with responsive embed
Integrated Blog
Articles managed via Sanity CMS with optimized SEO
Responsive Design
Mobile-first with Sora typography and gradient color system
Supabase Auth
Authentication with admin verification via admin_accounts table
Row Level Security
RLS policies for PostgreSQL data protection
Stripe Integration
Payments with Connected Accounts and bidirectional webhooks
Cal.com Integration
API for availability, booking creation and synchronization
Cloudinary Upload
Automatic image optimization, on-the-fly transformations, global CDN
Sanity CMS
Customizable studio for blog management with GROQ queries
Protected API Routes
Endpoints for booking, gallery, admin with validation and error handling
Protection Middleware
Next.js Middleware protecting /admin and /studio routes
Design Patterns
Technical Decisions
Next.js 15 + React 19
Server Components for performance, App Router for organization, Turbopack for fast builds
Supabase vs Firebase
Real PostgreSQL with SQL, native Row Level Security, integrated auth, open source, affordable pricing
Cal.com vs Calendly
Open source, flexible API, native Stripe integration, full customization, no forced branding
Cloudinary vs S3
Automatic image optimization, on-the-fly transformations, global CDN included, generous free tier
Sanity vs Contentful
Customizable studio, powerful GROQ query language, real-time collaboration, generous free tier
shadcn/ui vs Material UI
Copy-paste not dependency, full customization, accessibility via Radix, smaller bundle, native Tailwind
Challenges & Solutions
Cal.com + Stripe Integration
Stripe Connected Account, bidirectional webhooks (Cal → App, Stripe → App), diagnostic endpoints for debug
Multi-Media Gallery
Flexible schema with type discriminator, MediaModal component detecting type, responsive video embed
Admin Access Control
admin_accounts table with JSONB permissions, is_active flag, super-admin fallback, RLS policies
SEO for Dynamic Services
generateMetadata in each page, JSON-LD structured data, dynamic sitemap, required alt text
Performance with Many Images
Next.js Image with lazy loading, Cloudinary for optimization, blur placeholder, responsive sizes