Étude de cas
Atelier Orbe
Une boutique e-commerce de céramique artisanale, conçue par Capo Studio pour démontrer un cycle de vente complet — du catalogue au paiement, jusqu'à la gestion des commandes et du stock.
Atelier Orbe, une céramiste qui vendait jusque-là sur commande
Pour cette étude de cas, nous avons imaginé un atelier de céramique du Luberon, en activité depuis une douzaine d'années : production en petites séries, quelques pièces uniques par fournée, une clientèle jusque-là servie par bouche-à-oreille et réseaux sociaux, sans boutique en ligne.
Le problème n'est pas seulement de « vendre en ligne » : c'est de le faire sans jamais survendre une pièce unique, sans exposer de prix falsifiable, et sans que la gestion des commandes ne devienne plus lourde que la production elle-même.
Vendre directement, sans marketplace
Un atelier qui produit en petites séries a besoin de son propre canal de vente, sans commission ni dépendance à un tiers.
Ne jamais survendre une pièce
Une pièce unique ou une série courte ne peut pas être vendue deux fois : le stock doit rester exact, y compris en cas d'achats simultanés.
Encaisser en toute confiance
Accepter un paiement en ligne implique de ne jamais faire confiance à un prix ou un total calculé côté navigateur.
Suivre chaque commande
De la réception du paiement à l'expédition, chaque commande doit avoir un statut clair et un historique consultable.
Ne pas ressembler à un gabarit
Une marque artisanale a besoin d'une identité éditoriale propre, à l'opposé des gabarits e-commerce génériques.
Rester utilisable sans compte
Découvrir le catalogue et remplir un panier ne devrait jamais obliger un visiteur à créer un compte avant d'être prêt à acheter.
Ce que le projet devait accomplir
Huit objectifs ont guidé les choix de design et d'architecture, du premier clic jusqu'au back-office.
Identité éditoriale
Une direction artistique chaleureuse et artisanale, distincte des quatre autres démonstrateurs du portfolio.
Cycle de vente complet
Découverte, catalogue, fiche produit, panier, paiement, commande, préparation, expédition — sans étape manquante.
Paiement sécurisé
Prix relus côté serveur, session Stripe Checkout de test, webhook vérifié et idempotent.
Stock jamais négatif
Réservation atomique avant paiement, contrainte SQL, testée y compris en situation de concurrence.
Back-office complet
Tableau de bord, produits, commandes avec workflow de statuts, stocks, promotions, clients.
Responsive & accessible
Panier et tunnel d'achat utilisables au clavier, sur mobile, avec lecteur d'écran.
SEO & performance
Métadonnées, JSON-LD, sitemap, Server Components par défaut, chargement rapide.
Testé, pas juste démontré
Plus de 100 tests automatisés sur la logique métier sensible : totaux, stock, idempotence.
Découverte → catalogue → panier → paiement
Chaque capture ci-dessous provient directement de l'application en cours d'exécution, pas d'une maquette.
Première impression
Un accueil éditorial, pensé comme un magazine
La page d'accueil pose la promesse de marque (« Des objets façonnés lentement, pensés pour durer »), présente une sélection de produits, les collections, la fabrication artisanale et les pièces rares — sans avis clients fictifs ni argument commercial inventé.
Le visiteur comprend l'univers de la marque avant même d'ouvrir la boutique.
Le catalogue
24 produits, filtres, tri et recherche
Cinq catégories, quatre collections, des variantes de finition et de dimensions, des statuts de stock explicites (en stock, stock faible, épuisé, pièce unique) — chaque produit reflète une donnée réelle du catalogue, jamais un texte générique.
Un catalogue qui se comporte comme une vraie boutique, filtrable et triable sans rechargement complet.
La fiche produit
Variantes, stock et ajout au panier accessibles
Sélection de la finition, quantité bornée par le stock réellement disponible, annonce accessible lors de l'ajout au panier (zone aria-live), description, matière et conseils d'entretien. Sur les pièces à plusieurs coloris, la photo suit la finition choisie plutôt que de rester figée.
Impossible d'ajouter au panier plus d'exemplaires qu'il n'en reste — vérifié dès la fiche produit, puis revérifié côté serveur.
Les collections
Une collection permanente, deux saisonnières, les pièces rares
Argile & Cendre (permanente), Lumière du Matin et Veillée d'Hiver (saisonnières), Pièces Rares (exemplaires uniques, jamais reproduits) — chaque collection a sa propre page et son propre sous-ensemble de produits.
Une structure de navigation qui reflète comment l'atelier organise réellement sa production.
Le panier
Persistant, sans compte, toujours revérifié
Le panier vit dans le navigateur (localStorage) et reste utilisable sans authentification. Dès l'affichage, chaque ligne est reprix côté serveur : le prix et le stock affichés ne viennent jamais de la mémoire locale.
Un code promotionnel appliqué, un total, une livraison offerte au-delà d'un seuil — tout est recalculé, jamais simplement affiché.
La commande
Compte client requis, paiement Stripe réel en mode test
Finaliser une commande suppose un compte (adresses et historique en dépendent) et redirige vers une véritable session Stripe Checkout — pas un bouton « simuler » : carte de test, 3-D Secure le cas échéant, tout le parcours réel de Stripe, sans qu’un centime ne soit débité.
Le tunnel d'achat démontré est celui qui tournerait en production, pas une version allégée pour la démo.
La confirmation rappelle explicitement qu'il s'agit d'une simulation : aucun paiement réel n'a eu lieu, aucun colis n'est expédié.
Architecture
Un site qui fonctionne avec ou sans base connectée
Toute page passe par une couche d'accès aux données qui bascule automatiquement entre Supabase (si configuré) et un catalogue de démonstration local strictement équivalent. Aucune page ne sait elle-même quelle source l'alimente.
Catalogue démo ↔ Supabase
Même jeu de données (24 produits, 5 catégories, 4 collections) exposé localement ou depuis une vraie base.
RLS explicite par table
Lecture publique limitée aux produits publiés, un client ne lit que ses propres commandes, un admin a un accès élargi via une fonction dédiée.
Démo publique isolée
La vitrine publique du back-office n'interroge jamais Supabase, même configuré : uniquement des données de démonstration locales.
/demo/back-office : un aperçu du back-office accessible sans authentification, strictement en lecture seule.
Ne jamais faire confiance au navigateur
Le cœur technique du projet : chaque prix est relu côté serveur, chaque webhook est vérifié et traité une seule fois, chaque réservation de stock est atomique.
Aucun prix client accepté
Chaque ligne de commande est reconstruite depuis la base (ou le catalogue de démonstration) juste avant paiement — un total falsifié côté navigateur n'a aucun effet.
Webhook Stripe vérifié et idempotent
Signature vérifiée à chaque appel ; l'identifiant d'événement Stripe est inséré en base comme clé primaire, un événement redélivré est donc ignoré plutôt que retraité.
Réservation de stock transactionnelle
Une fonction SQL verrouille les lignes de stock concernées (select ... for update) avant de réserver, empêchant deux achats simultanés de vendre la même dernière pièce.
Réservation à expiration automatique
Une réservation non finalisée (paiement abandonné) libère le stock au bout de 15 minutes, sans intervention manuelle.
Stock jamais négatif
Contrainte CHECK en base de données, doublée d'une fonction de réservation testée unitairement sur des scénarios de concurrence.
De la commande à l'expédition
Un espace protégé par authentification et par rôle, avec un workflow de statuts qui empêche toute transition incohérente.
/admin) tourne sur une base Supabase réelle : la page de connexion ci-dessous est un formulaire d'authentification fonctionnel, pas une maquette — il faut simplement un compte administrateur légitime pour passer la porte.Un vrai formulaire de connexion, pas un écran de façade.
La vitrine publique reste, elle, toujours accessible.
Tableau de bord
Chiffre d'affaires, panier moyen, commandes à préparer et alertes de stock — explicitement présentés comme des données de démonstration.
Produits & stocks
Création et édition de produits, ajustement de stock avec motif (réassort, correction, retour), traçabilité complète.
Commandes
Liste, détail et changement de statut encadré par un workflow (en attente, payée, en préparation, expédiée, livrée, annulée, remboursée).
Clients & promotions
Vue clients agrégée depuis les commandes, gestion des codes promotionnels avec seuils et limites d'utilisation.
Un panier et un tunnel d'achat qui tiennent sur mobile
La majorité des visites d'une boutique se font sur téléphone : le parcours d'achat devait y être aussi clair que sur desktop.
Accueil
Boutique
Fiche produit
Ce qui existe déjà sur le projet
Cette solution peut évoluer selon vos besoins
Voici des exemples d'évolutions courantes pour ce type de projet, non incluses dans la démonstration.
Éditoriale, chaleureuse, artisanale
Ivoire et charbon pour la structure, terre cuite en accent d'action, sauge pour les statuts positifs — une palette pensée pour évoquer la céramique plutôt que la technologie.
Ivoire
Fond principal, espace et respiration
Charbon
Texte, sections éditoriales sombres
Terre cuite
Accent d'action — CTA, prix, badges
Sauge
Accent secondaire — succès, statuts positifs
Sable
Fonds doux, séparations, finitions produit
Une stack choisie pour la sécurité et la fiabilité
Chaque technologie répond à un besoin précis du cycle de vente, pas à une tendance.
Next.js 16 & React 19
App Router, Server Components par défaut, Turbopack — composants client uniquement là où l'interactivité l'exige (panier, formulaires).
Supabase (PostgreSQL, Auth, RLS)
Base réelle en option : policies RLS explicites par table, fonctions SQL transactionnelles pour la réservation de stock.
Stripe Checkout (mode test)
Session de paiement créée côté serveur avec des lignes reprix, jamais avec des montants transmis par le client.
Tailwind CSS 4
Design tokens dédiés à l'identité éditoriale d'Atelier Orbe, distincts des quatre autres démonstrateurs du portfolio.
React Hook Form & Zod
Validation de chaque formulaire (compte, adresses, commande, back-office) avec messages d'erreur accessibles.
Vitest & Testing Library
Plus de 100 tests : totaux, quantités, réservation de stock concurrente, idempotence du webhook, workflow de statuts.
Vous vendez des produits en ligne, ou souhaitez vous lancer ?
Capo Studio conçoit des boutiques e-commerce sur mesure, sécurisées et administrables, adaptées à votre activité.
Parler de mon projet