Lavande Maison

Le contexte

Les artisans produisant des produits à la lavande de Provence peinent à vendre en ligne : les marketplaces prélèvent des commissions importantes, les templates e-commerce génériques ne mettent pas en valeur le savoir-faire artisanal, et la gestion d'un catalogue multi-types (sachets, bougies, savons, huiles essentielles, sprays, coffrets cadeaux) est complexe avec des solutions clés en main. Lavande Maison est une plateforme e-commerce sur mesure pour la vente directe de produits artisanaux à la lavande. Le défi technique réside dans un catalogue où chaque type de produit possède des attributs uniques — forme et couleur pour les sachets, fragrance et temps de combustion pour les bougies, poids et pureté pour les huiles — gérés par un modèle de données flexible. Livraison en France, Belgique, Suisse et Luxembourg, gratuite dès 39 €.

L'architecture

Le projet se compose de deux applications indépendantes : un frontend React et une API Express.

Le backend Express 4.18 structure les données à travers 4 modèles Sequelize (Order, Product, User, Retractation) dans PostgreSQL 16. Le système de produits repose sur une colonne JSONB pour les attributs dynamiques, associée à un service de validation dédié qui applique des schémas type-spécifiques pour chacun des 6 types de produits. Stripe Checkout gère les paiements avec un mécanisme anti-survente : le stock est décrémenté à la création de la session et restauré si elle expire sans paiement. Les webhooks Stripe confirment les ventes et déclenchent les emails de confirmation via AWS SES, enrichis en Schema.org JSON-LD pour afficher des badges de statut directement dans Gmail. Les images produit sont compressées par Sharp et stockées sur S3 avec distribution CloudFront. Un flux XML Google Shopping est généré automatiquement pour le référencement. La sécurité repose sur JWT avec cookies httpOnly, Helmet, CORS et rate limiting (100 requêtes par fenêtre de 15 minutes).

Le frontend React 18 est construit avec Vite 5, React Router 6 et du CSS vanilla. 27 composants page et 24 fichiers CSS composent un catalogue par type de produit, un panier persistant (React Context avec sauvegarde localStorage), un checkout Stripe et un suivi de commande. Le contenu éditorial comprend un blog (4 articles) et 6 pages de guides cadeaux thématiques (fête des mères, Noël, Secret Santa, petit budget, éco-responsable, maison). Le SEO s'appuie sur des données structurées Schema.org JSON-LD pour les produits, articles, FAQ et commerce local. Le design adopte un violet lavande (#7c5ba8) avec la police Poppins, une approche mobile-first et une esthétique minimaliste centrée sur l'image produit.

Le dashboard admin offre un CRUD complet des produits avec configuration d'attributs JSONB par type, gestion des commandes avec suivi transporteur (Colissimo, Mondial Relay, Chronopost), monitoring du stock avec alertes seuil bas, et gestion des retours dans le respect du droit de rétractation de 14 jours imposé par la loi française.

Les défis techniques

Schéma produit multi-types avec attributs dynamiques. Le catalogue gère 6 types de produits aux attributs radicalement différents : forme, couleur et motif pour les sachets ; fragrance, temps de combustion et type de cire pour les bougies ; poids, pureté et usage pour les huiles essentielles ; composition pour les coffrets cadeaux. La solution repose sur une colonne JSONB dans PostgreSQL, offrant la flexibilité d'ajouter de nouveaux types sans migration de schéma. Un service de validation dédié applique des schémas type-spécifiques avec champs requis, optionnels, types de données et valeurs par défaut. Le compromis : la flexibilité JSONB simplifie l'évolution du catalogue, mais exige une validation rigoureuse côté service pour compenser l'absence de contraintes au niveau de la base.

Gestion de stock anti-survente. Entre la création d'un checkout et la confirmation de paiement, le stock peut être survendu si plusieurs utilisateurs tentent d'acheter les dernières unités simultanément. Le mécanisme de réservation décrémente le stock dès la création de la session Stripe (expiration 30 minutes) et le restaure automatiquement si la session expire sans paiement. Le webhook Stripe confirme la vente et finalise la réservation. Les cas limites à gérer sont les conditions de course à l'expiration de session, les retards de livraison des webhooks et les annulations partielles de commande.

Pipeline d'images et emails structurés. Les images produit uploadées par l'admin transitent par Sharp pour la compression et le redimensionnement, puis sont stockées sur S3 avec distribution CloudFront pour un chargement rapide. Les emails transactionnels (confirmation, expédition, retour) embarquent des données structurées Schema.org JSON-LD, permettant l'affichage de badges de statut de commande directement dans l'interface Gmail. Le flux XML Google Shopping puise dans les mêmes données produit, exigeant une résolution d'URL cohérente entre le CDN et le feed marketing.

L'échelle du projet

• Backend : API Express 4.18, 4 modèles Sequelize, 6 controllers, 4 services, 8 migrations, attributs JSONB multi-types, webhooks Stripe
• Frontend : 27 composants page, 24 fichiers CSS, panier React Context + localStorage, Schema.org JSON-LD, blog + 6 guides cadeaux
• Admin : dashboard complet, CRUD produits, gestion commandes (Colissimo/Mondial Relay/Chronopost), suivi retours
• Infrastructure : AWS SES/S3/CloudFront, Sharp compression, JWT httpOnly, Helmet, CORS, rate limiting, flux XML Google Shopping

L'état actuel

Le site est en production sur lavandemaison.fr. L'ensemble du parcours d'achat est opérationnel, de la navigation au catalogue jusqu'au suivi de commande avec notifications par email. Le dashboard admin gère les produits, les commandes et les retours. Le référencement s'appuie sur les données structurées Schema.org et le flux Google Shopping.