E-commerce

A full-stack MERN e-commerce application featuring secure authentication, admin CMS, product management, cart, wishlist, checkout, and order handling. Built with JWT-based authentication, Google OAuth, Cloudinary image uploads, Razorpay payment integration, search, filtering, and role-based access control, following real-world scalable architecture.

Demo video

ecommerce-video.mp4

Features

• Secure authentication with email verification, JWT, cookies, and Google OAuth
• Role-based access control with protected admin routes
• Product browsing with search, filtering, and sorting
• Cart and wishlist management
• Address management and checkout with payment verification
• Order placement
• Admin CMS for managing users and products
• Cloudinary-based image uploads
• Modular REST API with scalable backend architecture

Tech Stack

• Frontend: React, Context API, React Router
• Backend: Node.js, Express.js
• Database: MongoDB
• Authentication: JWT, HTTP-only cookies, Google OAuth
• Image Storage: Cloudinary
• File Uploads: Multer
• Email Services: Nodemailer
• Payments: Razorpay
• Tools & Utilities: REST API, Middleware-based architecture

Project Structure

ecommerce/

• frontend/
• backend/
• README.md

Prerequisites

• Node.js
• npm
• MongoDB

Environment Variables

Backend (backend/.env):

PORT=your_port_number
MONGODB_URL=your_mongodb_url

# NODEMAILER
SENDER_EMAIL=your_email
SENDER_PASS=your_sender_pass
SENDGRID_API_KEY=your_key

# FRONTEND LINK
CLIENT_URL=your_client_url

# JWT SECRET 
JWT_SECRET=your_jwt_secret

# GOOGLE CLIENT ID
GOOGLE_CLIENT_ID=your_google_client_ID

# CLOUDINARY
CLOUDINARY_CLOUD_NAME=your_cloudinary_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret

# RAZORPAY
RAZORPAY_ID=your_razorpay_ID
RAZORPAY_SECRET=your_razorpay_secret

Frontend (frontend/.env):

VITE_RAZORPAY_ID=your_vite_razorpay_ID

First-Time Setup (Required Once)

Before running the project, install dependencies in both directories.

Backend

cd backend
npm install

Frontend

cd frontend
npm install

---

Run Project

Backend

cd backend
npm start

Frontend

cd frontend
npm run dev

Run frontend and backend in separate terminals.

Purpose

The purpose of this project is to demonstrate practical full-stack engineering skills by building a production-style e-commerce system with complete user and admin workflows. It focuses on backend structure, security, and maintainable frontend architecture rather than UI-only functionality, making it suitable as a portfolio-ready real-world application.

Future Enhancements

• Implement product ratings and user reviews
• Improve frontend architecture with better component and context separation
• Add pagination for products, users, and orders
• Enhance admin capabilities with advanced order and user analytics
• Introduce testing for critical backend and frontend flows