Forever — Full-Stack E-Commerce Platform

A full-stack MERN e-commerce application with a customer-facing storefront, a dedicated admin panel for catalog/order management, and a REST API backend — built around a real checkout flow with both Cash on Delivery and Stripe payments.

Live Demo

App	Link
Storefront	forever-frontend-ruby-gamma.vercel.app
Admin Panel	forever-admin-seven-jade.vercel.app

Overview

This project is split into three independent apps that share one MongoDB database and one Express API:

• frontend/ — the customer storefront (browse, cart, checkout, order history, account management)
• admin/ — an internal dashboard for managing products and orders, written in TypeScript
• Backend/ — the REST API powering both of the above (auth, products, cart, orders, payments)

Features

Storefront

• Product browsing with category/sub-category filtering and sorting
• Product detail pages with size selection and related products
• Persistent cart tied to the logged-in user (guests are prompted to log in before adding to cart)
• Checkout with Cash on Delivery or Stripe
• Order history with live status tracking
• Account management: update name, change password, delete account

Admin Panel

• JWT-protected admin authentication, separate from customer accounts
• Add / edit / remove products, with multi-image upload to Cloudinary
• Product listing with bulk removal
• Order management with status updates (Order Placed → Packing → Shipped → Out for Delivery → Delivered)

Backend

• JWT authentication for both customers and the admin, with expiring tokens
• Password hashing with bcrypt
• Image uploads handled via Multer + Cloudinary
• Stripe Checkout integration with server-side payment verification

Tech Stack

	Frontend	Admin Panel	Backend
Core	React 19, Vite	React 19, Vite, TypeScript	Node.js, Express 5
Styling	Tailwind CSS v4	Tailwind CSS v4	—
Routing	React Router v7	React Router v7	—
HTTP	Axios	Axios	—
Database	—	—	MongoDB, Mongoose
Auth	—	—	JWT, bcrypt
Media	—	—	Multer, Cloudinary
Payments	—	—	Stripe

Project Structure

full_ecommerce/
├── frontend/     # Customer storefront (React + Vite)
├── admin/        # Admin dashboard (React + Vite + TypeScript)
└── Backend/      # REST API (Express + MongoDB)

Getting Started

Each of the three folders is an independent app with its own dependencies.

Prerequisites

• Node.js 20+
• A MongoDB database (e.g. MongoDB Atlas)
• A Cloudinary account (image uploads)
• A Stripe account (payments)

1. Backend

cd Backend
npm install

Create a .env file in Backend/ with:

MONGO_URI=
JWT_SECRET=
ADMIN_EMAIL=
ADMIN_PASSWORD=
CLOUDINARY_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_SECRET_KEY=
STRIPE_SECRET_KEY=
PORT=4000

npm run server   # nodemon, for local development

2. Frontend

cd frontend
npm install

Create a .env file in frontend/ with:

VITE_BACKEND_URL=http://localhost:4000

npm run dev

3. Admin Panel

cd admin
npm install

Create a .env file in admin/ with:

VITE_BACKEND_URL=http://localhost:4000

npm run dev

API Overview

All routes are prefixed with /api. Admin-only routes require a valid admin token; user routes require a valid customer token.

Group	Routes
/user	register, login, admin login, get/update profile, change password, delete account
/product	list, single, add (admin), edit (admin), remove (admin), remove all (admin)
/cart	get, add, update — all require a logged-in user
/order	place order (COD/Stripe), verify Stripe payment, user order history, admin order list + status updates

License

This project is licensed under the MIT License.