Clothing Boutique - React Frontend

A modern, fully responsive e-commerce frontend for a clothing boutique built with React, Vite, and TailwindCSS.

Features

• 🎨 Modern UI with custom brand colors (Primary: #800020 - Deep Burgundy, Accent: Amber-500)
• 🎨 4 alternative color themes available (Emerald Green, Navy Blue, Plum Purple)
• 📸 Real product images from Unsplash (20 products)
• 🖼️ Beautiful hero banner with background image
• 📱 Fully responsive design for mobile, tablet, and desktop
• 🛍️ Complete e-commerce pages (Home, Products, Cart, Checkout)
• 👤 User authentication UI (Login, Register, Profile)
• 🔐 Admin dashboard for managing products, categories, and orders
• 🛒 Shopping cart with context API
• 🔍 Search functionality
• 📦 Product filtering and pagination
• ⚡ Fast development with Vite
• 🎯 Clean component architecture

Tech Stack

• React 18 - UI library
• Vite - Build tool and dev server
• React Router v6 - Client-side routing
• TailwindCSS - Utility-first CSS framework
• Context API - State management

Project Structure

src/
├── assets/          # Images, icons, and static files
├── components/      # Reusable UI components
│   ├── Navbar.jsx
│   ├── Footer.jsx
│   ├── HeroBanner.jsx
│   ├── SearchBar.jsx
│   ├── ProductCard.jsx
│   ├── CategoryFilter.jsx
│   ├── Pagination.jsx
│   ├── CartItem.jsx
│   ├── Modal.jsx
│   ├── Loader.jsx
│   └── Alert.jsx
├── pages/           # Page components
│   ├── Home.jsx
│   ├── ProductList.jsx
│   ├── ProductDetail.jsx
│   ├── Cart.jsx
│   ├── Checkout.jsx
│   ├── Login.jsx
│   ├── Register.jsx
│   ├── Profile.jsx
│   ├── Orders.jsx
│   ├── AdminDashboard.jsx
│   ├── AdminProducts.jsx
│   ├── AdminCategories.jsx
│   └── AdminOrders.jsx
├── context/         # React Context providers
│   ├── AuthContext.jsx
│   └── CartContext.jsx
├── services/        # API services (empty, ready for backend integration)
├── App.jsx          # Main app component
├── main.jsx         # App entry point
└── index.css        # Global styles and Tailwind imports

Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Install dependencies:

npm install

2. Start the development server:

npm run dev

3. Open your browser and navigate to http://localhost:5173

Build for Production

npm run build

The production-ready files will be in the dist folder.

Preview Production Build

npm run preview

Pages

Public Pages

• Home - Hero banner, search bar, featured products, and categories
• Products - Product grid with filters, sorting, and pagination
• Product Detail - Detailed product view with size/color selection
• Cart - Shopping cart with item management
• Checkout - Order summary and payment form
• Login/Register - Authentication pages

User Pages

• Profile - User account management
• Orders - Order history and tracking

Admin Pages

• Dashboard - Overview with stats and quick actions
• Products - Manage product inventory
• Categories - Manage product categories
• Orders - Process and track orders

Customization

Brand Colors

Edit tailwind.config.js to change brand colors:

theme: {
  extend: {
    colors: {
      primary: '#800020',        // Deep Burgundy
      'primary-light': '#A0002A', // Lighter shade
      'primary-dark': '#600018',  // Darker shade
      accent: '#f59e0b',         // Amber-500
    },
  },
}

Alternative Color Themes

The project includes 4 pre-configured color themes:

• Deep Burgundy (Current) - Rich, dramatic, classic elegance
• Emerald Green - Luxury, sophistication
• Navy Blue - Deep, professional, timeless
• Plum Purple - Royal, feminine, mysterious

See COLOR_THEMES.md for details on switching themes.

### Product Data

All product data is stored in `src/data/products.js` with 20 real products featuring:
- High-quality images from Unsplash
- Detailed product information
- Multiple sizes and colors
- Ratings and reviews
- Stock information

### Components

All components are modular and can be easily customized. They use Tailwind utility classes for styling.

## State Management

- **AuthContext** - Manages user authentication state
- **CartContext** - Manages shopping cart state

## Notes

- This is a **frontend-only** project with no backend integration
- All data is simulated/mocked for UI demonstration
- Authentication is simulated (no real validation)
- Cart state is stored in memory (resets on page refresh)
- Ready for backend integration via the `services/` folder

## Future Enhancements

- Connect to a real backend API
- Add persistent storage (localStorage/sessionStorage)
- Implement real authentication
- Add payment gateway integration
- Add product image uploads
- Implement real-time order tracking
- Add wishlist functionality
- Add product reviews and ratings

## License

MIT