Créer une application de réservation avec Coderblock, étape par étape

Ce que vous allez créer

Dans ce tutoriel, vous allez créer une application de réservation complète dans laquelle les clients peuvent s’inscrire, consulter les créneaux disponibles, prendre rendez-vous et gérer leurs réservations. Le personnel disposera quant à lui d’un tableau de bord d’administration pour consulter et mettre à jour les rendez-vous. Coderblock génère le frontend React, la logique backend, la base de données Postgres, l’authentification et les politiques de sécurité à partir de requêtes en langage naturel. Vous piloterez le développement directement dans le chat, sans avoir à écrire manuellement les routes API, le code d’authentification ou les migrations de base de données.

1. Lancez le projet

Créez un nouveau projet dans Coderblock. Vous pouvez partir du modèle pour les plateformes de réservation ou décrire votre application à partir de zéro. Pour commencer avec une solution personnalisée, vous pouvez utiliser une instruction comme celle-ci :

Crée une application de réservation responsive pour un centre de bien-être. Les visiteurs doivent pouvoir consulter les services et les créneaux disponibles. Les clients inscrits peuvent réserver, reprogrammer ou annuler des rendez-vous. Le personnel a besoin d’un tableau de bord d’administration pour gérer les services, les horaires et les réservations. Utilise un design épuré et apaisant, optimisé pour les appareils mobiles.

Précisez le type d’activité, les utilisateurs de l’application, la durée des rendez-vous et le style visuel souhaité. Plus vous fournissez de contexte à l’agent, plus la première version répondra à vos besoins.

2. Générez et vérifiez la première version

Coderblock génère une véritable application full-stack en utilisant React, Vite, TypeScript et Tailwind CSS pour le frontend. L’application bénéficie également d’un projet Supabase dédié comprenant Postgres, l’authentification, le stockage et la Row Level Security.

Ouvrez l’aperçu de développement en direct à l’adresse .coderblock.dev de votre projet. Pendant que vous poursuivez votre travail dans le chat, les modifications sont appliquées et affichées en quelques secondes. Avant d’ajouter de nouvelles fonctionnalités, vérifiez les principaux écrans :

• Page d’accueil
• Liste des services
• Calendrier des disponibilités
• Formulaire de réservation
• Espace personnel du client
• Tableau de bord du personnel

Si un élément ne fonctionne pas ou ne correspond pas à ce que vous aviez imaginé, demandez des modifications ciblées plutôt que de repartir de zéro. Par exemple :

Rends les cartes des services plus compactes, ajoute la durée et le prix sur chaque carte et garde le récapitulatif de la réservation visible sur ordinateur.

Ou :

Sur mobile, affiche d’abord la sélection du service, puis le calendrier et enfin les créneaux disponibles.

3. Définissez les données de réservation

Décrivez maintenant à l’agent les informations que l’application devra gérer. Dans cet exemple, les principales données concernent les services, les membres du personnel, les disponibilités, les réservations et les profils des clients. Vous pouvez utiliser une instruction comme celle-ci :

Crée la structure de la base de données pour les services, le personnel, les disponibilités hebdomadaires, les dates bloquées et les réservations. Chaque réservation doit inclure le client, le service, le membre du personnel, l’heure de début, l’heure de fin, le statut, les notes et le statut du paiement. Ajoute les relations et les index appropriés.

L’agent conçoit le schéma Postgres et exécute les migrations. Vous pouvez consulter les tables obtenues dans l’onglet Backend de l’éditeur, ainsi que les utilisateurs authentifiés, le stockage et les fonctions. Pour faciliter les premiers tests de l’interface, vous pouvez également lui demander d’ajouter quelques données initiales :

Ajoute trois exemples de services avec des durées et des prix différents, deux membres du personnel et leurs disponibilités pour les deux prochaines semaines.

4. Ajoutez la connexion et les autorisations des utilisateurs

Chaque application comprend déjà une table de profils et une structure de base pour les rôles. Vous pouvez maintenant demander à Coderblock de créer l’ensemble de l’expérience de gestion des comptes :

Ajoute l’inscription et la connexion des clients par e-mail et mot de passe. Protège la page des réservations des clients et le tableau de bord du personnel. Les clients doivent uniquement pouvoir consulter et modifier leurs propres réservations. Le personnel peut gérer l’ensemble des services, des horaires et des réservations.

L’agent configure Supabase Auth, la gestion des sessions, les routes protégées et la Row Level Security de Postgres. Vous n’avez pas besoin de créer une table personnalisée pour les mots de passe ni d’écrire manuellement le code des JWT ou du hachage des mots de passe. Si vous souhaitez également proposer une connexion via les réseaux sociaux, demandez-la explicitement. À ce stade, testez les deux rôles : connectez-vous en tant que client puis en tant que membre du personnel, et vérifiez que chaque utilisateur ne peut voir que les données et utiliser que les actions auxquelles il est autorisé à accéder.

