AV Clothing - E-Commerce React Application

A modern e-commerce clothing store built with React, TypeScript, and Material-UI.

Project Overview

This is a full-featured clothing e-commerce application developed for COMP 4513 - Assignment 2. It includes product browsing, filtering, shopping cart functionality, and a sales dashboard.

Technologies Used

• React 19 - UI framework
• TypeScript - Type safety
• Vite - Build tool and dev server
• Material-UI (MUI) - Component library
• React Router - Client-side routing
• Recharts - Data visualization for sales dashboard
• LocalStorage - Cart and order persistence

Project Structure

src/
├── components/
│   ├── browse/      # FilterBar component
│   ├── cart/        # CartTable, CartSummary
│   ├── common/      # AboutDialog, LoginDialog
│   ├── dashboard/   # SalesCharts, SalesTables, OrdersTable
│   ├── layout/      # Header, Footer, Layout
│   └── product/     # ProductCard
├── context/
│   ├── AuthContext.tsx    # Authentication state
│   ├── CartContext.tsx    # Shopping cart state
│   └── ProductContext.tsx # Product data fetching
├── hooks/
│   ├── useProductFilters.ts # Filtering/sorting logic
│   └── useSalesData.ts      # Dashboard data processing
├── pages/
│   ├── Home.tsx
│   ├── Browse.tsx
│   ├── CategoryPage.tsx
│   ├── ProductPage.tsx
│   ├── CartPage.tsx
│   └── SalesDashboard.tsx
├── theme/
│   └── ThemeProvider.tsx  # Dark/Light mode support
└── utils/
    └── constants.ts

Features

• Product Browsing - Grid view with multi-select checkbox filters (size, color) and sorting
• Breadcrumb Navigation - Clear navigation path on product pages
• Category Navigation - Men's and Women's sections
• Product Details - Full product information with size/color selection
• Shopping Cart - Per-user cart persistence with add, remove, update quantities
• Checkout Flow - Order confirmation with dynamic shipping and tax calculation
• Sales Dashboard - Charts and tables for sales analytics (login required)
• Admin Product View - Per-product sales metrics and profit charts (admin only)
• Dark Mode - Full dark/light theme support with custom color scheme
• Responsive Design - Mobile-friendly layout with hamburger menu
• Modern UI - Skeleton loaders and progress indicators

📖 View Detailed Features & Learning Guide - Beginner-friendly explanations of how everything works!

Setup Instructions

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/AnmolVerma7/AV-Clothing.git
cd AV-Clothing

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Team Members

• Anmol Verma

Login Credentials

For testing the dashboard and admin features:

• Email: admin@avclothing.com
• Password: password123

Note: To access the Admin Product View (Sales Metrics & Profit Charts on product pages), you MUST log in with the email admin@avclothing.com. Other email addresses will log in as standard users.

Links

• Live Demo: https://av-clothing.vercel.app
• GitHub Repository: https://github.com/AnmolVerma7/AV-Clothing

Image Credits

• Product images: placehold.co
• Product data: GitHub Gist API

License

This project was created for educational purposes as part of COMP 4513.