Créer une App avec l'IA : Guide Réservation Fitness

Le cas : Résoudre le cauchemar de la planification des coachs sportifs

Dans l'industrie du fitness en pleine croissance, les coachs indépendants luttent souvent avec un flux de travail fragmenté. Ils utilisent WhatsApp pour les réservations, PayPal pour les paiements et Excel pour le suivi des progrès. Cette fragmentation entraîne des "no-shows" (rendez-vous manqués), un burn-out administratif et des pertes de revenus. Dans ce guide, nous allons créer une app avec l'IA en utilisant Lovable pour concevoir une plateforme unifiée nommée "FlexFlow".

FlexFlow est une solution de réservation et de gestion de clients dédiée aux coachs sportifs. Elle résout trois problèmes majeurs :

1. Planification automatisée : Plus de messages incessants pour trouver un créneau.
2. Sécurité des paiements : L'intégration Stripe garantit que les séances sont payées avant de commencer.
3. Suivi des progrès : Un tableau de bord centralisé pour le coach et le client afin de suivre les entraînements et la nutrition.

À la fin de ce tutoriel, vous disposerez d'une application prête pour la production, professionnelle et fluide, le tout sans écrire une seule ligne de code vous-même. Ce processus, souvent appelé vibe coding, vous permet de vous concentrer sur la logique et l'expérience utilisateur pendant que l'IA gère l'implémentation technique.

Fonctionnalités clés

• Calendrier de disponibilité dynamique : Les coachs définissent leurs horaires et les clients réservent les créneaux libres.
• Paiements Stripe sécurisés : Checkout intégré pour des sessions à l'unité ou des "packs" (ex: 10 séances).
• Tableau de bord client : Un espace privé pour voir les réservations à venir et les notes d'entraînement passées.
• Panneau Admin Coach : Une vue d'ensemble sur le chiffre d'affaires, les créneaux populaires et la liste des clients.
• Rappels emails automatisés : Propulsé par Resend pour réduire drastiquement les rendez-vous manqués.
• Chat en temps réel : Un système de messagerie simple pour les mises à jour de dernière minute.
• Galerie de photos de progression : Stockage sécurisé des photos de transformation via Supabase Storage.
• Design Mobile-First : La majorité des clients réservent leur séance depuis leur smartphone.

Stack & intégrations

• Lovable (Frontend & IA Builder) : Le moteur qui construit nos composants React et gère l'état global.
• Supabase (Backend, Database & Auth) : Gère l'authentification, la base de données PostgreSQL et la sécurité des données (RLS).
• Stripe (Paiements) : Pour les paiements de sessions à l'unité et la gestion des abonnements.
• Resend (Emailing) : Pour envoyer les emails transactionnels (confirmations, rappels).
• Lucide React : Pour une iconographie moderne et cohérente.

Prompts Lovable concrets

1. Design system & identité visuelle

