Greenblood
Une boutique en ligne complète, écrite de zéro : du catalogue au paiement, du back-office à l'IA.
- Rôle
- Conception, design, développement full-stack, sécurité
- Période
- Depuis juillet 2026
- Statut
- En production
- En ligne
- greenbloodcbd.fr (nouvel onglet)
- lignes de TypeScript
- 35 000
- routes API
- 69
- modèles de données
- 23
- fichiers de tests
- 24
- Next.js 15
- React 19
- TypeScript
- Prisma
- MySQL
- Tailwind CSS
- CAWL / Worldline
- Resend
- API Claude
- Web Push
- Zod
- Vitest
D'où part le projet
Greenblood vend des fleurs et des résines de CBD autour de Nice, avec remise en main propre en moins de 2 heures ou dépôt dans la boîte aux lettres. Une activité simple en apparence, mais qui cumule les contraintes : produits réglementés, paiement difficile à obtenir, livraison sur créneaux, clientèle fidèle à récompenser.
Plutôt que de plier la boutique à un thème du marché, Syelem a écrit un moteur e-commerce générique, piloté par ses réglages (nom, couleurs, TVA, zones de livraison, pages légales). Greenblood en est la première instance.
Ce qu'il fallait résoudre
Les grandes plateformes de paiement restreignent la vente de CBD dans leurs conditions d'utilisation, avec un risque de suspension après acceptation. Il fallait un prestataire qui l'accepte, et une intégration capable de survivre aux webhooks en retard ou rejoués.
Le gérant devait pouvoir tout piloter seul, depuis son téléphone : commandes, stocks, codes promo, contenus. Sans jamais publier un texte non conforme au droit français du CBD.
Ce que Syelem a construit
Boutique
- Catalogue à catégories hiérarchiques et variantes (poids, prix, stock par variante)
- Panier persistant, deux modes de livraison et créneaux horaires de remise en main propre
- Codes promo (pourcentage ou fixe, plafond, minimum de panier) et points de fidélité
- Comptes clients : historique, annulation avec remboursement et remise en stock
- Assistant de discussion qui répond à partir des seules données de la boutique
- Avis Google affichés sur la boutique, avec la note moyenne
Back-office
- Tableau de bord : chiffre d'affaires, tendance, top produits, graphique 30 jours
- Rôles ADMIN et MANAGER : les leviers financiers et destructeurs restent réservés
- Suivi des commandes avec historique horodaté et e-mail client à chaque étape
- Notifications web push sur les téléphones de l'équipe à chaque commande payée
- Utilisable sur mobile, y compris installé sur l'écran d'accueil
Croissance
- Campagnes e-mail rédigées par l'IA, relues et testées avant tout envoi
- Blog par campagnes et légendes Instagram
- Audit SEO page par page, corrections proposées puis validées par l'admin
- Contrôle de conformité CBD sur tout texte produit par l'IA avant publication
- Mesure d'audience sans cookie, dans le cadre de l'exemption CNIL
Comment c'est organisé
Une seule application Next.js (App Router) sert la boutique, le back-office et l'API, chacun avec sa propre session. Les routes API sont découpées par domaine ; la logique métier vit dans des modules purs, testés sans base ni réseau.
Interface
Deux groupes de routes : (shop) public et admin, rendus serveur, composants client limités au panier et aux formulaires.
API
69 route handlers par domaine (account, admin, boutique, cawl, chat), validés par Zod, protégés par un contrôle d'origine sur toute mutation.
Métier
Modules purs (fidélité, livraison, promos, conformité) partagés entre l'API, l'interface et les tests.
Données
Prisma sur MySQL, 23 modèles. Montants stockés en centimes, lignes de commande figées au moment de l'achat.
Services
CAWL (Worldline) en Hosted Checkout, Resend pour les e-mails, API Claude pour la rédaction, Web Push.
Les choix qui font la différence
- 01
Un webhook de paiement idempotent
La commande passe de PENDING à PAID une seule fois, même si le prestataire rejoue la notification. Si le webhook tarde, la page de confirmation interroge elle-même l'état du paiement : le client n'est jamais laissé dans le doute.
- 02
Le serveur ne croit pas le navigateur
Au paiement, le panier est entièrement revalidé côté serveur : prix, stock, code promo, points. Le montant envoyé par le client n'est jamais utilisé.
- 03
Un journal plutôt qu'un compteur
Le solde de points n'est jamais écrit directement : chaque mouvement passe par un journal, dans la même transaction. L'invariant « solde = somme du journal » est tenu par construction.
- 04
Des sessions révocables
JWT signés, doublés d'un compteur de version en base : changer de mot de passe invalide immédiatement toutes les sessions existantes, sans attendre leur expiration.
- 05
L'IA propose, l'humain dispose
Articles, e-mails, corrections SEO : rien ne part sans relecture. Chaque texte passe d'abord un filtre de conformité qui bloque les allégations interdites.
Pour qui l'interface est pensée
Un thème sombre et un vert franc, fidèles à la marque, mais une interface qui s'efface devant les produits : photos en grand, prix lisible, formats visibles dès la grille.
Sur mobile, la barre d'achat reste fixée en bas d'écran et le récapitulatif de commande passe avant le formulaire : le client voit ce qu'il paie avant de remplir quoi que ce soit.
Résultat et objectif
Un moteur réutilisable : une nouvelle boutique se configure depuis les réglages, sans toucher au code.
En ligne en production sur greenbloodcbd.fr, avec ses premiers avis clients.