AuraDrop E-Commerce Platform

AuraDrop is a modern, fully-featured, and highly scalable E-Commerce platform built using the MERN stack (MongoDB, Express, React, Node.js). It is designed with a multi-client architecture, providing a seamless shopping experience for customers and a powerful, comprehensive dashboard for administrators.

🌟 Key Features

For Customers (Client Application)

• Advanced Shopping Cart & Wishlist: Intuitive state management using Redux Toolkit.
• Dynamic Product Browsing: Hierarchical category navigation, smart filtering, and search.
• Product Variants: Full support for product variants (colors, sizes) with dynamic image galleries.
• Secure Checkout & Payments: Integrated with Razorpay for seamless online transactions, Wallet payments, and Cash on Delivery (COD).
• User Dashboard & Wallets: Manage addresses, view order history, track order status, and utilize built-in digital wallets.
• AI-Powered Assistance: Integrated with Google's Gemini AI for an intelligent, contextual chatbot shopping assistant.
• Reviews & Ratings: Share experiences and read feedback from other verified customers.
• Dynamic UI: Cloudinary-backed dynamic banners and promotional carousels.

For Administrators (Admin Application)

• Comprehensive Analytics Dashboard: Visualize sales trends, user acquisition, and revenue using Recharts.
• Sales Reporting & Export: Generate granular sales reports (daily, weekly, custom dates) with native PDF Document Exporting (via html2pdf.js).
• Complete Inventory Management: Full CRUD capabilities for products, nested categories, and dynamic stock tracking per variant.
• Order Processing Lifecycle: Manage orders from placement to delivery, including cancellations and automated refund handling to user wallets.
• Promotions Management: Create, toggle, and track dynamic discounting using Coupons and Promotional Banners.
• Secure Access: Role-based access control with JWT authentication specifically scoped for administrators.

🏗️ Architecture & Technology Stack

The project operates on a multi-client MERN configuration to cleanly separate concerns and enhance security.

Frontend (Client & Admin)

• Framework: React 19 powered by Vite for blazing-fast development and optimized builds.
• Styling: Tailwind CSS v4 for highly responsive, modern, and utility-first design.
• State Management: Redux Toolkit (RTK) & React-Redux.
• Routing: React Router DOM v7 (Protected Routes & Layouts).
• HTTP Client: Axios with interceptors for seamless token management.
• Additional Tools: swiper (carousels), recharts (admin charts), react-toastify (notifications), html2pdf.js (document generation).

Backend (Server)

• Core Engine: Node.js & Express.js v5.
• Database: MongoDB Atlas utilizing Mongoose v9 for schemas and data integrity.
• Data Validation: joi for robust and structured request payload validation.
• Authentication & Security:
  • jsonwebtoken for stateless auth.
  • bcryptjs for password hashing.
  • helmet & cors for header and cross-origin security.
  • express-rate-limit for DDoS protection.
• Cloud Integrations & Infrastructure:
  • AWS (Amazon Web Services): Backend runs on EC2 with PM2, Frontends static files hosted on S3.
  • Cloudinary & multer for optimized image uploading, hosting, and transformations.
  • Google Generative AI (@google/generative-ai) for chatbot intelligence.
  • Google Auth Library for seamless SSO.
• Payment Gateway: Razorpay API for secure transaction capturing.
• Logging: winston and winston-daily-rotate-file for persistent, rolling server logs.
• Emailing: nodemailer for user communications (OTP, resets, invoices).

🚀 Getting Started

Prerequisites

Make sure you have the following installed:

• Node.js (v18 or higher recommended)
• MongoDB (Local or Atlas Cluster)
• A Razorpay Account (for mock or live transactions)
• A Cloudinary Account (for image hosting)
• Google Gemini API Key

Installation

1. Clone the repository:

   git clone https://github.com/mufeed-dev/AuraDrop.git
   cd AuraDrop

2. Install Server Dependencies:

   cd server
   npm install

3. Install Client Dependencies:

   cd ../client
   npm install

4. Install Admin-Client Dependencies:

   cd ../admin-client
   npm install

Environment Variables

You need to create a .env file in the server directory with the necessary keys.

Example server/.env:

PORT=5000
MONGODB_URI=your_mongodb_connection_string

# Authentication
JWT_SECRET=your_jwt_strong_secret
JWT_ADMIN_SECRET=your_jwt_admin_secret

# Razorpay Validation
RAZORPAY_KEY_ID=your_razorpay_key
RAZORPAY_KEY_SECRET=your_razorpay_secret

# Cloudinary Setup
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret

# Email Service
EMAIL_USER=your_nodemailer_email
EMAIL_PASSWORD=your_nodemailer_app_password

# Gemini AI Integrations
GEMINI_API_KEY=your_google_gemini_api_key

Running the Application

You can start the different modules from their respective directories:

1. Start the Backend Server:

cd server
npm run dev
# The server usually runs on http://localhost:5000

2. Start the Customer Frontend:

cd client
npm run dev
# Vite runs the client on http://localhost:5173

3. Start the Admin Dashboard:

cd admin-client
npm run dev
# Vite runs the admin client on http://localhost:5174

🗂️ Project Structure

AuraDrop/
├── server/                 # Node/Express Backend Environment
│   ├── config/             # DB connectivity, constants, payment/multer settings
│   ├── controllers/        # Request handling and business logic endpoints
│   ├── middlewares/        # Auth, Role validators, and Error bindings
│   ├── models/             # Mongoose Schemas (User, Admin, Product, Order, etc.)
│   ├── routes/             # RESTful API routing configurations
│   ├── services/           # Reusable service classes
│   └── utils/              # Helper functions, validation, and email templates
│
├── client/                 # Main Customer Application (React)
│   ├── src/
│   │   ├── components/     # Reusable UI parts (Navbar, Cards, Modals, Chatbot)
│   │   ├── pages/          # Views (Home, Shop, Cart, Checkout, Profile)
│   │   ├── redux/          # RTK slices and async thunks
│   │   └── utils/          # API wrapper configurations
│
└── admin-client/           # Administrator Dashboard
    ├── src/
    │   ├── components/     # Specialized admin components, tables, layout
    │   ├── pages/          # Admin Views (Inventory, Orders, Reports, Coupons, Banners)
    │   ├── redux/          # Admin-specific state management
    │   └── utils/          # Admin HTTP interceptors

---