Créer une App de Réservation avec l'IA : Guide Lovable
Créer une app avec l'IA : bâtissez un moteur de réservation pro avec Lovable et Stripe. Automatisez vos rendez-vous et paiements via ce tutoriel Lovable complet.
Aperçu du projet
Le cas : Une solution scalable pour les thérapeutes et cliniques indépendantes
Développer un système de réservation professionnel était autrefois un cauchemar technique impliquant une logique de calendrier complexe, la gestion des fuseaux horaires et le traitement sécurisé des paiements. Créer une app avec l'IA via Lovable transforme ce processus d'un cycle de développement de plusieurs mois en un projet de week-end. Notre étude de cas se concentre sur "ZenTime", une plateforme de réservation haut de gamme conçue pour les thérapeutes indépendants (psychologues, ostéopathes, massothérapeutes) qui ont besoin d'un outil unifié pour gérer leur cabinet, automatiser les rappels et sécuriser leurs revenus via des paiements d'acompte.
Le problème est clair : les thérapeutes perdent des heures chaque semaine à gérer les rendez-vous manuellement et souffrent de "no-shows" (rendez-vous non honorés) qui impactent leur rentabilité. ZenTime résout cela en offrant une interface de réservation fluide côté client et un tableau de bord administratif robuste. En exploitant Lovable, nous pouvons construire une solution qui n'est pas qu'un simple formulaire, mais une application full-stack avec synchronisation des disponibilités en temps réel et facturation automatisée.
Fonctionnalités clés
- Gestion Dynamique des Disponibilités : Une interface visuelle permettant aux thérapeutes de définir leurs heures de travail, pauses et congés, avec détection instantanée des conflits.
- Portail de Réservation Client : Une interface minimaliste "mobile-first" permettant aux clients de choisir un service, trouver un créneau et payer en moins de 2 minutes.
- Notifications Automatisées : Intégration avec Resend pour les confirmations par email et Twilio pour les rappels SMS 24h avant la séance.
- Paiements Sécurisés (Stripe) : Acompte obligatoire ou paiement complet lors de la réservation pour éliminer les désistements et simplifier la comptabilité.
- Tableau de Bord Professionnel : Statistiques en temps réel sur le chiffre d'affaires, le taux de présence et les sessions à venir pour le praticien.
- Dossiers Patients : Un espace sécurisé pour stocker les coordonnées, l'historique des séances et des notes privées (conforme aux normes de protection des données de santé).
- Catalogue Multi-Services : Support pour différents types de séances (ex: "Bilan initial - 1h30", "Suivi - 45min") avec des tarifs spécifiques.
- App Mobile Responsive : Un design prêt pour le format PWA permettant au thérapeute de gérer son agenda en déplacement.
Stack & intégrations
Pour bâtir ce moteur de réservation professionnel, nous utilisons toute la puissance de l'écosystème Lovable :
- Lovable Cloud : Le moteur principal pour le frontend (React/Tailwind) et la logique métier.
- Supabase : La colonne vertébrale pour notre base de données PostgreSQL, gérant les données patients, les notes chiffrées et l'authentification.
- Stripe : Gère toutes les transactions financières, incluant le paiement différé ou les acomptes.
- Resend : Propulse tous les emails transactionnels (confirmation, report, factures).
- Twilio : (Optionnel mais recommandé) pour les alertes SMS qui réduisent drastiquement les rendez-vous manqués.
- Lucide React & Shadcn UI : Pour une interface épurée, de qualité médicale, qui inspire confiance.
Prompts Lovable concrets
1. Design system & identité visuelle
Je construis 'ZenTime', une plateforme de réservation premium pour thérapeutes. Crée un design system complet dans index.css en utilisant des tokens HSL. L'ambiance doit être 'Calme, Professionnelle et Fiable'.
- Palette : Utilise des verts sauge doux pour les accents primaires (ex: 158 35% 45%), des blancs cassés chauds pour les fonds (30 20% 98%) et un ardoise profond pour le texte (215 25% 27%).
- Typographie : Utilise 'Inter' pour les éléments d'interface et 'Playfair Display' pour les titres afin de donner un aspect haut de gamme. Définis 5 niveaux de titres.
- Composants : Personnalise les réglages par défaut de Shadcn UI avec des rayons de bordure de 12px, des ombres portées subtiles de 4px, et des effets de glassmorphism pour les cartes.
- Mode Sombre : Mappe la palette vers des bleus marine profonds et des verts atténués pour les environnements peu éclairés.
- Gradients : Crée un 'zen-gradient' utilisant les couleurs primaires et secondaires pour le fond de la section hero.
2. Schéma de base de données & RLS
Configure le backend pour ZenTime. Crée les tables Supabase suivantes avec les politiques de sécurité (RLS) appropriées.
- 'profiles' : id (UUID, PK), full_name, role (enum: therapist, patient), phone, avatar_url.
- 'services' : id, therapist_id (FK), name (ex: Séance d'Ostéopathie), duration_minutes, price_eur.
- 'availability' : id, therapist_id (FK), day_of_week (0-6), start_time, end_time, is_active.
- 'appointments' : id, therapist_id (FK), patient_id (FK), service_id (FK), start_time, end_time, status (pending, confirmed, cancelled, completed), stripe_payment_intent_id.
- 'notes' : id, appointment_id (FK), content (texte chiffré), created_at.
Politiques : Les patients ne voient que leurs propres rendez-vous. Les thérapeutes voient tous les rendez-vous liés à leur therapist_id et gèrent leurs propres disponibilités.
3. Authentification & onboarding
Construis le flux d'authentification pour ZenTime.
- Page d'inscription : Options 'Je suis un Thérapeute' ou 'Je veux Réserver'. Inclue l'Email/Mot de passe et Google OAuth.
- Onboarding : Si l'utilisateur est un thérapeute, redirige vers un formulaire multi-étapes pour configurer son premier Service et ses Disponibilités générales (Lundi au Vendredi, 9h00 à 18h00).
- Gestion du Profil : Une page où les patients mettent à jour leurs infos et les thérapeutes chargent une bio pro et une photo de profil.
- Protection des routes : Utilise un composant Layout pour garantir que /dashboard n'est accessible qu'aux utilisateurs authentifiés.
4. Fonctionnalité Cœur : Le Moteur de Réservation
Crée la page de Réservation principale pour ZenTime. C'est une page publique où les clients réservent un thérapeute.
- Étape 1 : Sélection du Service. Une grille de cartes affichant le nom du service, la durée et le prix (ex: 'Sophrologie - 60 min - 70€').
- Étape 2 : Sélection Date & Heure. Une vue calendrier affichant les 30 prochains jours. Au clic sur une date, affiche les créneaux libres calculés en vérifiant 'availability' moins les 'appointments' existants.
- Étape 3 : Résumé de Confirmation. Affiche les détails sélectionnés et un bouton 'Procéder au Paiement'.
- UI : Utilise un stepper propre, des transitions fluides entre étapes, et un état 'chargement' pendant la récupération des créneaux via Supabase.
5. Intégration Externe : Paiements Stripe
Intègre Stripe dans le flux de réservation de ZenTime.
- Logique : Quand un client clique sur 'Procéder au Paiement', appelle une Edge Function Supabase pour créer une Session Stripe Checkout.
- Tarification : Le montant doit être récupéré dynamiquement depuis la table 'services'.
- Succès/Échec : Crée une page /booking/success qui met à jour le statut de l'appointment en 'confirmed' via un webhook, et une page /booking/cancel.
- Notifications : En cas de succès, déclenche un toast 'Nouvelle Réservation' et prépare un email de confirmation via Resend.
6. Polish, SEO & Design Responsive
Finalise ZenTime pour la mise en production.
- Design Responsive : Assure-toi que le calendrier de réservation est parfaitement utilisable sur mobile (iPhone/Android). La Sidebar du dashboard doit se transformer en barre de navigation basse sur mobile.
- SEO : Implémente les Meta Tags pour la landing page (titre: 'ZenTime - Réservez votre séance de thérapie en ligne', description: 'Trouvez les meilleurs thérapeutes locaux et prenez rendez-vous en quelques secondes.').
- Polish : Ajoute des Skeleton loaders pour les cartes du dashboard, des illustrations 'État vide' quand il n'y a pas de rendez-vous, et des Toasts professionnels pour chaque action utilisateur (sauvegarder, supprimer, réserver).
- OpenGraph : Configure une image OG personnalisée pour le partage social.
Pièges courants & solutions
Q : Comment éviter les doublons si deux personnes cliquent sur le même créneau en même temps ?
R : Utilisez une transaction au niveau de la base de données ou une contrainte d'unicité dans Supabase combinant therapist_id et start_time. Lovable permet d'écrire ces contraintes SQL personnalisées pour garantir l'intégrité des données.
Q : Les patients peuvent-ils voir mes notes privées sur leurs séances ?
R : Non, si vos politiques RLS (Row Level Security) sont correctement configurées. Vous devez définir une politique où seul l'utilisateur ayant le rôle 'therapist' et le therapist_id correspondant peut effectuer un SELECT sur la table notes.
Q : Comment gérer les fuseaux horaires différents entre le thérapeute et le patient ?
R : Stockez toujours les horodatages en UTC dans la base de données. Lors de la récupération des données dans Lovable, utilisez la locale du navigateur de l'utilisateur pour afficher l'heure locale. La bibliothèque date-fns est parfaite pour cela.
FAQ
Puis-je intégrer mon Google Calendar ?
Oui, vous pouvez utiliser l'API Google Calendar au sein d'une Edge Function Supabase pour synchroniser vos rendez-vous ZenTime avec votre agenda personnel en temps réel.
Stripe est-il obligatoire pour le MVP ?
Non, vous pouvez commencer avec une option "Paiement au cabinet" en sautant simplement l'étape Stripe et en passant le statut du rendez-vous à "confirmé" immédiatement.
Combien coûte l'hébergement ?
Avec les paliers gratuits de Supabase et Lovable, vous pouvez lancer pour 0 €. En grandissant, Stripe prend une petite commission et Resend offre un palier gratuit généreux pour les 3 000 premiers emails mensuels.
Conclusion
Bâtir une plateforme de réservation professionnelle n'est plus réservé aux grandes équipes techniques. En suivant cette formation Lovable, vous avez la feuille de route pour lancer une application sécurisée, esthétique et fonctionnelle en un temps record. Que vous soyez entrepreneur ou thérapeute souhaitant automatiser son activité, le vibe coding avec Lovable est le chemin le plus court entre l'idée et le chiffre d'affaires. Prêt à créer votre MVP ? Ouvrez Lovable et commencez par le prompt du design system !
Maquette interactive
Aperçu statique d'un écran clé du projet.
Rendez-vous du jour
Mardi 24 Octobre
Schéma de base de données
À coller dans Lovable Cloud (Supabase). RLS incluses.
-- Extension pour les UUID
CREATE EXTENSION IF NOT EXISTS "uuid-ossp";
-- Table des profils utilisateurs
CREATE TABLE profiles (
id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,
full_name TEXT NOT NULL,
role TEXT CHECK (role IN ('therapist', 'patient')) DEFAULT 'patient',
phone TEXT,
avatar_url TEXT,
updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);
-- Table des services proposés par les thérapeutes
CREATE TABLE services (
id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
therapist_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,
name TEXT NOT NULL,
description TEXT,
duration_minutes INTEGER NOT NULL DEFAULT 60,
price_eur DECIMAL(10,2) NOT NULL,
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);
-- Table des disponibilités (ex: Lundi 9h-17h)
CREATE TABLE availability (
id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
therapist_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,
day_of_week INTEGER NOT NULL CHECK (day_of_week BETWEEN 0 AND 6),
start_time TIME NOT NULL,
end_time TIME NOT NULL,
is_active BOOLEAN DEFAULT TRUE,
UNIQUE(therapist_id, day_of_week, start_time)
);
-- Table des rendez-vous
CREATE TABLE appointments (
id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
therapist_id UUID REFERENCES profiles(id) NOT NULL,
patient_id UUID REFERENCES profiles(id) NOT NULL,
service_id UUID REFERENCES services(id) NOT NULL,
start_time TIMESTAMP WITH TIME ZONE NOT NULL,
end_time TIMESTAMP WITH TIME ZONE NOT NULL,
status TEXT CHECK (status IN ('pending', 'confirmed', 'cancelled', 'completed')) DEFAULT 'pending',
stripe_payment_intent_id TEXT,
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);
-- Activer RLS
ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
ALTER TABLE services ENABLE ROW LEVEL SECURITY;
ALTER TABLE availability ENABLE ROW LEVEL SECURITY;
ALTER TABLE appointments ENABLE ROW LEVEL SECURITY;
-- Politiques RLS pour Profiles
CREATE POLICY "Les utilisateurs voient leur propre profil" ON profiles FOR SELECT USING (auth.uid() = id);
CREATE POLICY "Les thérapeutes sont visibles par tous" ON profiles FOR SELECT USING (role = 'therapist');
-- Politiques RLS pour Services
CREATE POLICY "Tout le monde peut voir les services" ON services FOR SELECT USING (true);
CREATE POLICY "Les thérapeutes gèrent leurs propres services" ON services FOR ALL USING (auth.uid() = therapist_id);
-- Politiques RLS pour Appointments
CREATE POLICY "Les patients voient leurs rendez-vous" ON appointments FOR SELECT USING (auth.uid() = patient_id);
CREATE POLICY "Les thérapeutes voient leurs rendez-vous" ON appointments FOR SELECT USING (auth.uid() = therapist_id);
CREATE POLICY "Les patients créent leurs rendez-vous" ON appointments FOR INSERT WITH CHECK (auth.uid() = patient_id);
-- Commentaire descriptif
COMMENT ON TABLE appointments IS 'Gère les réservations de créneaux entre patients et thérapeutes avec statut de paiement.';Roadmap & estimation
MVP : Le Moteur de Réservation Cœur
- →Configuration du schéma Supabase et des RLS pour la sécurité
- →Design de l'identité visuelle et de la landing page UI
- →Implémentation de l'authentification avec rôles (Thérapeute/Patient)
- →Construction du moteur de réservation en 3 étapes
- →Connexion de Stripe Checkout pour la confirmation des séances
V2 : Automatisation & Dashboard
- →Ajout du tableau de bord thérapeute avec analytics de revenus
- →Implémentation des rappels Email automatisés via Resend
- →Création d'un portail patient pour voir et décaler les séances
- →Gestion des disponibilités avec synchro Google Calendar
V3 : Scalabilité & Conformité
- →Ajout des notifications SMS via l'intégration Twilio
- →Support multi-thérapeutes pour cliniques (Multi-tenancy)
- →Développement des notes chiffrées pour dossiers patients
- →Lancement de la PWA iOS/Android pour usage mobile
Envie d'aller plus loin ?
Téléchargez le guide PDF complet pour maîtriser Lovable de A à Z.
Voir les guides