Crée un design system moderne et énergique pour une application de réservation de fitness nommée 'FlexFlow'.
Contexte : C'est la base de l'application pour garantir une cohérence visuelle.
Objectif : Définir une palette qui inspire l'action et le professionnalisme.
Contraintes techniques :
- Modifie index.css pour définir des tokens HSL : Primaire (Orange vibrant #FF5F00), Secondaire (Anthracite profond #1A1A1A), Accent (Vert néon pour les succès/stats).
- Typographie : Utilise 'Inter' pour le corps de texte et une police sans-serif grasse pour les titres.
- Composants Shadcn : Configure un arrondi 'rounded-xl' pour tous les boutons et cartes.
- Mode sombre : Le mode sombre doit être l'expérience par défaut pour un look 'salle de sport premium'.
- Gradients : Crée un dégradé allant de l'orange vers un rose profond pour les sections hero.
- Ombres : Utilise des ombres douces et superposées pour donner de la profondeur aux cartes.
Critères de done : Une page de documentation affichant les couleurs, les variantes de boutons (Primary, Outline, Ghost) et les échelles de texte.

2. Schéma de base de données & RLS

Configure le schéma de base de données pour FlexFlow via Supabase.
Contexte : Nous avons besoin d'une structure solide pour les réservations, les paiements et les utilisateurs.
Objectif : Créer des tables avec relations et des politiques de sécurité RLS.
Contraintes techniques (Supabase Cloud) :
- Table 'profiles' : id (uuid, pk), full_name, avatar_url, role (enum: 'coach', 'client'), bio, hourly_rate.
- Table 'sessions' : id (uuid, pk), coach_id (fk profiles), client_id (fk profiles), start_time (timestamp), end_time (timestamp), status (enum: 'pending', 'confirmed', 'cancelled', 'completed'), payment_status (text).
- Table 'workout_notes' : id (uuid, pk), session_id (fk sessions), content (text), created_at.
- RLS : 
  1. Les utilisateurs voient leur propre profil et celui des coachs. 
  2. Les clients ne voient que leurs propres sessions. 
  3. Les coachs voient toutes les sessions où ils sont le coach_id. 
  4. Seuls les utilisateurs connectés peuvent créer une réservation.
Critères de done : Un script SQL valide dans Supabase avec les 3 tables et les politiques RLS actives.

3. Authentification & onboarding

Construis un flux d'authentification multi-rôles pour FlexFlow.
Contexte : Les utilisateurs doivent s'inscrire et préciser s'ils sont coach ou client.
Objectif : Créer un point d'entrée fluide qui redirige selon le rôle.
Contraintes :
- Inscription : Email/Mot de passe et Google Login.
- Onboarding : Après inscription, un écran demande 'Êtes-vous un Coach ou un Client ?'.
- Champs spécifiques : Si 'Coach', demander la spécialité (Perte de poids, Yoga, HIIT) et le tarif horaire. Si 'Client', demander les objectifs fitness.
- Redirections : Les coachs vont vers /coach/dashboard, les clients vers /client/dashboard.
- Protection : Utilise un composant Layout pour interdire l'accès aux pages coach pour un profil client.
Critères de done : Un flux complet où un nouvel utilisateur est créé dans Supabase avec son rôle correctement enregistré.

4. Fonctionnalité cœur : Calendrier de réservation haute performance

Développe le calendrier de réservation côté client pour FlexFlow.
Contexte : C'est l'écran le plus important où le revenu est généré.
Objectif : Un calendrier intuitif pour réserver une séance avec un coach.
Contraintes :
- Interface : Vue scindée. Gauche : Calendrier (DayPicker) pour choisir la date. Droite : Liste de créneaux d'une heure disponibles (ex: 09:00, 10:00, 11:00).
- Logique : Mise en évidence de la date/heure sélectionnée. Filtrage des créneaux déjà réservés dans la table 'sessions'.
- Interaction : Cliquer sur un créneau ouvre un tiroir (drawer) de confirmation.
- Données : Affiche 'Nom du Coach', 'Durée : 60 min', et 'Prix : 50€'.
- Confirmation : Cliquer sur 'Confirmer et Payer' crée la session avec le statut 'pending'.
Critères de done : Un calendrier fonctionnel où je peux choisir un créneau et voir le récapitulatif avec les données réelles en français.

5. Intégration externe : Paiement Stripe Checkout

Intègre Stripe Checkout pour les séances individuelles de fitness.
Contexte : Les coachs doivent être payés avant que la séance ne soit confirmée.
Objectif : Lier l'action de réservation à une passerelle de paiement sécurisée.
Contraintes :
- Utilise une Edge Function Supabase pour créer une session Stripe Checkout.
- Inclus 'session_id' dans les métadonnées Stripe.
- Success URL : /booking/success?session_id={CHECKOUT_SESSION_ID}.
- UI : Ajouter un bouton 'Payer ma séance' dans le dashboard client pour toute session 'pending'.
- Webhook : À la réception du paiement, mettre à jour 'sessions' : status = 'confirmed' et payment_status = 'paid'.
Critères de done : Un flux complet où le clic sur 'Payer' redirige vers Stripe et revient sur l'app avec un statut mis à jour.

6. Polish, SEO & États vides

Finalise l'app FlexFlow avec un polissage pro et optimisation SEO.
Contexte : L'application doit être prête pour le lancement public.
Objectif : Améliorer l'UX et la visibilité sur les moteurs de recherche.
Contraintes :
- Loading : Ajoute des Skeleton loaders pour le calendrier et les cartes du dashboard.
- Toasts : Utilise la bibliothèque Sonner pour les notifications 'Séance confirmée', 'Erreur de paiement', 'Bienvenue !'.
- Empty States : Illustrations et textes sympas pour 'Aucune séance à venir' ou 'Pas encore de messages'.
- SEO : Configure les balises Meta pour le titre 'FlexFlow : Réservez votre coach sportif en 2 clics' et la description.
- Responsive : Assure-toi que la barre latérale devient une barre de navigation basse sur mobile.
Critères de done : Une application fluide, sans clignotement au chargement, avec des feedbacks clairs pour l'utilisateur.

Pièges courants & solutions

Q : Comment éviter les doublons dans le calendrier ? R : Utilisez une contrainte au niveau de la base de données ou une fonction RPC Supabase. Lors de la réservation, l'IA doit vérifier si une session avec status = 'confirmed' existe déjà pour ce coach à ce start_time précis.

Q : Puis-je proposer des abonnements mensuels plutôt que des séances à l'unité ? R : Oui ! Demandez à Lovable d'ajouter une section "Abonnements". Utilisez Stripe Billing au lieu d'un simple Checkout. La logique est identique : vérifiez le statut is_subscriber dans Supabase avant d'autoriser la réservation.

Q : Que faire si le coach est en retard ou si le client annule ? R : Implémentez une politique d'annulation. Un prompt peut créer un bouton "Annuler" qui n'apparaît que si la séance est dans plus de 24h. Cela déclenche un remboursement via l'API Stripe.

Q : L'application fonctionne-t-elle hors ligne ? R : Les apps Lovable sont des Progressive Web Apps (PWA). Vous pouvez demander à l'IA d'ajouter un manifest.json et un service worker pour que les clients puissent "installer" l'app sur leur écran d'accueil.

FAQ

Faut-il être développeur pour créer cette app ?

Non. Grâce au vibe coding, vous décrivez vos besoins en langage naturel comme montré dans les prompts ci-dessus. Lovable s'occupe de la traduction en code.

Quels sont les coûts de fonctionnement ?

Vous pouvez commencer gratuitement. Lovable offre des crédits gratuits, et Supabase a un forfait gratuit généreux. Vous ne payez que les commissions Stripe (env. 2.9%) et si vous dépassez des millions de données.

Mes données sont-elles sécurisées ?

Oui. En utilisant les politiques RLS (Row Level Security) décrites au point 2, vous garantissez que le Client A ne verra jamais les données du Client B.

Conclusion

Bâtir une plateforme de réservation pro n'est plus un projet de 6 mois pour une équipe de dévs. Avec Lovable AI, vous passez de l'idée au MVP en quelques heures. En vous concentrant sur le fait de créer une app avec l'IA, vous démocratisez l'accès à des outils puissants pour votre business. Prêt à transformer votre activité de coaching ? Commencez l'aventure FlexFlow dès aujourd'hui !

Tester Lovable maintenant | Voir le template démo