Créer une App Réservation Fitness avec l'IA : Guide Lovable Pro
Découvrez comment créer FitFlow, une app de réservation fitness premium avec Lovable. Guide complet sur le vibe coding, Supabase et les paiements Stripe pour coachs.
Aperçu du projet
Le cas : Résoudre la crise de gestion des coachs sportifs
Créer une application de fitness professionnelle avec l'IA est désormais le moyen le plus rapide de lancer une activité de coaching. Les coachs personnels indépendants et les gérants de petites salles souffrent souvent de la "fatigue administrative" : les allers-retours incessants par SMS, DM et e-mails pour réserver une seule séance. Cette friction entraîne des rendez-vous manqués, des revenus perdus et de l'épuisement professionnel.
Notre objectif est de créer FitFlow, une plateforme de réservation et de gestion haut de gamme. Elle permet aux coachs de présenter leurs services, aux clients de réserver des séances (ponctuelles ou récurrentes) et de gérer les paiements automatiquement via Stripe. En utilisant l'approche "vibe coding" avec Lovable, nous transformons un système de planification complexe en une expérience fluide et mobile-first en seulement quelques heures.
Fonctionnalités clés
- Calendrier Dynamique : Un planning en temps réel où les coachs définissent leurs disponibilités et les clients réservent instantanément.
- Abonnements à Niveaux : Prise en charge des séances à l'unité, des packs de 10 et des abonnements mensuels récurrents.
- Tableau de Bord Client : Un espace privé pour suivre ses progrès, voir ses séances à venir et gérer ses paiements.
- Notifications Automatisées : Rappels par e-mail via Resend pour réduire drastiquement les absences (no-shows).
- Portail Admin Coach : Une vue d'ensemble sur les revenus hebdomadaires, l'assiduité des clients et le taux d'occupation.
- Paiements Sécurisés : Intégration complète de Stripe pour les checkouts et la gestion des abonnements.
- Suivi de Progression : Possibilité pour les coachs de télécharger des notes d'entraînement et des mesures pour chaque client.
- Design Responsive : Interface optimisée pour le mobile, idéale pour les clients qui réservent directement à la salle.
Stack & intégrations
- Frontend & Logique : Lovable.dev (React + Vite + Tailwind CSS).
- Base de données & Auth : Supabase (PostgreSQL, Auth, et Storage).
- Paiements : Stripe (Checkout et Portail Client).
- Communications : Resend (Emails transactionnels pour les confirmations).
- Composants UI : shadcn/ui pour des composants professionnels et accessibles.
Prompts Lovable concrets
1. Design system & identité visuelle
Je construis FitFlow, une application de réservation de coaching sportif premium. Crée un design system moderne et énergique en utilisant des tokens HSL dans index.css.
Objectif : Établir une identité de marque fitness professionnelle qui évoque le haut de gamme et la motivation.
Éléments UI :
- Fond : Anthracite profond/noir (#0a0a0a) pour un aspect "salle de sport pro".
- Primaire : Vert Électrique (hsl(84, 100%, 59%)) pour les boutons d'action et les points clés.
- Accents : Gris ardoise pour les cartes et textes secondaires.
- Typographie : 'Inter' pour le corps de texte, 'Bebas Neue' ou une sans-serif grasse pour les titres.
- Composants : Coins arrondis XL (12px), verre dépoli (glassmorphism) pour les overlays, et effets de lueur néon pour les états actifs.
Contraintes : Mode sombre par défaut, responsive mobile-first, utiliser les conventions de nommage shadcn/ui.
Critères : L'app doit ressembler à une marque premium (style Nike/Equinox) avec des contrastes élevés.
2. Schéma de base de données & RLS
Configure le schéma de base de données Supabase pour FitFlow.
Objectif : Créer un backend robuste pour gérer les coachs, les clients, les réservations et les abonnements.
Tables requises :
- 'profiles' : id (uuid, pk), full_name, role (coach/client), avatar_url, bio.
- 'services' : id, coach_id (fk), title (ex: "Séance 1-sur-1"), description, price, duration_minutes, is_recurring.
- 'bookings' : id, client_id (fk), service_id (fk), start_time, end_time, status (confirmed/canceled), payment_intent_id.
- 'availability' : id, coach_id (fk), day_of_week, start_hour, end_hour.
Contraintes : Activer RLS sur toutes les tables. Les clients ne voient que leurs propres réservations. Les coachs voient toutes les réservations de leurs services.
Critères : Structure SQL propre avec clés étrangères et politiques de sécurité strictes.
3. Authentification & onboarding
Construis le flux d'authentification et de configuration de profil pour FitFlow.
Objectif : Permettre aux utilisateurs de s'inscrire et de choisir leur rôle (Coach ou Client).
Fonctionnalités :
- Page d'accueil séparée : "Je suis un Coach" vs "Je suis un Client".
- Intégration Supabase Auth (Email/Mot de passe + Google).
- Redirection post-inscription : Les coachs vont vers /setup-profile, les clients vers /browse-coachs.
- Formulaire de profil : Nom, upload de photo via Supabase Storage, et (pour les coachs) un éditeur de bio.
Contraintes : Protéger toutes les routes sauf la landing page et les profils publics. Utiliser Lovable Cloud.
Critères : Un onboarding fluide qui capture l'intention de l'utilisateur et met à jour la table 'profiles'.
4. Écran de réservation (Cœur du projet)
Crée l'interface de réservation côté client pour la page de profil d'un coach FitFlow.
Objectif : Une interface de planification à haute conversion qui facilite la réservation.
Fonctionnalités :
- Vue calendrier hebdomadaire affichant les créneaux disponibles.
- Logique de sélection : les créneaux sont générés selon la table 'availability' moins les 'bookings' existants.
- Résumé en pied de page collant : "Séance 1-sur-1 - Vendredi 12 Oct, 10:00 - 60€".
- Bouton "Réserver" déclenchant le flux de paiement.
- Grille responsive pour les créneaux horaires sur mobile.
Contraintes : Récupérer les données en temps réel depuis Supabase. Utiliser date-fns pour le formatage.
Critères : Un flux sans bug où les clients ne peuvent pas réserver de créneaux passés ou déjà pris.
5. Intégration Stripe & Checkout
Intègre Stripe pour les paiements de séances sur FitFlow.
Objectif : Gérer en toute sécurité les paiements uniques et les abonnements.
Logique :
- Clic sur "Réserver" -> Appel d'une Edge Function Supabase 'create-checkout-session'.
- Redirection vers Stripe Checkout avec le bon montant et les métadonnées (service_id, client_id, start_time).
- Succès : Mettre à jour la table 'bookings' en statut 'confirmed' via un Webhook Stripe.
- Lien vers le Portail Client Stripe dans le dashboard pour gérer les cartes bancaires.
Contraintes : Utiliser le SDK Stripe officiel. Vérifier la signature du webhook.
Critères : Une boucle de paiement complète, du bouton "Réserver" au toast de confirmation "Paiement réussi".
6. Polish & SEO
Finalise l'application FitFlow avec des finitions professionnelles et une optimisation SEO.
Objectif : Rendre l'application prête pour la production et découvrable.
Tâches :
- Ajouter des transitions Framer Motion entre les pages.
- Implémenter des "États Vides" (ex: "Aucune séance prévue. Commencez votre entraînement !").
- Meta Tags Dynamiques : Chaque profil de coach doit avoir un titre et une image OG personnalisés (ex: "Entraînez-vous avec [Nom] | FitFlow").
- Loaders squelettes (skeletons) pendant le chargement des données.
- Audit responsive : S'assurer que le calendrier est parfait sur iPhone et Desktop.
Contraintes : Utiliser React Helmet pour le SEO. Mises à jour UI optimistes pour le statut des réservations.
Critères : Une application rapide, fluide, ressemblant à une app native iOS/Android.
Pièges courants & solutions
Q : Comment éviter les doubles réservations simultanées ? R : Utilisez une contrainte de base de données Supabase ou une logique "Vérifier puis Insérer" dans une Edge Function. Avant de confirmer, vérifiez qu'aucun enregistrement n'existe pour ce coach sur le même créneau.
Q : Mon webhook Stripe ne se déclenche pas.
R : Vérifiez que vous avez configuré le endpoint secret dans les variables d'environnement Supabase. Utilisez la CLI Stripe pour tester en local avant de déployer l'Edge Function.
Q : Les clients peuvent-ils annuler eux-mêmes ?
R : Oui, mais implémentez une règle de "24 heures". Dans Lovable, masquez le bouton "Annuler" si le start_time est dans moins de 24 heures.
FAQ
FitFlow est-il conforme RGPD ?
Oui, en utilisant Supabase (hébergement UE possible) et en gérant correctement le consentement des cookies et les politiques de confidentialité via les pages statiques Lovable.
Combien coûtent les crédits Lovable pour ce projet ?
Pour un MVP professionnel complet comme FitFlow, prévoyez entre 400 et 800 crédits, selon la complexité visuelle souhaitée pour le calendrier.
Puis-je ajouter des appels vidéo ?
Absolument. Vous pouvez intégrer l'API Daily.co ou Zoom via une Edge Function pour générer automatiquement un lien de réunion dès qu'une séance est confirmée.
Conclusion
Bâtir une application de réservation premium avec l'IA n'est plus un projet de plusieurs mois. En exploitant le vibe coding et l'intégration profonde de Lovable avec Supabase, vous pouvez lancer FitFlow en un week-end. Commencez par votre design system, sécurisez votre base de données, et laissez l'IA gérer la logique complexe de planification.
Prêt à transformer votre business de coaching ? Commencez à créer sur Lovable dès aujourd'hui.
Maquette interactive
Aperçu statique d'un écran clé du projet.
Revenu du mois
3 450 €
Séances prévues
24
Taux de remplissage
85%
Prochaines séances
| Client | Séance | Heure | Statut |
|---|---|---|---|
| Lucas Martin | Coaching Privé | Aujourd'hui, 14:00 | Confirmé |
| Sophie Durand | HIIT Intensif | Demain, 09:30 | En attente |
| Marc Leroy | Coaching Privé | 15 Oct, 11:00 | Confirmé |
Schéma de base de données
À coller dans Lovable Cloud (Supabase). RLS incluses.
-- Tables principales pour FitFlow
-- Suppression des tables si elles existent pour reset
-- DROP TABLE IF EXISTS bookings;
-- DROP TABLE IF EXISTS availability;
-- DROP TABLE IF EXISTS services;
-- DROP TABLE IF EXISTS profiles;
-- 1. Profils utilisateurs (Coachs et Clients)
CREATE TABLE profiles (
id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,
full_name TEXT NOT NULL,
role TEXT CHECK (role IN ('coach', 'client')) DEFAULT 'client',
avatar_url TEXT,
bio TEXT,
created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL
);
-- 2. Services proposés par les coachs
CREATE TABLE services (
id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
coach_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,
title TEXT NOT NULL,
description TEXT,
price DECIMAL(10,2) NOT NULL,
duration_minutes INTEGER NOT NULL,
is_recurring BOOLEAN DEFAULT false,
created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL
);
-- 3. Disponibilités des coachs
CREATE TABLE availability (
id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
coach_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,
day_of_week INTEGER CHECK (day_of_week BETWEEN 0 AND 6), -- 0 = Dimanche
start_hour TIME NOT NULL,
end_hour TIME NOT NULL,
UNIQUE(coach_id, day_of_week, start_hour)
);
-- 4. Réservations
CREATE TABLE bookings (
id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
client_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,
service_id UUID REFERENCES services(id) ON DELETE CASCADE 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', 'canceled')) DEFAULT 'pending',
payment_intent_id TEXT,
created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL
);
-- 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 bookings ENABLE ROW LEVEL SECURITY;
-- Politiques RLS
CREATE POLICY "Profils publics visibles par tous" ON profiles FOR SELECT USING (true);
CREATE POLICY "Modif propre profil" ON profiles FOR UPDATE USING (auth.uid() = id);
CREATE POLICY "Services visibles par tous" ON services FOR SELECT USING (true);
CREATE POLICY "Coachs gèrent leurs services" ON services FOR ALL USING (auth.uid() = coach_id);
CREATE POLICY "Clients voient leurs bookings" ON bookings FOR SELECT USING (auth.uid() = client_id);
CREATE POLICY "Coachs voient bookings de leurs services" ON bookings FOR SELECT USING (
EXISTS (
SELECT 1 FROM services WHERE services.id = bookings.service_id AND services.coach_id = auth.uid()
)
);
CREATE POLICY "Clients peuvent réserver" ON bookings FOR INSERT WITH CHECK (auth.uid() = client_id);Roadmap & estimation
MVP : Réservation simple & Profils
- →Configuration du Design System & Landing Page dans Lovable
- →Création du schéma Supabase (Profiles, Services, Bookings)
- →Flux d'authentification pour Coachs et Clients
- →Calendrier de réservation de base et logique de créneaux
V2 : Paiements & Analytics
- →Intégration Stripe Checkout pour les séances à l'unité
- →Rappels e-mails automatisés via l'API Resend
- →Dashboard coach avec analyses de revenus
- →Suivi de progression client et notes d'entraînement
V3 : Scalabilité & Rétention
- →Abonnements Stripe pour les forfaits mensuels
- →Intégration d'appels vidéo pour le coaching à distance
- →Déploiement en PWA (Progressive Web App) mobile
- →SEO avancé et configuration de domaine personnalisé
Envie d'aller plus loin ?
Téléchargez le guide PDF complet pour maîtriser Lovable de A à Z.
Voir les guides