ETTEU
Boutique Fragrance // E-Commerce SPA // The Art of Scented Memories
Project Overview
ETTEU is an elegant, boutique e-commerce single-page application (SPA) dedicated to small-batch luxury fragrances. Centered around the concept of “The Art of Scented Memories,” the site serves as a digital storefront for signature perfumes designed to evoke moments of quiet luxury and timeless elegance.
Tech Stack & Architecture
Frontend
Built with React and modern JavaScript (ES2020+ / JSX).
Routing
Implemented React Router (react-router-dom) for seamless, client-side page navigation without full reloads.
Styling & UI
Crafted a responsive, high-end aesthetic using vanilla CSS (heavily utilizing Flexbox and CSS Grid), co-located per component.
State Management
Bypassed heavy libraries like Redux in favor of the React Context API, creating a custom CartContext for lightweight, efficient global state management.
Data & Persistence
Engineered a serverless architecture where product data acts as a local database (products.js). The shopping cart state is persisted across sessions using browser localStorage.
Hooks & Patterns
Extensively used modern React hooks (useState, useEffect, useMemo, useContext) and developed a custom useCart() hook to keep component logic modular and clean.
Build & Tooling
Powered by Vite for lightning-fast HMR and optimized production bundling, managed via npm, and kept strictly formatted using ESLint.
Key Features & Functionality
- 01
Seamless E-Commerce Experience
A clean, intuitive shopping interface complete with a dedicated shop, persistent cart functionality, and distinct product spotlighting for signature items like the Etteu Classic, Red Rose, and Ocean Breeze.
- 02
Brand Storytelling
The design and copy seamlessly communicate the brand's high-end ethos. Taglines like “bottled like a memory” establish a strong emotional connection with the user.
- 03
Streamlined Navigation
Built with user accessibility in mind, the platform uses a straightforward navigation menu (Home, Shop, About Us, Contact) and integrated touchpoints for customer connection.
Skills Gained
Component-Driven React
Architecting a single-page application as small, reusable components with modern JSX, keeping logic and markup modular and maintainable.
Global State with Context API
Designing a custom CartContext and useCart() hook to share cart state across the app without the overhead of a library like Redux.
Client-Side Routing
Wiring up React Router for instant, reload-free navigation between Home, Shop, About, and Contact views.
State Persistence
Persisting the shopping cart across browser sessions with localStorage, treating a serverless products module as a lightweight local database.
Responsive UI/UX Design
Crafting a high-end, responsive aesthetic with vanilla CSS, Flexbox, and CSS Grid, co-located per component for a clean styling architecture.
Modern Build Tooling
Running a fast Vite dev server with hot module replacement, optimized production builds, npm dependency management, and ESLint enforcement.