E-Commerce Web Application

A full-stack e-commerce web application built with React frontend and Node.js + Express + MongoDB backend.

Features

Frontend (React)

• Homepage with product cards displaying images, prices, and add to cart functionality
• Product details page with full description and reviews
• Shopping cart page with quantity update and total price calculation
• User authentication (login/register)
• Responsive design using Tailwind CSS
• Success/error notifications using React Toastify

Backend (Node.js + Express)

• RESTful API routes for users, products, and cart
• JWT authentication for secure login/register
• MongoDB models for User, Product, and Cart using Mongoose
• CRUD routes for product management (admin only)
• Proper error handling and validation

Project Structure

Ecommerce-website/
├── backend/
│   ├── models/
│   │   ├── User.js
│   │   ├── Product.js
│   │   └── Cart.js
│   ├── routes/
│   │   ├── auth.js
│   │   ├── products.js
│   │   └── cart.js
│   ├── middleware/
│   │   └── auth.js
│   ├── utils/
│   │   └── generateToken.js
│   ├── server.js
│   ├── package.json
│   └── .env (create from .env.example)
├── frontend/
│   ├── public/
│   │   └── index.html
│   ├── src/
│   │   ├── components/
│   │   │   ├── Navbar.js
│   │   │   └── ProductCard.js
│   │   ├── pages/
│   │   │   ├── Homepage.js
│   │   │   ├── ProductDetails.js
│   │   │   ├── Cart.js
│   │   │   ├── Login.js
│   │   │   └── Register.js
│   │   ├── utils/
│   │   │   ├── api.js
│   │   │   └── auth.js
│   │   ├── App.js
│   │   ├── index.js
│   │   └── index.css
│   ├── package.json
│   └── tailwind.config.js
└── README.md

Setup Instructions

Prerequisites

• Node.js (v14 or higher)
• MongoDB (local installation or MongoDB Atlas)
• npm or yarn

Backend Setup

1. Navigate to the backend directory:

cd backend

2. Install dependencies:

npm install

3. Create a .env file in the backend directory:

PORT=5000
MONGODB_URI=mongodb://localhost:27017/ecommerce
JWT_SECRET=your_jwt_secret_key_here_change_in_production
NODE_ENV=development

4. Start the server:

npm start

For development with auto-reload:

npm run dev

The backend server will run on http://localhost:5000

5. (Optional) Seed sample products:

npm run seed

This will add 28 diverse sample products to your database for testing purposes, including electronics, sports equipment, accessories, furniture, and home & kitchen items.

Frontend Setup

1. Navigate to the frontend directory:

cd frontend

2. Install dependencies:

npm install

3. Create a .env file in the frontend directory (optional, defaults to localhost:5000):

REACT_APP_API_URL=http://localhost:5000/api

4. Start the development server:

npm start

The frontend will run on http://localhost:3000

API Endpoints

Authentication

• POST /api/auth/register - Register a new user
• POST /api/auth/login - Login user
• GET /api/auth/me - Get current user (protected)

Products

• GET /api/products - Get all products
• GET /api/products/:id - Get single product
• POST /api/products - Create product (admin only)
• PUT /api/products/:id - Update product (admin only)
• DELETE /api/products/:id - Delete product (admin only)
• POST /api/products/:id/reviews - Add review to product (protected)

Cart

• GET /api/cart - Get user's cart (protected)
• POST /api/cart - Add item to cart (protected)
• PUT /api/cart/:itemId - Update cart item quantity (protected)
• DELETE /api/cart/:itemId - Remove item from cart (protected)
• DELETE /api/cart - Clear cart (protected)

Usage

1. Register/Login: Create an account or login to access cart functionality
2. Browse Products: View all products on the homepage
3. View Product Details: Click on any product to see details and reviews
4. Add to Cart: Add products to your shopping cart
5. Manage Cart: Update quantities or remove items from the cart
6. Write Reviews: Submit reviews for products (after login)

Admin Features

To create an admin user, you can manually update the user's role in MongoDB:

db.users.updateOne(
  { email: "admin@example.com" },
  { $set: { role: "admin" } }
)

Admin users can:

• Create, update, and delete products
• Access all API endpoints

Technologies Used

• Frontend: React, React Router, Axios, Tailwind CSS, React Toastify
• Backend: Node.js, Express, MongoDB, Mongoose, JWT, bcryptjs
• Development: nodemon (backend), react-scripts (frontend)

Notes

• Make sure MongoDB is running before starting the backend server
• For production, change the JWT_SECRET to a secure random string
• Update the MONGODB_URI if using MongoDB Atlas or a different connection string
• The application uses environment variables for configuration