💎 Elite E-Commerce - Premium MERN Stack Platform

A state-of-the-art, high-performance E-commerce platform built with the MERN stack, featuring a "Premium Dark" aesthetic, advanced product discovery tools, and enterprise-grade administration.

---

🚀 Key Features

🛍️ Advanced Shopping Experience

• Interactive Shop Dashboard: Dual-pane layout with real-time filtering by category, brand, and a precision price range slider ($0 - $1,000,000).
• Quick View Modal: Instant access to product details and "Add to Cart" directly from the product grid using a high-utility glassmorphism modal.
• Dynamic Gallery & Zoom: Thumbnail-based product gallery with a cinematic hover-zoom effect for high-fidelity product inspection.
• Media-Rich Reviews: Customer feedback system supporting star ratings and photo uploads to build social proof.

🔐 Robust User Ecosystem

• Secure Authentication: JWT-based login and registration with persistent sessions via Redux Toolkit.
• Personalized Profile: Premium dark-themed user dashboard for managing account details and viewing personal order history.
• Wishlist & Cart: Real-time cart management with quantity controls and persistent "Heart" wishlist functionality.

🛠️ Enterprise Admin Suite

• Comprehensive Dashboard: Real-time analytics and management of the entire store ecosystem.
• Inventory Management: Advanced tools for creating, updating, and deleting products with multi-image support.
• Category & User Control: Granular management of product taxonomies and user permissions.
• Order Tracking: Full visibility into customer transactions and fulfillment status.

---

🎨 Design Philosophy

The platform utilizes a "Premium Dark" design language:

• Core Surface: #0F0F10 (Deep Space Black)
• Primary Accent: #EC4899 (Vibrant Pink)
• Glassmorphism: Subtle backdrop blurs and semi-transparent layers for a modern, tactile feel.
• Micro-Animations: Smooth layout transitions and hover effects powered by Framer Motion.

---

🛠️ Technology Stack

Layer	Technology
Frontend	React 19, Redux Toolkit, Tailwind CSS, Framer Motion
Backend	Node.js, Express.js
Database	MongoDB (Mongoose ODM)
State Management	Redux Toolkit Query (RTK Query)
Authentication	JSON Web Tokens (JWT), Cookie-based auth
Utility	Moment.js, React-Toastify, Axios

---

⚙️ Installation & Setup

Prerequisites

• Node.js installed
• MongoDB Atlas account or local MongoDB instance

1. Clone the repository

git clone https://github.com/Rizwan2005khan/E-Commerce-Website.git
cd E-Commerce-Website

2. Backend Setup

Create a .env file in the backend directory:

PORT=5000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_super_secret_key

Install dependencies and start the server:

cd backend
npm install
npm run dev

3. Frontend Setup

Install dependencies and start the development server:

cd frontend
npm install
npm run dev

---

📁 Project Structure

├── backend/
│   ├── controller/      # Request handlers
│   ├── models/          # Mongoose schemas
│   ├── routes/          # API endpoints
│   └── middlewares/     # Auth & Error handling
├── frontend/
│   ├── src/
│   │   ├── components/  # Shared UI components
│   │   ├── pages/       # Core view modules
│   │   ├── redux/       # API slices & state logic
│   │   └── App.jsx      # Main router configuration

---

📜 Phase Roadmap

• Phase 1: Core Styling & Responsive Layout Standardized.
• Phase 2: Advanced Product Discovery (Quick View, Gallery, Filters).
• Phase 3: Checkout Integration (Stripe) & Fulfillment Dashboard.
• Phase 4: SEO Optimization & Performance Tuning.

---

Built with ❤️ by Rizwan Khan