e-furniture MERN Stack Project with Source Code | React + Node.js + MongoDB

e-furniture MERN Stack Project with Source Code

Building a full-stack e-commerce application is one of the best ways to stand out in your final year viva, impress placement recruiters, and prove you can ship real-world software. The e-furniture MERN Stack Project with Source Code | React + Node.js + MongoDB project covers everything from React 18 with TypeScript on the frontend to a Node.js + Express + MongoDB REST API on the backend — giving you hands-on experience with Redux Toolkit, RTK Query, JWT-based auth, admin dashboards, and a production-ready dark navy & gold design system. Whether you are a BCA, MCA, or B.Tech CS/IT student, this project will tick every box your examiner asks about.

Project Overview

Key Features

• Complete E-Commerce Flow — Product browsing with category filters and search, product quick-view modal, add-to-cart with quantity controls, wishlist, and a full multi-step checkout (shipping address → payment method → order summary).
• JWT User Authentication — Secure sign-up and login with bcrypt password hashing; protected routes for both customers and admins using React Router v6 guards.
• Admin Dashboard — Sales statistics, revenue charts, order management (view, update status, delete), product CRUD, and user management — all behind a role-based admin panel.
• RTK Query with Auto-Caching — All API calls are handled through Redux Toolkit Query, eliminating boilerplate and providing automatic background refetching and cache invalidation.
• Redux Persist — Cart and wishlist state survive page refreshes and browser restarts, giving users a seamless shopping experience.
• Responsive Design — Fully optimised for mobile, tablet, and desktop using MUI’s responsive grid system and Swiper.js touch-friendly carousels.
• Code Splitting — React Lazy + Suspense used throughout the route definitions, ensuring fast initial load times even as the app scales.
• Blog & About Pages — Interior design articles section and company story page, making this feel like a real production website rather than a student demo.

Technologies Used

Full Source Code

This is a premium paid project. The complete source code — including all frontend components, Redux slices, RTK Query API layers, Express routes, Mongoose models, and the database seed script — is available as a downloadable ZIP. Click the button below to get instant access.

Click the button below to download the complete e-furniture project source code including frontend, backend, seed script, and setup guide.

How to Run the Project

Step 1 — Install Prerequisites

Make sure your machine has Node.js v18+, npm v9+, and a running MongoDB Community Server before continuing.

node -v        # v18 or higher
npm -v         # v9 or higher
mongod --version

Step 2 — Clone the File into vs code

Step 3 — Set Up Environment Variables

Create a .env.local file in the project root for the frontend:

REACT_APP_BASE_URL=https://updategadh.com/api

Create a server/.env file for the backend:

PORT=5000
MONGO_URI=mongodb://127.0.0.1:27017/e-furniture

Step 4 — Install Dependencies

# Backend
cd server
npm install

# Frontend (from project root)
cd ..
npm install --legacy-peer-deps

Step 5 — Seed the Database

Run this once to populate MongoDB with 12 sample products, 3 users (1 admin + 2 regular), and 3 sample orders.

cd server
node seed.js
# Expected output: MongoDB connected  |  Database seeded successfully!

Step 6 — Start the Backend

cd server
node index.js
# Backend runs at: https://updategadh.com

Step 7 — Start the Frontend

cd e-furniture
npm start
# App opens at: https://updategadh.com

Step 8 — Login with Demo Credentials

API Endpoints

Base URL: https://updategadh.com/api

How It Works

1. User Authentication Flow

1. User submits email and password on the sign-up or login page.
2. The frontend sends a POST request via RTK Query to /api/sign-up or /api/login.
3. Express receives the request and bcrypt hashes the password (on sign-up) or compares it (on login).
4. The user object is returned and stored in the Redux authSlice — persisted by Redux Persist.
5. React Router v6 protected routes read the auth state and redirect unauthenticated users away from private pages.

2. Product Browsing & Cart

1. The Shop page mounts and RTK Query fires a GET request to /api/products (or a category-filtered URL).
2. Results are cached in the RTK Query cache — no duplicate network calls on revisit.
3. Clicking “Add to Cart” dispatches an action to cartSlice and Notistack fires a success snackbar.
4. Cart state is serialised to localStorage by Redux Persist, so it survives page refreshes.
5. Quantity controls dispatch increment/decrement actions directly to the slice.

3. Checkout & Order Placement

1. The multi-step checkout reads shipping details from shippingSlice (also persisted).
2. On final confirmation, RTK Query fires a POST to /api/order with cart, shipping, and payment data.
3. Mongoose saves the order document with status “Pending” linked to the user’s email.
4. The cart is cleared from Redux state and the user is shown an order confirmation screen.
5. Order history is fetched per user via GET /api/orders/:email on the profile page.

4. Admin Panel Workflow

1. Admin logs in — the user_type: "admin" field in MongoDB identifies the role.
2. React Router protected route checks the Redux auth state and allows access to /admin/dashboard.
3. The dashboard fetches all orders and users via RTK Query in parallel — stats render from the aggregated data.
4. Admins update order status via PUT /api/order/:id — the RTK Query cache is invalidated and the table re-renders automatically.
5. Product management supports full CRUD — create, update, and delete operations hit their respective Express endpoints.

Why This is a Great Final Year Project

• Covers the full MERN stack — you can answer questions on React, Node.js, Express, and MongoDB all from one project.
• Real-world architecture — RTK Query, Redux Persist, code splitting, and protected routes mirror what actual production teams build.
• Role-based access control — admin vs customer roles is a concept every interviewer asks about.
• Professional UI — the custom MUI dark navy & gold theme looks like a real product, not a tutorial clone.
• Complete REST API — 17 documented endpoints give you real backend interview material.
• Scalable project structure — feature-based folder organisation shows you understand how teams organise large codebases.
• TypeScript throughout the frontend — typed components, API responses, and Redux state are increasingly required in industry jobs.

SEO Details

e commerce website using mern stack github mern stack e commerce project with source code
mern stack e commerce project report pdfmern ecommerce project with source code githubmern stack ecommerce template freefurniture ecommerce website githubfull stack e commerce website source code githubmern ecommerce with admin panel github e mern stack mern stack example projects mern stack projects mern stack project with stripe mern stack examples github