VA Beauty
Site Vitrine & Système de Réservation
Aperçu
Contexte
VA Beauty est un institut de beauté boutique à Aubagne, France, spécialisé dans les soins du visage haut de gamme et la micropigmentation. La propriétaire avait besoin d'une présence digitale reflétant la qualité premium de ses services. Le problème : aucune présence en ligne, rendez-vous manuels par téléphone/WhatsApp, pas de portfolio visuel pour montrer les résultats, et gestion manuelle des services et tarifs.
Solution
Développement d'un site vitrine professionnel complet avec : (1) Landing page premium avec sections services, galerie avant/après et témoignages ; (2) Système de réservation intégré à Cal.com avec calendrier en temps réel et paiement Stripe ; (3) Galerie dynamique supportant images, avant/après et vidéos réseaux sociaux ; (4) Blog géré via Sanity CMS pour contenu marketing ; (5) Panneau d'administration pour la gestion des services et galerie sans connaissances techniques.
Mon Rôle
J'ai travaillé en tant que Full Stack Developer et UI/UX Designer, créant tout le design d'interface de zéro et implémentant la solution complète. J'ai développé l'architecture avec Next.js 15 et React 19, intégré plusieurs services externes (Supabase, Cal.com, Stripe, Cloudinary, Sanity), et construit le panneau d'administration pour la gestion autonome du contenu.
Stack Technique
Frontend
Backend
Projets
Site Vitrine & Booking
Plateforme Complète de Réservation en Ligne
Site vitrine professionnel avec système de réservation intégré. J'ai créé tout le design UI/UX et implémenté landing page premium, catalogue de services, galerie dynamique, blog, et flux complet de réservation avec paiement.
Fonctionnalités
Landing Page Premium
Hero avec dégradé, indicateurs de confiance (500+ clients, 5★), sections services et témoignages
Catalogue de Services
Grille avec 3 catégories (Sourcils, Lèvres, Soins), combos/packs avec tarifs
Galerie Avant/Après
Filtre par catégorie, types de médias (images, avant/après, vidéos), modal plein écran
Flux de Réservation Multi-Étapes
4 étapes : sélection service → date/heure → informations → confirmation/paiement
Calendrier Cal.com
Widget intégré avec disponibilité en temps réel et timezone automatique
Vidéos Intégrées
Support Instagram, YouTube et TikTok avec embed responsive
Blog Intégré
Articles gérés via Sanity CMS avec SEO optimisé
Design Responsive
Mobile-first avec typographie Sora et système de couleurs avec dégradés
Auth Supabase
Authentification avec vérification admin via table admin_accounts
Row Level Security
Politiques RLS pour la protection des données PostgreSQL
Intégration Stripe
Paiements avec Connected Accounts et webhooks bidirectionnels
Intégration Cal.com
API pour disponibilité, création de réservations et synchronisation
Upload Cloudinary
Optimisation automatique des images, transformations à la volée, CDN global
Sanity CMS
Studio personnalisable pour gestion de blog avec queries GROQ
Routes API Protégées
Endpoints pour booking, gallery, admin avec validation et gestion d'erreurs
Middleware de Protection
Next.js Middleware protégeant les routes /admin et /studio
Design Patterns
Décisions Techniques
Next.js 15 + React 19
Server Components pour performance, App Router pour organisation, Turbopack pour builds rapides
Supabase vs Firebase
PostgreSQL réel avec SQL, Row Level Security natif, auth intégré, open source, tarifs abordables
Cal.com vs Calendly
Open source, API flexible, intégration Stripe native, personnalisation complète, sans branding imposé
Cloudinary vs S3
Optimisation automatique des images, transformations à la volée, CDN global inclus, tier gratuit généreux
Sanity vs Contentful
Studio personnalisable, langage de requête GROQ puissant, collaboration temps réel, tier gratuit généreux
shadcn/ui vs Material UI
Copy-paste pas dépendance, personnalisation totale, accessibilité via Radix, bundle plus petit, Tailwind natif
Défis & Solutions
Intégration Cal.com + Stripe
Stripe Connected Account, webhooks bidirectionnels (Cal → App, Stripe → App), endpoints de diagnostic pour debug
Galerie Multi-Médias
Schéma flexible avec type discriminator, composant MediaModal détectant le type, embed vidéo responsive
Contrôle d'Accès Admin
Table admin_accounts avec permissions JSONB, flag is_active, super-admin fallback, politiques RLS
SEO pour Services Dynamiques
generateMetadata dans chaque page, données structurées JSON-LD, sitemap dynamique, alt text requis
Performance avec Beaucoup d'Images
Next.js Image avec lazy loading, Cloudinary pour optimisation, placeholder blur, sizes responsive