Lumière Parfums
Une boutique de parfums avec filtres par notes, fiches produits et panier persistant.
Conçu comme une démonstration fonctionnelle pouvant servir de base à une solution métier personnalisée.
Consulter les preuves
Consultez le code, le modèle de données et les tests dans le dépôt.
Ce que j’ai construit
- Boutique e-commerce sur mesure et mise en valeur éditoriale de la marque
- Moteur de recherche multicritère (familles olfactives, accords, notes, genre)
- Décomposition interactive des pyramides olfactives (notes de tête, cœur et fond)
- Panier d'achat latéral persistant avec maintien de session sans rechargement
- Interface d'administration pour la gestion du catalogue, des prix et des stocks
Le Défi de la Vente de Parfums en Ligne
Vendre du parfum en ligne diffère fondamentalement des produits que l'on peut immédiatement évaluer. Un visiteur ne pouvant pas sentir une fragrance à travers un écran, les grilles e-commerce classiques ne fournissent pas le contexte nécessaire pour comparer et choisir sereinement.
Découverte Structurée & Parcours d'Achat Fluide
Une boutique numérique sur mesure articulée autour de la découverte olfactive, d'une présentation éditoriale soignée et d'un parcours d'achat sans friction. La plateforme associe recherche par accords et pyramides de notes à un panier persistant et un espace d'administration.
03 / EXPÉRIENCE PRODUIT
Fonctionnalités & Parcours Utilisateur
Découverte Olfactive & Filtres par Accords
Un système de filtrage permettant d'explorer les fragrances par famille olfactive (boisée, florale, ambrée, fraîche), notes spécifiques, concentration et prix, sans rechargement de page.
Permet aux visiteurs de parcourir le catalogue selon des caractéristiques olfactives concrètes au lieu de s'en remettre au seul nom du produit ou au visuel.
Interface de recherche par catalogue avec filtrage multi-critères, sélection de notes et recherche instantanée
Présentation Éditoriale & Pyramides Olfactives
Des fiches produits détaillées présentant l'histoire du parfum accompagnée d'une décomposition éditoriale des notes de tête (départ), de cœur (corps) et de fond (sillage).
Apporte le contexte olfactif sur l'évolution du parfum, aidant le client à appréhender la fragrance sans test physique.
Fiche produit éditoriale détaillant la composition, la pyramide olfactive et les formats
Panier Persistant & Parcours de Commande
Un tiroir latéral de panier réactif conservant l'état de la sélection durant toute la session de navigation, avec ajustement instantané des quantités et sous-total clair.
Conçu pour garder le panier accessible à tout moment sans interrompre la visite du catalogue.
Panier latéral persistant avec contrôle des quantités, sous-total détaillé et accès direct à la commande
Gestion des Données Boutique & Administration
Un espace d'administration dédié pour gérer les fiches du catalogue, ajuster les niveaux de stock, modifier les descriptions et suivre les commandes.
Relie la boutique en ligne à la gestion opérationnelle quotidienne, assurant un contrôle administratif direct sur les données du catalogue.
Portail d'administration pour la gestion des stocks, des fiches produits et des commandes
04 / ARCHITECTURE TECHNIQUE
Fondations Techniques & Architecture
Architecture Next.js App Router
Développé avec Next.js App Router et TypeScript pour des transitions fluides, des composants modulaires et une mise en page responsive.
Moteur de Recherche Côté Client
Algorithme de filtrage multi-critères instantané côté client permettant d'affiner le catalogue par notes et accords sans latence.
Continuité de l'État Local (LocalStorage)
Synchronisation du stockage local garantissant la préservation du panier et des préférences tout au long de la visite.
Espace d'Administration Structuré
Interface de gestion structurée séparant l'expérience client publique des contrôles d'inventaire et des données de la boutique.
05 / DÉCISIONS TECHNIQUES
Choix techniques et compromis
Moteur de Recherche Multicritère Côté Client
Exécution du filtrage du catalogue directement en mémoire client plutôt que de multiplier les requêtes serveur à chaque sélection.
Les utilisateurs explorant des produits sensoriels modifient fréquemment leurs critères olfactifs ; le filtrage en mémoire offre un retour visuel instantané sans latence réseau.
Décomposition Structurée des Pyramides Olfactives
Structuration des fiches produits en trois niveaux (notes de tête, de cœur et de fond) avec indicateurs visuels d'évolution.
Traduire l'évolution olfactive en données visuelles claires permet à l'acheteur en ligne de comprendre l'évolution du parfum au fil des heures sans test physique préalable.
Persistance du Panier via LocalStorage
Synchronisation des articles du panier dans le stockage local du navigateur avec affichage en tiroir latéral.
Préserve les sélections du panier lors de la navigation sans imposer de compte client ni surcharger le serveur avec des sessions temporaires.
06 / ENSEIGNEMENTS & RETOUR D'EXPÉRIENCE
Ce que ce projet a démontré
Conception Numérique pour Produits Sensoriels
Ce projet a démontré comment une architecture de l'information soignée et une mise en récit éditoriale permettent de valoriser efficacement des produits sensoriels en ligne.
Structuration des Parcours d'Achat Persistants
L'intégration d'un panier latéral persistant a confirmé l'importance de permettre la vérification des articles et l'ajustement des quantités sans quitter la découverte du catalogue.
Déploiement direct accessible en temps réel sur Vercel
Consultez l’implémentation et son historique.
Consultez les mises en page dans les captures et la démo.
Découvrez l’architecture et les choix de cette étude de cas.
Explorer l'Application en Direct
Accédez immédiatement au tableau de bord et aux fonctionnalités dans un environnement de test sécurisé.
🔒 Environnement en lecture seule · Données de test
FRONT-END & DÉCOUVERTE PRODUIT
Intéressé par les interfaces produit et l'expérience e-commerce ?
Échangeons autour de l'architecture d'interface, de la gestion d'état côté client, de la découverte sensorielle ou de collaborations techniques.
Vous souhaitez explorer d'autres applications web et systèmes opérationnels ? Voir tous les projets sélectionnés →