Luxe Boutique - E-Commerce Application

A beautiful React e-commerce application with routing, cart functionality, and fake authentication.

Features

• 🏠 Home Page: Browse curated luxury clothing collection with add to cart functionality
• 🛒 Shopping Cart: View and manage cart items with quantity controls
• 👤 Account Page: View profile information and order history (requires login)
• 📞 Contact Us: Contact information with form
• 🚚 Track Delivery: Track order status with timeline visualization
• 🔐 Login/Signup: Fake authentication system

Tech Stack

• React 18
• React Router v6
• CSS3 with custom properties
• No backend (fake data)

Installation

1. Install dependencies:

npm install

2. Start the development server:

npm start

3. Open http://localhost:3000 in your browser

Project Structure

ecommerce-app/
├── public/
│   └── index.html
├── src/
│   ├── components/
│   │   └── Navbar/
│   │       ├── Navbar.jsx
│   │       └── Navbar.css
│   ├── pages/
│   │   ├── HomePage/
│   │   │   ├── HomePage.jsx
│   │   │   └── HomePage.css
│   │   ├── Cart/
│   │   │   ├── Cart.jsx
│   │   │   └── Cart.css
│   │   ├── Account/
│   │   │   ├── Account.jsx
│   │   │   └── Account.css
│   │   ├── ContactUs/
│   │   │   ├── ContactUs.jsx
│   │   │   └── ContactUs.css
│   │   ├── Login/
│   │   │   ├── Login.jsx
│   │   │   └── Login.css
│   │   ├── SignUp/
│   │   │   ├── SignUp.jsx
│   │   │   └── SignUp.css
│   │   └── TrackDelivery/
│   │       ├── TrackDelivery.jsx
│   │       └── TrackDelivery.css
│   ├── App.jsx
│   ├── App.css
│   ├── index.js
│   └── index.css
└── package.json

Usage

Testing Features

1. Shopping: Browse products on home page and add items to cart
2. Cart: View cart by clicking "Cart" in navigation
3. Login: Click "Account" → "Sign In" → Enter any email/password → Submit
4. Track Orders: Click "Track Delivery" → Try sample order numbers:
   • ORD-2024-001 (Delivered)
   • ORD-2024-002 (In Transit)
   • ORD-2024-003 (Processing)

Fake Data

• User Info: Sarah Johnson, sarah.johnson@email.com
• Address: 456 Madison Avenue, New York, NY 10022
• Orders: 3 sample orders with tracking information

Design Features

• Custom serif fonts (Playfair Display & Crimson Text)
• Warm color palette with gold accents
• Smooth animations and transitions
• Fully responsive design
• Mobile-friendly navigation

Build for Production

npm run build

This creates an optimized production build in the build folder.

Deployment

After building, you can deploy the contents of the build folder to:

• GitHub Pages
• Netlify
• Vercel
• Any static hosting service

License

MIT