Morel Luxury E-commerce Store
A high-end editorial shopping experience and business intelligence platform with interactive 3D card flips, Ctrl+K command palette, and a passcode-protected admin analytics dashboard.
About the Project
MØREL is a production-grade, luxury e-commerce web application and business intelligence platform. It delivers a high-end editorial shopping experience for customers alongside a password-protected analytics dashboard for store management. Built using modern frontend frameworks and library systems, the platform focuses on extreme visual quality, rich animations, and state-of-the-art developer architecture.
System Architecture & Workflow
MØREL is architected as an interactive Single Page Application (SPA) leveraging React Context for robust state management and Motion for hardware-accelerated animations:
Storefront
React 18 & Motion UI
Passcode Gate
Admin Verification (PIN)
BI Metrics
Revenue Trajectory (Recharts)
Inventory Control
Low-Stock Warnings & Filters
Key Features
The platform offers customer storefront experiences and administrative intelligence capabilities:
Global Cart & Wishlist: Real-time price tracking, local tax calculations, and a $200 free-shipping progress tracker.
Ctrl+K Command Palette: Keyboard-driven search, instant page navigation, and one-click dark/light theme switching.
Passcode-Protected Admin Portal: Accessible via 'Staff Portal' in the footer (PIN: 1234 or admin123). Renders Executive KPIs, Revenue charts, and Inventory alerts.
Interactive 3D Credit Card: Card preview flips in 3D space when users toggle form fields (CVV/Name/Number) during checkout.
Editorial UX: Premium typography, glassmorphic elements, split-screen logins, and address CRUD forms.
Tech Stack
Modern Web Stack optimized for speed, safety, and visual polish:
React 18 & TypeScript 5.7 (for modularity and complete compile-time type safety)
Vite 6 (for instantaneous HMR and asset bundling)
Tailwind CSS v4 (for glassmorphic utilities and custom theme tokens)
Motion (for hardware-accelerated fluid layout transitions)
Recharts (for SVG-based responsive data graphs)
React Router v7 (for client-side routing & search parameter synchronization)