Shopper E-Commerce Website

A modern React-based e-commerce web application featuring product browsing, shopping cart management, wishlist functionality, and category-based product filtering.

Features

• Product catalog display

• Category filtering

  • Men's Collection
  • Women's Collection
  • Kids Collection

• Product details page

• Shopping cart functionality

• Wishlist management

• User login/signup page

• Responsive navigation bar

• React Router navigation

• Context API state management

• Modern UI design

---

Technologies Used

• React.js
• React Router DOM
• Context API
• JavaScript (ES6+)
• HTML5
• CSS3

---

Project Structure

src/
│
├── Components/
│   ├── Assets/
│   ├── Navbar/
│   ├── Hero/
│   ├── Popular/
│   ├── Offers/
│   ├── NewCollections/
│   ├── ProductDisplay/
│   ├── RelatedProducts/
│   ├── CartItems/
│   ├── DescriptionBox/
│   ├── Breadcrums/
│   └── Footer/
│
├── Context/
│   ├── ShopContext.jsx
│   └── WishlistContext.js
│
├── Pages/
│   ├── Shop.jsx
│   ├── ShopCategory.jsx
│   ├── Product.jsx
│   ├── Cart.jsx
│   ├── Wishlist.jsx
│   └── LoginSignup.jsx
│
├── App.js
└── index.js

---

Installation

Clone the repository

git clone <repository-url>

Navigate to project directory

cd webproject-main

Install dependencies

npm install

Start development server

npm start

Application will run at:

http://localhost:3000

---

Available Scripts

Start Development Server

npm start

Build Production Version

npm run build

Run Tests

npm test

---

Routing

Route	Description
/	Home Page
/mens	Men's Products
/womens	Women's Products
/kids	Kids Products
/product/:productId	Product Details
/cart	Shopping Cart
/wishlist	Wishlist
/login	Login / Signup

---

State Management

The application uses React Context API:

ShopContext

Handles:

• Product data
• Cart items
• Cart quantity
• Cart total calculation
• Add to cart
• Remove from cart

WishlistContext

Handles:

• Wishlist items
• Add to wishlist
• Remove from wishlist

---

Future Improvements

• User authentication with backend
• Product search
• Product sorting
• Payment gateway integration
• Order history
• User profiles
• Admin dashboard
• Database integration
• Product reviews and ratings

---

Author

Developed using React.js and modern frontend development practices.

---

License

"""This project is intended for educational and learning purposes."""