---

🛒 QuickCart — MERN Stack Ecommerce Platform

• QuickCart is a full-stack ecommerce web application built using the MERN Stack (MongoDB, Express.js, React.js, Node.js). The project demonstrates real-world ecommerce functionality including secure authentication, payment processing, product and order management, and admin dashboard analytics.
  • The Frontend is built using React, Redux, Material UI, and modern UI libraries to provide a responsive shopping experience.
  • The Backend is built using Node.js and Express.js following REST API architecture with MongoDB for database storage and JWT-based secure authentication.

---

Live Frontend: https://quickcart-mern.vercel.app/

• Backend API (Deployed on Render): https://your-backend-url.onrender.com

---

Project Screenshots

UI Preview

---

Features

👤 User Features

• User Authentication (Login / Signup using JWT cookies)
• Profile Management
• Product Search, Filtering & Pagination
• Shopping Cart Management
• Order Placement System
• Secure Stripe Payment Integration
• Order History Tracking

---

Admin Features

• Product Management (Add / Update / Delete Products)
• Order Processing & Status Management
• User Management
• Reviews Management
• Sales Analytics Dashboard (Chart Visualization)

---

UI / Frontend Features

• Responsive Design (Desktop + Mobile Friendly)
• Redux State Management
• React Router Navigation
• Material UI Components
• Toast Notifications
• Carousel Product Display
• Modern Ecommerce UI Layout

---

Backend Features

• REST API Development using Express.js
• MongoDB Database Integration using Mongoose
• JWT Authentication with Secure Cookies
• Role-Based Authorization (User & Admin)
• Cloudinary Image Storage for Products & Profiles
• Error Handling Middleware
• Production-ready API structure

---

Tech Stack

Frontend

• React.js
• Redux + Redux Thunk
• React Router DOM
• Material UI
• Axios
• Chart.js
• Stripe Payment Integration
• React Toastify

Backend

• Node.js
• Express.js
• MongoDB
• Mongoose ODM
• JWT Authentication
• Cloudinary Storage
• Stripe Payment Gateway

---

Project Structure

quickcart-mern
│
├── frontend
│   ├── public
│   ├── src
│   │   ├── actions
│   │   ├── reducers
│   │   ├── components
│   │   │   ├── Admin
│   │   │   ├── Cart
│   │   │   ├── Home
│   │   │   ├── Product
│   │   │   ├── User
│   │   │   └── layout
│   │   ├── store.js
│   │   ├── axios.js
│   │   └── App.js
│
├── backend
│   ├── controllers
│   ├── middleware
│   ├── models
│   ├── routes
│   ├── utils
│   ├── app.js
│   └── server.js

---

Authentication Flow

React Frontend
     ↓
Axios API Calls
     ↓
Express Backend Authentication
     ↓
JWT Cookie Token
     ↓
Redux Global State Update

---

Payment Integration

• Stripe Checkout System
• Secure Payment Processing
• Order Confirmation System

---

Environment Variables

Frontend .env

REACT_APP_API_URL=https://your-backend-url.onrender.com
REACT_APP_STRIPE_KEY=your_stripe_key

Backend .env

PORT=4000
MONGO_URI=database_connection_string
JWT_SECRET=secret_key
COOKIE_EXPIRE=7
CLOUDINARY_NAME=xxx
CLOUDINARY_API_KEY=xxx
CLOUDINARY_API_SECRET=xxx
STRIPE_SECRET_KEY=xxx

⚠ Never push .env files to GitHub.

---

Installation

Clone Repository

git clone https://github.com/AnkitDimri4/quickcart-mern.git

Install Dependencies

Frontend:

cd frontend
npm install --legacy-peer-deps
npm start

Backend:

cd backend
npm install
npm run dev

---

Author

Ankit Dimri

Full-stack Developer 📍 Dehradun, India

---

Created by Ankit Dimri © 2026

---