TechZone eCommerce

TechZone eCommerce is a full-stack MERN stack web application developed as the final project submission for the MERN Stack Training Course conducted by the University of Colombo School of Computing.

The project is designed as an online technology product marketplace where customers can browse products, view product details, manage their shopping cart, and interact with role-based features. Sellers can create and manage their own products, while admins can manage all products and control featured product visibility.

Project Overview

TechZone eCommerce focuses on building a practical e-commerce platform using the MERN stack. The application includes authentication, role-based access control, product management, category browsing, featured products, shopping cart functionality, image uploads, and a modern responsive user interface.

This project was created to demonstrate the core concepts of full-stack development, including frontend development with React, backend API development with Express.js, database management using MongoDB, authentication with JWT, and image hosting using Cloudinary.

Course Information

• Project Name: TechZone eCommerce
• Course: MERN Stack Training Course
• Institution: University of Colombo School of Computing
• Project Type: Final Project Submission
• Developer: Shiham Ahamed
• Stack: MongoDB, Express.js, React.js, Node.js

Features

User Features

• User registration and login
• JWT-based authentication using HTTP-only cookies
• User logout
• Protected user profile check
• Browse featured products
• Browse products by category
• View detailed product information
• Add products to cart
• Update cart item quantity
• Remove products from cart
• View cart summary with subtotal and total

Seller Features

• Seller dashboard access
• Create new products
• Upload product images through Cloudinary
• View seller-specific products
• Delete seller products

Admin Features

• Admin dashboard access
• View all products
• Mark or unmark products as featured
• Delete products
• Manage product visibility on the home page

Product Features

• Product name, brand, description, price, category, and image
• Product category filtering
• Featured product listing
• Product detail page
• Random recommended products API
• Cloudinary image storage

UI Features

• Responsive React frontend
• Modern product cards
• Category cards
• Animated UI using Framer Motion
• Toast notifications using React Hot Toast
• Icons from Lucide React
• Tailwind CSS styling
• Protected routes for cart and dashboard pages

Tech Stack

Frontend

• React.js
• Vite
• React Router DOM
• Zustand
• Axios
• Tailwind CSS
• Framer Motion
• Lucide React
• React Hot Toast

Backend

• Node.js
• Express.js
• MongoDB
• Mongoose
• JWT
• bcryptjs
• cookie-parser
• CORS
• dotenv
• Cloudinary

Project Structure

TechZone-eCommerce/
│
├── backend/
│   ├── controllers/
│   │   ├── auth.controller.js
│   │   ├── cart.controller.js
│   │   └── product.controller.js
│   │
│   ├── lib/
│   │   ├── cloudinary.js
│   │   └── connectDB.js
│   │
│   ├── middleware/
│   │   └── auth.middleware.js
│   │
│   ├── models/
│   │   ├── product.model.js
│   │   └── user.model.js
│   │
│   ├── routes/
│   │   ├── auth.route.js
│   │   ├── cart.route.js
│   │   └── product.route.js
│   │
│   ├── utils/
│   │   └── generateTokenAndSetCookie.js
│   │
│   └── index.js
│
├── frontend/
│   ├── public/
│   ├── src/
│   │   ├── assets/
│   │   ├── components/
│   │   ├── lib/
│   │   ├── pages/
│   │   ├── store/
│   │   ├── App.jsx
│   │   ├── index.css
│   │   └── main.jsx
│   │
│   ├── package.json
│   ├── tailwind.config.js
│   └── vite.config.js
│
├── package.json
├── package-lock.json
├── .gitignore
└── README.md

Main Pages

API Endpoints

Authentication Routes

Base URL:

/api/auth

Product Routes

Base URL:

/api/products

Cart Routes

Base URL:

/api/cart

User Roles

The system supports three user roles:

Customer

Customers can browse products, view product details, and manage their cart.

Seller

Sellers can access the dashboard, create products, upload product images, view their own products, and delete products.

Admin

