LUMIÈRE — Luxury Perfume E-Commerce Platform

A full-stack MERN e-commerce platform for a luxury perfume boutique, featuring a dark gold aesthetic, AI-powered fragrance advisor, Stripe payments, Cloudinary image uploads, and a complete admin dashboard.

---

✨ Features

Buyer (Customer) Side

• Authentication — JWT-secured register/login with persistent sessions
• Product Gallery — Browse with category, gender, price, sort, and keyword filters
• Product Detail — Image gallery, fragrance notes breakdown, size selector, reviews
• Shopping Cart — Add/remove/update quantities; persistent via backend
• Wishlist — Save and manage favourite fragrances
• AI Fragrance Advisor (Lumia) — Claude-powered chat + personalized recommendation engine
• Stripe Checkout — Secure hosted Stripe payment flow
• Order History — View all past orders with real-time delivery status tracker
• Profile — Update personal info, address, and password

Admin Dashboard

• Overview Dashboard — Revenue charts, order counts, customer stats (Recharts)
• Product Management — Add/edit/delete fragrances with Cloudinary image upload
• Order Management — View all orders, update shipping status, add tracking numbers
• Customer Management — View registered buyers, search, remove accounts
• Inventory Monitor — Visual stock levels, low-stock alerts, restock indicators

Design

