Créez une boutique en ligne de A à Z avec Coderblock

Ce que vous allez créer

Dans ce tutoriel, vous allez créer une boutique en ligne responsive et complète à partir d’une simple description dans le chat.

À la fin, vous disposerez de :

• un catalogue avec des pages détaillées pour chaque produit
• une recherche, des catégories et la gestion des disponibilités
• un panier
• des comptes clients et un historique des commandes protégé
• un paiement Stripe en mode test
• un espace d’administration pour gérer les produits et les commandes
• une véritable base de données Postgres avec Row Level Security
• une version publiée en production avec SSL

Coderblock génère le frontend avec React, Vite, TypeScript et Tailwind CSS, ainsi que le backend et la base de données. Vous pilotez le projet au moyen d’une conversation en langage naturel, sans avoir à configurer manuellement les routes, les migrations de base de données ou les webhooks de paiement.

---

1. Démarrez un nouveau projet pour votre boutique

Ouvrez Coderblock et créez un nouveau projet. Vous pouvez partir du modèle dédié aux boutiques en ligne ou, si vous préférez tout créer de A à Z, commencer simplement par décrire ce que vous souhaitez réaliser.

Par exemple :

Crée une boutique en ligne moderne d’accessoires durables pour la maison. Réalise une page d’accueil responsive, un catalogue de produits, des filtres par catégorie, des pages détaillées pour les produits, un panier, des comptes clients, un paiement avec Stripe, un historique des commandes et un espace d’administration pour gérer les produits et les commandes. Utilise une palette de couleurs neutres et chaleureuses, et rends l’interface accessible sur ordinateur comme sur mobile.

Plus vous fournissez d’informations à l’agent sur le type de produits, le style recherché, les pages importantes et les fonctionnalités nécessaires, plus la première version correspondra à votre idée. Coderblock créera le frontend, le backend et la base de données, puis affichera le résultat dans l’aperçu de développement en direct, accessible à l’adresse .coderblock.dev du projet. Vous pouvez garder le chat et l’aperçu ouverts en même temps afin de voir votre boutique évoluer au fil de votre travail.

---

2. Vérifiez et affinez la boutique

Il est maintenant temps d’explorer ce que vous avez créé. Testez la navigation, la page d’accueil, le catalogue, les pages produit et le panier. Vérifiez le résultat sur ordinateur, mais aussi sur les écrans plus petits des appareils mobiles.

Le premier résultat n’est qu’un point de départ. Vous pouvez continuer à le modifier directement depuis le chat avec des demandes précises.

Par exemple :

• « Rends l’en-tête fixe et garde visible le nombre d’articles dans le panier. »
• « Affiche les produits dans une grille de quatre colonnes sur ordinateur et d’une seule colonne sur mobile. »
• « Ajoute des filtres par catégorie, prix et disponibilité. »
• « Ajoute un état de panier vide avec un lien permettant de revenir au catalogue. »
• « Affiche des produits associés sous la description de chaque produit. »
• « Ajoute des états pour le chargement, les erreurs et l’absence de résultats. »

Les modifications apparaissent en quelques secondes dans l’aperçu en direct. Une bonne méthode consiste à avancer par petites étapes : formulez une ou deux demandes liées à la fois, vérifiez le résultat, puis passez à la modification suivante.

---

3. Créez le modèle de données des produits et des commandes

Une fois la structure de la boutique définie, vous pouvez demander à l’agent de créer le modèle de données nécessaire. Par exemple :

Crée des tables de base de données pour les produits, les catégories, les commandes et les lignes de commande. Chaque produit doit comporter un nom, une description, un prix, une référence SKU, une quantité disponible, une catégorie, une image, un statut actif et des horodatages. Les commandes doivent être associées aux clients authentifiés et inclure le statut du paiement, le statut de traitement, le total et les lignes de commande.

Chaque application web utilise un projet Supabase dédié avec Postgres. Coderblock conçoit le schéma et exécute les migrations nécessaires. Vous pouvez vérifier le résultat directement dans l’onglet Backend, où vous trouverez les tables, les utilisateurs authentifiés, le stockage et les fonctions. Vous pouvez également ajouter quelques produits d’exemple à ce stade :

Ajoute huit produits d’exemple répartis dans trois catégories afin que je puisse tester la boutique. Fais en sorte qu’ils soient faciles à remplacer ultérieurement depuis l’espace d’administration.

Si vos produits ont des besoins particuliers, précisez-les dès le départ. Vous pouvez notamment indiquer s’ils nécessitent plusieurs images, des tailles, des couleurs ou d’autres variantes. Vous pouvez aussi demander à l’agent d’utiliser Supabase Storage pour les images importées et de les associer aux produits correspondants.

---

4. Ajoutez l’authentification et sécurisez les comptes clients

Vous pouvez maintenant créer les comptes clients et protéger leurs informations personnelles ainsi que leurs commandes. Demandez à Coderblock :

Ajoute l’inscription et la connexion des clients, protège les pages de compte et d’historique des commandes, et veille à ce que chaque client puisse uniquement consulter ses propres commandes. Ajoute les rôles administrateur et client.

L’agent configure Supabase Auth, notamment les pages d’inscription et de connexion, la gestion des sessions, les routes protégées et les politiques de la base de données. Chaque application comprend déjà une table de profils et une structure de base pour les rôles. Coderblock applique également la Row Level Security de Postgres en fonction de l’utilisateur authentifié. Ainsi, chaque client peut uniquement accéder à ses propres données, tandis que les administrateurs peuvent recevoir les autorisations nécessaires pour gérer les produits et les commandes.