Admins can access the dashboard, view all products, delete products, and mark products as featured.

Note: New users are created with the default role customer. To test seller or admin features, update the user role manually in MongoDB.

Example:

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

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

Environment Variables

Create a .env file in the root directory.

PORT=5000
MONGO_URI=mongodb://127.0.0.1:27017/techzone_ecommerce
JWT_SECRET=your_jwt_secret_key

CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret

Environment Variable Explanation

Installation and Setup

1. Clone the Repository

git clone https://github.com/theShihamAhamed/TechZone-eCommerce.git
cd TechZone-eCommerce

2. Install Backend Dependencies

From the root folder:

npm install

3. Install Frontend Dependencies

cd frontend
npm install

4. Configure Environment Variables

Go back to the root folder and create the .env file:

cd ..

Create .env and add your MongoDB, JWT, and Cloudinary values.

5. Run the Backend Server

From the root folder:

npm run dev

The backend will run on:

http://localhost:5000

6. Run the Frontend

Open a new terminal:

cd frontend
npm run dev

The frontend will run on:

http://localhost:5173

Running the Full Application Locally

Use two terminals.

Terminal 1: Backend

cd TechZone-eCommerce
npm run dev

Terminal 2: Frontend

cd TechZone-eCommerce/frontend
npm run dev

Then open:

http://localhost:5173

Database Setup

This project uses MongoDB.

You can use:

• Local MongoDB server
• MongoDB Compass
• MongoDB Atlas

Example local connection string:

MONGO_URI=mongodb://127.0.0.1:27017/techzone_ecommerce

Example MongoDB Atlas connection string:

MONGO_URI=mongodb+srv://username:password@cluster.mongodb.net/techzone_ecommerce

Cloudinary Setup

Cloudinary is used to store uploaded product images.

To configure Cloudinary:

1. Create a Cloudinary account.
2. Go to your Cloudinary dashboard.
3. Copy your cloud name, API key, and API secret.
4. Add them to the root .env file.

CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

Product images uploaded by sellers are stored in Cloudinary and the image URL is saved in MongoDB.

Product Categories

The frontend currently supports the following product categories:

• laptop
• phone
• headphone
• camera
• speaker
• printer

Authentication Flow

1. User signs up or logs in.
2. Backend verifies credentials.
3. Passwords are hashed using bcryptjs.
4. A JWT token is generated.
5. The token is stored in an HTTP-only cookie.
6. Protected routes verify the token before allowing access.
7. User role is checked for admin and seller dashboard features.

Role-Based Access Control

The backend includes middleware for:

• verifyToken
• adminRoute
• sellerRoute
• adminOrSellerRoute

These middleware functions protect sensitive routes such as product creation, product deletion, featured product updates, and dashboard-related APIs.

Frontend State Management

The frontend uses Zustand for state management.

Main stores:

Future Improvements

Some possible improvements for future versions:

• Add checkout and payment integration
• Add order management
• Add product search
• Add product ratings and reviews
• Add seller profile pages
• Add admin user management
• Add product update/edit feature
• Add pagination and filtering
• Add forgot password feature
• Add email verification
• Add proper dashboard analytics
• Improve role assignment from the admin panel
• Add production deployment configuration
• Add backend validation and stronger error handling
• Add unit and integration tests

Learning Outcomes

Through this project, I practiced and demonstrated:

• Building a full-stack MERN application
• Creating REST APIs with Express.js
• Connecting Node.js with MongoDB using Mongoose
• Implementing JWT authentication
• Using HTTP-only cookies for authentication
• Creating protected routes
• Implementing role-based access control
• Managing frontend state with Zustand
• Creating reusable React components
• Handling API requests with Axios
• Uploading images to Cloudinary
• Styling responsive interfaces with Tailwind CSS
• Structuring a full-stack project

Author

Shiham Ahamed

Final project submission for the MERN Stack Training Course conducted by the University of Colombo School of Computing.

License

This project is licensed under the ISC License.