• Dark luxury aesthetic inspired by high-end fragrance brands
• Cormorant Garamond + Jost typography pairing
• Gold accent color system (#C9A84C)
• Framer Motion animations throughout
• Fully responsive layout

---

🗂️ Project Structure

lumiere/
├── backend/
│   ├── config/
│   │   ├── db.js                 # MongoDB connection
│   │   └── cloudinary.js         # Cloudinary + Multer setup
│   ├── controllers/
│   │   ├── authController.js     # Register, login, profile
│   │   ├── productController.js  # CRUD + reviews
│   │   ├── cartController.js     # Cart operations
│   │   ├── wishlistController.js # Wishlist toggle
│   │   ├── orderController.js    # Order creation + tracking
│   │   ├── paymentController.js  # Stripe checkout + webhook
│   │   ├── adminController.js    # Dashboard + admin ops
│   │   └── aiController.js       # Claude AI recommendations + chat
│   ├── middleware/
│   │   └── authMiddleware.js     # JWT protect + adminOnly
│   ├── models/
│   │   ├── User.js
│   │   ├── Product.js
│   │   ├── Order.js
│   │   └── Cart.js
│   ├── routes/
│   │   ├── authRoutes.js
│   │   ├── productRoutes.js
│   │   ├── cartRoutes.js
│   │   ├── wishlistRoutes.js
│   │   ├── orderRoutes.js
│   │   ├── paymentRoutes.js
│   │   ├── adminRoutes.js
│   │   └── aiRoutes.js
│   ├── seed.js                   # Sample data seeder
│   ├── server.js                 # Express app entry
│   └── .env.example
│
└── frontend/
    ├── public/
    │   └── index.html
    └── src/
        ├── components/
        │   ├── buyer/
        │   │   └── ProductCard.js
        │   ├── admin/
        │   │   └── AdminLayout.js
        │   └── common/
        │       ├── Navbar.js
        │       └── Footer.js
        ├── context/
        │   ├── AuthContext.js
        │   ├── CartContext.js
        │   └── WishlistContext.js
        ├── pages/
        │   ├── buyer/
        │   │   ├── HomePage.js
        │   │   ├── CollectionPage.js
        │   │   ├── ProductDetailPage.js
        │   │   ├── CartPage.js
        │   │   ├── WishlistPage.js
        │   │   ├── CheckoutPage.js
        │   │   ├── OrderSuccessPage.js
        │   │   ├── OrderHistoryPage.js
        │   │   ├── OrderDetailPage.js
        │   │   ├── ProfilePage.js
        │   │   ├── AiAdvisorPage.js
        │   │   ├── LoginPage.js
        │   │   └── RegisterPage.js
        │   └── admin/
        │       ├── AdminLoginPage.js
        │       ├── AdminDashboard.js
        │       ├── AdminProducts.js
        │       ├── AdminProductForm.js
        │       ├── AdminOrders.js
        │       ├── AdminUsers.js
        │       └── AdminInventory.js
        ├── services/
        │   └── api.js             # Axios API layer
        ├── App.js
        ├── index.js
        └── index.css              # Global luxury design system

---

🚀 Quick Start

Prerequisites

• Node.js 18+
• MongoDB Atlas account (free tier works)
• Cloudinary account (free tier works)
• Stripe account (test mode)
• Anthropic API key (for AI Advisor)

---

1. Clone & Install

# Install backend dependencies
cd lumiere/backend
npm install

# Install frontend dependencies
cd ../frontend
npm install

---

2. Configure Backend Environment

cp backend/.env.example backend/.env

Edit backend/.env:

PORT=5000
MONGO_URI=mongodb+srv://<user>:<pass>@cluster.mongodb.net/lumiere

JWT_SECRET=your_super_secret_key_min_32_chars
JWT_EXPIRE=30d

CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

STRIPE_SECRET_KEY=sk_test_xxxxxxxxxxxxxxxx
STRIPE_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxxx

ANTHROPIC_API_KEY=sk-ant-xxxxxxxxxxxxxxxx

CLIENT_URL=http://localhost:3000
NODE_ENV=development

---

3. Configure Frontend Environment

cp frontend/.env.example frontend/.env

Edit frontend/.env:

REACT_APP_API_URL=http://localhost:5000/api
REACT_APP_STRIPE_PUBLISHABLE_KEY=pk_test_xxxxxxxxxxxxxxxx

---

4. Seed the Database

cd backend
node seed.js

5. Start Development Servers

Terminal 1 — Backend:

cd backend
npm run dev
# API running at http://localhost:5000

Terminal 2 — Frontend:

cd frontend
npm start
# App running at http://localhost:3000

---

💳 Stripe Setup

Test Cards

Card Number	Description
4242 4242 4242 4242	Successful payment
4000 0000 0000 0002	Declined
4000 0025 0000 3155	Requires authentication

Use any future expiry, any 3-digit CVC.

Webhook (Local Development)

Install Stripe CLI and forward events:

stripe listen --forward-to localhost:5000/api/payments/webhook

Copy the webhook signing secret to STRIPE_WEBHOOK_SECRET in .env.

---

🖼️ Cloudinary Setup

1. Create a free account at cloudinary.com
2. Go to Dashboard → copy Cloud Name, API Key, API Secret
3. Paste into backend/.env

Product images are automatically:

• Uploaded to lumiere-perfumes/ folder
• Resized to max 800×800px
• Quality-optimized

---

🤖 AI Advisor (Lumia)

The AI advisor uses Claude (Anthropic) for:

1. Smart Recommendations — Analyzes mood, occasion, budget, personality and matches to in-stock products
2. Free Chat — Conversational fragrance expertise (scent families, notes, history, tips)

Get your API key at console.anthropic.com.

🛠️ Tech Stack

Layer	Technology
Frontend	React 18, React Router 6, Framer Motion
Styling	Pure CSS-in-JS with CSS variables
Charts	Recharts
Icons	React Icons (Feather)
Backend	Node.js, Express 4
Database	MongoDB + Mongoose
Auth	JWT (jsonwebtoken + bcryptjs)
File Upload	Multer + Cloudinary
Payments	Stripe (Checkout Sessions)
AI	Anthropic Claude API
Notifications	React Hot Toast

---

🎨 Design System

/* Core palette */
--gold:        #C9A84C   /* Primary accent */
--gold-light:  #E2C07A   /* Hover states */
--black:       #0A0A0A   /* Page background */
--dark:        #111111   /* Component background */
--dark-2:      #1A1A1A   /* Card background */
--white:       #F5F0E8   /* Warm white text */

/* Typography */
Display: Cormorant Garamond (serif) — 300–600 weight
Body:    Jost (sans-serif) — 200–500 weight

---

📝 License

MIT — Free to use and modify for personal and commercial projects.