Vous n’aurez pas à créer de table personnalisée pour les mots de passe ni à écrire manuellement le code de gestion des JWT ou de hachage des mots de passe. Si vous souhaitez également proposer la connexion via les réseaux sociaux, vous pouvez demander :

Ajoute la connexion via les réseaux sociaux en complément de l’authentification par e-mail et mot de passe.

À ce stade, vérifiez le fonctionnement avec des comptes distincts pour le client et l’administrateur. Assurez-vous qu’un client ne puisse ni ouvrir les pages d’administration ni consulter les commandes d’un autre client.

---

5. Créez le panier et le parcours de paiement

Avant de configurer les paiements, assurez-vous que le panier fonctionne comme prévu. Vérifiez que les clients peuvent :

• ajouter des produits
• modifier les quantités
• supprimer des articles
• consulter les totaux mis à jour

Lorsque le panier est prêt, vous pouvez demander à l’agent d’ajouter Stripe :

Permets aux clients de régler leur panier avec Stripe. Commence en mode test, crée les produits et les tarifs nécessaires, enregistre les commandes finalisées et affiche des pages claires pour les paiements réussis et annulés.

Par défaut, Coderblock peut créer un compte Stripe géré pour le projet. L’agent vous posera quelques questions simples, comme le pays et le nom de l’entreprise. Vous n’aurez pas à fournir de clés API : Coderblock gère le webhook de paiement et vous fournira un lien hébergé par Stripe pour terminer ultérieurement la configuration des paiements et la vérification d’identité. Si vous préférez utiliser votre propre compte Stripe, vous pouvez demander l’option BYOK. L’agent vous demandera STRIPE_SECRET_KEY au moyen d’une requête sécurisée pour les variables d’environnement. La valeur est conservée dans le coffre-fort de secrets côté serveur du projet et n’est ajoutée ni au code généré ni au chat standard. Le webhook est enregistré automatiquement. Commencez toujours en mode test.

Effectuez plusieurs achats de test et vérifiez que les paiements réussis créent correctement les commandes et leurs lignes associées. Testez également un paiement annulé et un paiement refusé. N’activez les paiements réels que lorsque l’ensemble du parcours fonctionne comme prévu.

---

6. Ajoutez l’espace d’administration

Une boutique a également besoin d’un espace réservé aux personnes qui la gèrent. Vous pouvez demander à l’agent :

Crée un tableau de bord d’administration protégé dans lequel les administrateurs peuvent ajouter, modifier, activer et désactiver des produits, importer des images, mettre à jour les stocks, consulter les commandes et modifier leur statut de traitement. Ajoute des cartes récapitulatives pour les commandes et le chiffre d’affaires.

Vérifiez chaque action directement dans l’aperçu. Assurez-vous, par exemple, qu’une modification apportée à un produit apparaît immédiatement dans la boutique et qu’un client standard ne puisse pas accéder au tableau de bord d’administration. Vous pouvez également ajouter des contrôles pour éviter les erreurs :

Empêche la saisie de prix et de quantités négatifs, rends obligatoires le nom et la référence SKU du produit, et demande une confirmation avant de désactiver un produit.

De la même manière, vous pouvez demander des états vides explicites, des messages d’erreur et des fenêtres de confirmation avant les actions destructives.

---

7. Testez l’intégralité du parcours d’achat

Avant de publier la boutique, suivez l’intégralité du parcours comme le ferait un client.

1. Parcourez et filtrez les produits.
2. Ouvrez la page d’un produit.
3. Ajoutez des articles au panier et modifiez les quantités.
4. Créez un compte ou connectez-vous.
5. Effectuez un paiement de test avec Stripe.
6. Ouvrez la page de l’historique des commandes.
7. Connectez-vous en tant qu’administrateur et vérifiez la commande.
8. Mettez à jour son statut de traitement.

Ne vous limitez pas au scénario idéal. Testez aussi la boutique sur mobile, vérifiez ce qui se passe lorsqu’un produit est indisponible et assurez-vous que les états vides ainsi que les messages d’erreur sont faciles à comprendre. Si vous trouvez un dysfonctionnement, vous n’avez pas besoin de modifier le code manuellement. Décrivez dans le chat ce que vous voyez et le comportement que vous souhaitez obtenir.

---

8. Publiez la boutique et connectez un domaine

Une fois tous les tests terminés, vous pouvez publier la boutique. Cliquez sur Publier et Coderblock déploiera l’application en production à une adresse .coderblock.app, avec SSL inclus. Les publications suivantes peuvent être effectuées au moyen de mises à jour à chaud rapides.

Si vous souhaitez utiliser un domaine personnalisé, ouvrez Paramètres → Domaines. Vous pouvez connecter un domaine que vous possédez déjà en suivant l’assistant de configuration des enregistrements DNS, ou en acheter un directement dans Coderblock grâce au paiement intégré. Dans ce dernier cas, le DNS et le SSL sont configurés automatiquement. Avant de promouvoir publiquement votre boutique, terminez l’onboarding Stripe et passez du mode test aux paiements réels. Effectuez également une dernière commande réelle et vérifiez que l’enregistrement correspondant est correctement ajouté à la base de données.

Votre boutique est en ligne

Vous avez désormais transformé une simple description en une véritable boutique en ligne full stack, avec un catalogue, des comptes, un panier, des paiements, une base de données et un espace d’administration. Et surtout, le travail ne s’arrête pas à la publication : vous pouvez continuer à améliorer votre boutique depuis le même chat, en ajoutant de nouvelles fonctionnalités et en perfectionnant celles qui existent déjà, sans interrompre votre flux de travail.