Mini Shop
Static Luxury E-Commerce
1 / 5
Role & Responsibility
An editorial minimalist luxury e-commerce web application featuring high-fashion catalog curation, 5-image hero lookbook slideshow, multi-currency conversion (USD, EUR, GBP, JPY, CHF), multi-attribute filtering, interactive quick-view modal, slide-over bag drawer with voucher codes, and a simulated checkout flow with credit card visualizer. Built with React 19, Vite, and 100% client-side static array data.
Impact & Achievements
- Developed key user-facing features and modular components.
- Optimized application performance and responsiveness.
- Collaborated in a cross-functional team using Agile methodologies.
Tech Stack
React 19ViteJavaScriptLucide ReactCSS3localStorage
Editorial & Discovery Interface
Editorial Lookbook & Hero Slideshow
Editorial Flat 2.0 Aesthetic & 5-Slide Visual Carousel
- 5-slide luxury editorial carousel featuring curated seasonal looks with smooth transitions and auto-play controls
- Glassmorphic header with animated global announcement ticker and real-time live search across garments
- Refined Cormorant Garamond editorial serif paired with clean Inter sans-serif typography for high-fashion elegance
Cormorant GaramondInterVanilla CSS
Curated Catalog & Precision Filtering
Multi-Attribute Filtering & Curated Garment Collection
- Multi-category tabs (Outerwear, Knitwear, Tailoring, Essentials, Dresses, Accessories) with real-time counters
- Material and craft chips for filtering garments by Mongolian Cashmere, Italian Wool, Mulberry Silk, and more
- Dynamic sorting by curated editorial ranking, price ascending/descending, and archival special offers
Client-Side FilteringMicro-Animations
Commerce Flow & Client State
Slide-Over Bag & Multi-Currency Engine
Slide-Over Bag Drawer & Currency Engine
- Instant multi-currency conversion across USD ($), EUR (€), GBP (£), JPY (¥), and CHF with locale formatting
- Interactive free shipping progress bar incentivizing increased basket size with celebration unlock state
- Promo voucher code verification with one-click test voucher chips (MINIMAL10, SUMMER20, etc.)
Real-time RatesState Management
Simulated Checkout & State Persistence
Frictionless Simulated Checkout & Local Persistence
- High-resolution quick-view modal with multi-angle photography, size stock availability, and review submission
- Checkout modal with auto-fill demo button, live credit card preview visualizer, and order receipt generation
- Complete client-side persistence for cart items, wishlist, currency preferences, and submitted reviews in localStorage
localStorageReact 19 Hooks