5. Créez des règles de disponibilité fiables

Un système de réservation ne se résume pas à un simple calendrier. Les créneaux disponibles doivent tenir compte des horaires de travail, de la durée du service, des réservations existantes et des éventuelles périodes bloquées. Décrivez directement ces règles en langage naturel :

Génère les créneaux disponibles en fonction des horaires de chaque membre du personnel. Exclue les dates bloquées et les réservations existantes, prévois un intervalle de 15 minutes entre les rendez-vous et empêche les clients de réserver des horaires déjà passés.

Il est également important de gérer les demandes simultanées :

Empêche les doubles réservations au niveau de la base de données et du backend, même si deux clients choisissent presque simultanément le même créneau. Affiche un message clair si un créneau n’est plus disponible avant la confirmation.

Testez des services de différentes durées, des rendez-vous proches de l’heure de fermeture, des annulations et des journées sans aucune disponibilité restante.

6. Créez les parcours des clients et des administrateurs

Le parcours client doit être simple et prévisible : choisir un service, sélectionner un membre du personnel si nécessaire, choisir un horaire, confirmer les informations et recevoir la confirmation de la réservation. Vous pouvez l’affiner avec une instruction comme celle-ci :

Ajoute un écran de confirmation final qui affiche le service, le membre du personnel, la date, l’heure, la durée et le prix. Après la réservation, redirige le client vers la section Mes réservations, où il pourra reprogrammer ou annuler ses futurs rendez-vous.

Pour le personnel, demandez plutôt une vue plus opérationnelle :

Ajoute un tableau de bord d’administration avec des vues quotidiennes et hebdomadaires des réservations, des filtres par membre du personnel et par statut, ainsi que des commandes permettant de confirmer, de terminer ou d’annuler une réservation. Inclus des cartes récapitulatives pour les réservations du jour et les prochains rendez-vous.

7. Vérifiez et testez l’ensemble de la stack

Testez maintenant l’application avec différents utilisateurs. Créez deux comptes clients et un compte pour le personnel, puis vérifiez que :

• Les visiteurs non authentifiés ne peuvent pas accéder aux pages protégées.
• Les clients ne peuvent pas consulter les réservations d’autres clients.
• Le personnel peut gérer les réservations, tandis que les clients ne peuvent pas accéder aux commandes d’administration.
• Les créneaux annulés redeviennent disponibles lorsque cela est prévu.
• Les réservations non valides ou en conflit sont refusées.
• L’interface reste facile à utiliser sur ordinateur comme sur mobile.

Lorsque vous rencontrez un problème, décrivez directement dans le chat ce que vous avez fait et ce qui aurait dû se produire. Par exemple :

Lorsqu’un client annule un rendez-vous, le créneau reste indisponible. Corrige le calcul des disponibilités et ajoute un test pour ce cas.

8. Ajoutez les paiements Stripe, si nécessaire

Si les rendez-vous nécessitent un acompte ou un paiement intégral, vous pouvez demander :

Permets aux clients de verser un acompte de 20 $ lors de la confirmation d’une réservation. Commence en mode test Stripe et mets à jour le statut du paiement de la réservation une fois le paiement terminé.

Dans la configuration par défaut, l’agent peut créer un compte Stripe géré après vous avoir demandé quelques informations, comme le pays et le nom de l’entreprise. Aucune clé API n’est nécessaire et Coderblock gère le webhook de paiement. Vous pourrez ensuite terminer la configuration des paiements et la vérification d’identité à l’aide du lien Stripe fourni par l’agent. Si vous préférez utiliser votre propre compte Stripe, choisissez l’option BYOK. L’agent demande STRIPE_SECRET_KEY au moyen d’une procédure sécurisée dédiée aux variables d’environnement, la stocke côté serveur et enregistre automatiquement le webhook. Ne saisissez jamais d’informations sensibles directement dans le chat ou dans le code généré. Avant de passer en mode production, testez les paiements réussis, annulés et échoués.

9. Publiez l’application de réservation

Une fois tous les tests terminés, cliquez sur Publier. Coderblock déploie l’application en production à l’adresse .coderblock.app correspondante, avec SSL inclus. Les publications suivantes appliquent rapidement les mises à jour. Si vous souhaitez utiliser un domaine personnalisé, ouvrez Paramètres → Domaines. Vous pouvez connecter un domaine existant en suivant l’assistant de configuration DNS ou en acheter un directement dans Coderblock. Dans ce cas, le DNS et le SSL sont configurés automatiquement.

Avant de considérer l’application comme prête, effectuez une véritable réservation de test sur le domaine de production. Vérifiez la connexion, les disponibilités, la gestion des réservations, les paiements s’ils sont activés et le tableau de bord du personnel. Vous disposez maintenant d’une véritable application de réservation full-stack, prête à être utilisée et à continuer d’évoluer grâce au même processus de travail fondé sur le chat.