Banner Background
Web App

Forever

Forever is an end-to-end e-commerce platform built on the MERN stack with Vite, React 18, and Redux Toolkit. It features a consumer storefront with product browsing, persistent carts, and checkout with Stripe, Razorpay, or COD. The comprehensive Admin Dashboard enables product and order management, customer tracking, and role-protected features. Under the hood, it uses an Express REST API, MongoDB, Cloudinary for multipart image uploads, JWT cookies for auth, and Zod for validation, all cleanly containerized with Docker Compose.

React JSTailwind CSSNode.jsNode JSExpress JSMongoDBReduxReduxZodZodStripeStripeDockerGitGithubPostmanPostmanViteViteVercel
Check it out
Forever Preview

Overview

Forever is a production-ready MERN stack e-commerce application for clothing and fashion products. It ships with a customer-facing storefront, a full-featured admin dashboard, secure authentication, Stripe & Razorpay payments, Cloudinary-backed media, and Docker deployment.

Dual Architecture

Forever is split into two independent applications that communicate over a REST API: - Client: React single-page application (Vite + Redux Toolkit) for the storefront and admin panel. - Server: Express REST API backed by MongoDB (Mongoose) handling auth, products, carts, orders, and payments.

Tech Stack

  • React 18 with Vite (SWC plugin) as the build tool * React Router DOM v6 for routing (public + admin areas) * Redux Toolkit and RTK Query for state management and API caching * redux-persist for persisting auth state across reloads * Tailwind CSS + PostCSS + Autoprefixer for styling * react-icons, react-hot-toast, react-toastify for UI polish * ESLint for linting
  • Node.js + Express 4 (ES modules) * MongoDB with Mongoose 8
  • JWT (jsonwebtoken) + bcrypt for authentication * Zod for request validation * Multer for multipart file uploads * Cloudinary for image storage and delivery * Stripe and Razorpay SDKs for payments * Helmet, CORS, cookie-parser, body-parser for edge security
  • Docker + docker-compose (client, server, mongo services) * Vercel deployment configs for both apps (serverless deployment ready)

Key Features

Storefront (Public)

Browse products with search/filters, secure checkout (Stripe/Razorpay/COD), order tracking history, and persistent carts powered by RTK.

Admin Dashboard

Comprehensive /admin suite to manage products (Cloudinary uploads), track shipments, view users, and monitor transactions.

Robust Backend

Zod-validated endpoints, generalized error handling, paginated models, token-based stateless architecture, and secure credentials mapping.

Application Flow

Discovery & Browsing User lands on Home rendered through RootLayout, sees collections, and filters products via /collections. React Router maps routes, while RTK Query handles fetching and caching GET /api/v1/products.

Cart & Order Assembly Users select sizes on /collections/:id. Cart state lives in Redux (authSlice) and synchronizes via cartApiSlice.

Authentication Unauthenticated users hit /auth/sign-in. A successful login sets a JWT cookie globally and persists auth state cross-reload using redux-persist.

Checkout & Vaults /checkout posts valid choices to /api/v1/orders. Depending on Stripe, Razorpay, or COD, it either finishes the transaction instantly or routes the browser to a payment UI, finally hitting /verify on return.

Dashboard Access A privileged user signs in navigating to /admin/*, bypassing standard flows and gating routes by role. Standard CRUD sweeps back up through RTK Query to their respective APIs.

Folder Structure

docker-compose.yml

Getting Started

Environment Variables

VITE_BASE_URL=http://localhost:8080/api/v1
VITE_APP_URL=http://localhost:5173
VITE_NODE_ENV=development
VITE_DEMO_ACCOUNT=demo@forever.com
PORT=8080
NODE_ENV=development
MONGO_URI=mongodb://localhost:27017/forever
JWT_SECRET=your_jwt_secret
CLIENT_URL=http://localhost:5173

CLOUDINARY_NAME=...
CLOUDINARY_API_KEY=...
CLOUDINARY_API_SECRET=...

STRIPE_SECRET_KEY=...
STRIPE_PUBLIC_KEY=...

Running Locally

You can spin up the application manually or use Docker.

Ensure Docker Desktop is running, then hit:

docker compose up --build

This launches the Express API, the built Vite client, and a MongoDB container.

Server Setup:

cd server
yarn install
yarn dev

Starts on http://localhost:8080

Client Setup:

cd client
yarn install
yarn dev

Starts on http://localhost:5173

Deployment Highlights

Forever is production-ready out-of-the-box:

  • Vercel Enabled: Both client and server folders integrate custom vercel.json configurations to handle build paths natively with serverless edge rendering.
  • Docker Compose: Fully containerized setup available via naseemkhandev/forever-client & server on Docker Hub for standard VM deployments.

Experience Forever Today

Explore the live platform at forever.naseemkhan.dev and see a complete production-ready e-commerce application in action!

On this page

Overview
Tech Stack
Key Features
Application Flow
Folder Structure
Getting Started
Environment Variables
Running Locally
Deployment Highlights