Lumina Beauty
Beauty and cosmetics e-commerce platform with product filtering and recommendation system.
Project Overview
Cosmetics commerce driven by concern, shade and routine.
Lumina Beauty is a cosmetics storefront where discovery is organised around what the customer is trying to solve rather than around SKUs.
Filtering, recommendations and routine bundling all read from the same enriched product metadata, which keeps suggestions consistent everywhere they appear.
The Challenge
Beauty shoppers buy by concern, shade and routine rather than by SKU, so a conventional grid-and-filter store leaves them stranded between products that look identical in a thumbnail.
The Approach
Products were enriched with concern, shade and ingredient metadata, and that metadata drives filtering, recommendations and routine bundling from a single source of truth.
Core Features
Ingredient-aware product model
Each product carries shade, skin-type and ingredient metadata, which powers both filtering and recommendation logic.
Recommendation engine
Rule-based matching that suggests complementary products from the current item's category, concern and shade family.
Reviews & ratings
Verified review capture with aggregate scoring surfaced on cards, listings and the product detail page.
Routine builder
Multi-step routine bundling so customers add a full regimen to the cart in one action instead of item by item.
Rich media gallery
Zoomable imagery, swatch previews and lazy-loaded assets tuned to keep the largest contentful paint low.
Architecture & Tech
Tech Stack
- React with a component-driven structure, memoised derived state and route-level code splitting to keep interaction snappy.
My Role & Contributions
- Owned the front-end architecture, component library and state management.
- Implemented the full React stack for this project.
- Translated design intent into a responsive, accessible interface across breakpoints.
- Handled client communication, scope decisions, delivery and handover directly.
- Deployed and verified the production build.
Delivery Process
- 01
Discovery & scoping
Requirements distilled into a prioritised scope, user flows and a data model sketch before any code.
- 02
Architecture & design system
Component hierarchy, state boundaries and a token-based visual system defined so screens could be assembled consistently.
- 03
Implementation
Built iteratively with React, shipping vertical slices — data, logic and UI together — instead of layer by layer.
- 04
Hardening & launch
Edge cases, validation, responsive behaviour and performance passes, followed by deployment and post-launch monitoring.
Results & Outcomes
- Shipped to production and publicly reachable at the live URL.
- Responsive from small mobile screens through large desktop layouts.
- Interface patterns reusable across the rest of the product surface.
Related Projects
Lumina (Beauty Platform)
Comprehensive beauty and cosmetics marketplace with vendor management and customer reviews.
Luxelle
Premium beauty and cosmetics landing page built with Angular and Web3 integration.
Town Team
Team-based clothing e-commerce platform with inventory management and team collaboration features.