Stefcos · Product builder
Stefcos, un e-commerce avec son back-office de commandes
Boutique en ligne d'une marque de cosmétiques pour peaux noires et métissées, construite avec Claude Code, et tableau de bord qui remplace la ressaisie manuelle des commandes.
- Rôle
- Product builder
- Période
- Tableau de bord livré en avril 2026
- Outils
- Claude Code, React, TypeScript, Supabase, Resend, GitHub Actions
- Équipe
- Moi, Claude Code, l'assistante de la marque (utilisatrice principale)
Contexte
Stefcos est une marque de cosmétiques pour peaux noires et métissées, basée à Lomé. Le site présente la boutique, la philosophie de la marque et un journal, et prend les commandes en ligne.
Le site a été construit avec Claude Code et se déploie automatiquement sur GitHub Pages via GitHub Actions. Un tableau de bord d'administration s'y est ajouté en avril 2026.
Le problème
Les commandes arrivaient par WhatsApp Business. L'assistante les ressaisissait une à une dans un Google Sheet relié par Apps Script, qui servait aussi au suivi des livraisons et des coursiers.
- Chaque commande était saisie deux fois : dans WhatsApp, puis dans le tableur.
- Le suivi vivait dans un outil séparé du site, sans vue d'ensemble de l'activité.
- Aucun indicateur consolidé : chiffre d'affaires, commandes en attente de paiement ou en livraison.
Mon rôle
Cadrage produit
Définition du besoin, priorisation des fonctionnalités, parcours de commande et d'administration.
Architecture
Choix de la stack : React et TypeScript pour le front, Supabase pour l'authentification, la base de données, la sécurité par ligne et le stockage, Resend pour les emails.
Pilotage de Claude Code
Rédaction des prompts, découpage du travail, revue du code généré à chaque étape.
Recette et évolution
Tests fonctionnels avant chaque mise en ligne, puis toute l'évolution technique du produit dans la durée.
Démarche
L'IA génère le code ; le travail produit reste le même : comprendre l'usage réel, découper, valider.
- 01
Observer le flux existant
Partir du circuit réel de l'assistante : WhatsApp, tableur, coursiers. Le tableau de bord devait reprendre ses gestes, pas en imposer de nouveaux.
- 02
Construire la boutique
Site en React 18, TypeScript, Vite, React Router, Tailwind, shadcn/ui et TanStack Query, déployé en continu sur GitHub Pages.
- 03
Ajouter le back-office
Authentification, base de données et règles de sécurité par ligne sur Supabase ; emails transactionnels avec Resend.
- 04
Recetter et faire évoluer
Recette avant chaque mise en ligne, puis évolutions pour l'assistante, qui gère les commandes au quotidien.
Réalisations
Impact
Le suivi des commandes vit désormais dans le site, en trois onglets.
- Indicateurs clés et chiffre d'affaires en FCFA : du jour, du mois, total, panier moyen.
- Commandes : recherche, filtres par statut, paiement et période, création et modification.
- Coursiers : zone, disponibilité et livraisons du jour.
- Fin de la ressaisie dans un tableur séparé.
Enseignements
- Avec l'IA, le goulot d'étranglement n'est plus d'écrire le code mais de bien cadrer : un prompt vague produit un produit vague.
- Un back-office réussi reprend les gestes existants de l'utilisatrice avant d'en ajouter.
- Garder la main sur l'architecture et la sécurité (règles par ligne, authentification) reste un travail humain.
