🛍️ ShopNow - Full-Stack E-Commerce Platform

(demo - https://e-commerce-smoky-sigma.vercel.app/)

A production-ready, highly optimized E-Commerce web application built using the MERN stack (MongoDB, Express, React, Node.js). It features secure JWT authentication, an admin dashboard, a dual-option checkout system, and a mathematically secure verified-review engine.

✨ Core Features

• 🔒 Secure Authentication: JWT-based login, registration, and persistent user sessions with Redux.
• 🛒 Shopping Cart & Wishlist: Fully persistent cart logic using Redux Toolkit and LocalStorage. The wishlist is safely hidden behind authentication walls.
• 💳 Dual-Checkout Engine: Supports "Cash on Delivery" processing, as well as a custom "Simulated Secure Gateway" that identically mimics the UI of Razorpay for testing credit card logic.
• 🛡️ Stock Protection Algorithms: The backend database prevents "overselling" by mathematically depleting inventory exactly at the time of checkout.
• ⭐ Verified Reviews: A strict feedback loop where users can only rate a product after their purchase has been marked "Delivered" by an admin, preventing fake reviews.
• ⚡ Optimized Pagination: Capable of handling thousands of products without lagging. The MongoDB engine chunks API responses natively sorting "In-Stock" and "Newest" items to the front.
• 👨‍💻 Admin Control Dashboard: A restricted portal where admins can upload items, monitor overall platform sales, and upgrade users' Order Statuses tracking their fulfillment pipeline.

🛠️ Technology Stack

• Frontend: React (Vite), TailwindCSS, React Router, Redux Toolkit, React-Hot-Toast.
• Backend: Node.js, Express.js.
• Database: MongoDB, Mongoose.
• Authentication: JSON Web Tokens (JWT), Bcrypt for password hashing.

🚀 Getting Started

Follow these steps to run the platform locally on your machine.

1. Clone the repository

git clone https://github.com/your-username/shopnow.git
cd shopnow

2. Backend Setup

Navigate into the backend directory, install dependencies, and setup your environment variables.

cd Backend
npm install

Create a .env file in the Backend folder:

PORT=5000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_super_secret_jwt_key

Start the backend server:

npm run dev

3. Frontend Setup

Open a new terminal, navigate to the frontend directory, install dependencies, and boot the Vite server.

cd frontend
npm install

(Optional) Create a .env file in the frontend folder if your backend is running on a different port:

VITE_API_URL=http://localhost:5000

Start the frontend interface:

npm run dev

🏗️ Architecture

You can review exactly how the client, server, and database communicate. We have fully mapped out the sequences for:

1. Authentication Logic
2. Product Fetching & Pagination
3. Order Creation & Stock Depletion
4. Verified Review Verification

System Sequence Diagrams

These diagrams map out the exact data flow and architectural handshakes between the Client, the Backend Server, and the Database for your three primary services. You can copy these diagrams directly into your technical documentation.

1. Authentication Service Sequence

This details the flow of a user logging into the platform, securely generating a JSON Web Token (JWT), and saving it to the client state.

2. Product Catalog & Pagination Sequence

This illustrates how the frontend retrieves the catalog, how the backend calculates pagination, and how stock sorting is natively executed by the database.

3. Order & Checkout Sequence

This demonstrates the order pipeline, specifically highlighting the mock payment flow and how the system depletes inventory stock safely.

4. Verified Reviews System Flow

This maps the strict security checks the backend performs before allowing a user to rate a product, ensuring fake reviews cannot be submitted.

---

Built with ❤️ for scalable modern commerce.