Lumière Parfums
A fragrance storefront with note-based filters, product detail pages and a persistent shopping cart.
Built as a working showcase that can serve as a foundation for a customized business implementation.
Inspect the evidence
Review the implementation, data model and tests in the repository.
What I built
- Custom e-commerce storefront with luxury brand storytelling layout
- Multi-criteria fragrance discovery engine (olfactory families, accords, notes, gender)
- Interactive scent pyramid breakdowns (top, heart, and base notes)
- Client-side persistent slide-out shopping cart across browsing sessions
- Store management dashboard for catalog pricing and inventory administration
The Challenge of Online Fragrance Discovery
Selling fragrance online is fundamentally different from selling standard physical goods. Because a customer cannot smell a scent through a screen, standard e-commerce grid layouts fail to provide the context needed for product comparison, leaving shoppers dependent on guesswork.
Structured Discovery & Cohesive Commerce Flow
A custom digital boutique designed around fragrance discovery, editorial product presentation, and a smooth path from browsing to purchase. The platform combines customer-facing olfactory filtering and detailed scent pyramids with persistent cart continuity and an administrative store management portal.
03 / PRODUCT EXPERIENCE
Core Capabilities & Workflow
Olfactory Discovery & Accord Filtering
A dedicated catalog filter allowing shoppers to explore fragrances by olfactive family (woody, floral, oriental, fresh), specific scent notes, concentration, and price points without reloading the page.
Enables customers to navigate a broad fragrance catalog based on concrete scent characteristics rather than guessing from product names or abstract imagery alone.
Catalog discovery interface with multi-attribute accord filtering, notes selection, and instant search
Editorial Product Storytelling & Scent Pyramids
Detailed product pages presenting the fragrance narrative alongside an editorial breakdown of top notes (initial impression), heart notes (core body), and base notes (lasting sillage).
Provides olfactory context and evolution stages, helping customers understand how the fragrance unfolds over time when physical testing is unavailable.
Editorial product presentation detailing the fragrance composition, scent pyramid, and volume options
Persistent Cart & Checkout Journey
A responsive slide-out cart drawer maintaining bag state across the entire browsing session, allowing immediate quantity adjustments and clear subtotal visibility.
Designed to keep bag items accessible throughout browsing without forcing full-page redirects away from catalog discovery.
Persistent slide-out cart drawer with instant quantity controls, itemized subtotals, and direct checkout progression
Store Management & Inventory Administration
A dedicated administrative portal for managing catalog entries, updating inventory counts, editing fragrance descriptions, and tracking order records.
Connects customer-facing shopping with day-to-day store operations, ensuring direct administrative oversight of store data.
Administrative portal for store inventory oversight, product data management, and order records
04 / TECHNICAL ARCHITECTURE
Engineering Foundation & Architecture
Next.js App Router Architecture
Built with Next.js App Router and TypeScript for rapid page transitions, strong component boundaries, and responsive layouts.
Client-Side Discovery Engine
Instant multi-attribute filtering algorithm enabling catalog refinement across notes, accords, and price brackets without reload latency.
Local State Continuity (LocalStorage)
Client-side storage synchronization preserving customer bag selections and preferences throughout browsing sessions.
Administrative Portal Isolation
Protected management interface separating customer storefront browsing from catalog inventory and store data controls.
05 / ENGINEERING DECISIONS
Technical decisions & trade-offs
Client-Side Multi-Attribute Filtering Engine
Executed fragrance catalog filtering directly in client memory rather than triggering server round-trips per filter change.
Shoppers exploring sensory products frequently toggle multiple notes and accords; in-memory filtering delivers instant visual feedback without network lag.
Scent Pyramid Breakdown Architecture
Structured fragrance product data into top, heart, and base note layers with accompanying visual timeline badges.
Translating olfactory progression into scannable digital data helps online shoppers understand how a fragrance develops over hours without physical testing.
LocalStorage Persistence for Cart State
Synchronized bag items to browser LocalStorage alongside a slide-out drawer interface.
Preserves user cart continuity across page navigations without forcing user registration or requiring server-side session databases for exploratory shopping.
06 / REFLECTIONS & LEARNINGS
What This Project Demonstrated
Designing for High-Context Sensory Products
Lumière Parfums demonstrated how structured information architecture and editorial storytelling can present sensory products effectively in an online catalog.
Structuring Persistent Shopping Flows
Implementing a slide-out cart drawer reinforced the importance of allowing users to inspect their bag and adjust quantities without navigating away from catalog discovery.
Deployed interactive web application on Vercel
Read the implementation and browse its history.
Inspect the layouts in the screenshots and demo.
Explore the architecture and decisions in this case study.
Explore the Application Live
Access the dashboard, operational modules, and interactive workflows in a safe, read-only demo environment.
🔒 Read-only environment · Synthetic data
FRONT-END & PRODUCT DISCOVERY
Exploring tailored product interfaces or e-commerce experiences?
Let's connect to discuss interface architecture, client-side state persistence, sensory product discovery, or collaborate on web projects.
Interested in exploring other web applications and operational systems? Explore all selected projects →