🐰 E-Commerce Web App

This is a full-stack e-commerce solution built with the MERN Stack (MongoDB, Express, React, Node.js) and modern tools like Redux Toolkit and Tailwind CSS. The application supports product browsing, shopping cart functionality (with guest carts), user authentication, persistent storage, and an administrative dashboard for managing products and orders.

✨ Features 🖥️ Frontend (Client)

Authentication: User Login and Registration using JWT tokens.

Guest Cart Merging: Automatically merges guest cart items with the user's cart after login.

Product Catalog: Responsive product browsing with dynamic filtering (Category, Gender, Size, Price Range).

Real-Time Cart: Add, remove, and update item quantities via the cart drawer.

Checkout Flow: Multi-step checkout UI integrated with PayPal Sandbox payments.

Admin Access: Admin Dashboard link visible only for admin users.

🛠 Backend (Server)

RESTful API: Protected routes secured using JWT authentication middleware.

MongoDB/Mongoose: Structured models for Users, Products, Carts, Orders, Sessions.

Authorization: Middleware-based protection for /api/admin/* routes.

Cloudinary Integration: Secure image upload endpoint used by Admin Product Editor.

PayPal Integration: Backend routes for creating and processing PayPal orders.

🚀 Getting Started

Follow these steps to run the project locally.

Prerequisites

Node.js v18+

npm (comes with Node.js)

MongoDB (local or Atlas)

Cloudinary account

PayPal Developer client ID

1️⃣ Project Setup

Clone the repository and install dependencies.

git clone [YOUR_REPO_URL] cd [YOUR_REPO_NAME]

Install Frontend dependencies

cd frontend npm install

Install Backend dependencies

cd ../backend npm install cd ..

2️⃣ Environment Variables

Create the following environment files and add your secrets.

frontend/.env

URL where your backend server is running

VITE_BACKEND_URL=http://localhost:5000

PayPal Sandbox Client ID

VITE_PAYPAL_CLIENT_ID=YOUR_PAYPAL_CLIENT_ID

backend/.env

Server Configuration

PORT=5000 NODE_ENV=development

Database Connection

MONGO_URI=mongodb://localhost:27017/rabbit-ecommerce-db

Security

JWT_SECRET=your_strong_jwt_secret_key

Cloudinary Keys

CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name CLOUDINARY_API_KEY=your_cloudinary_api_key CLOUDINARY_API_SECRET=your_cloudinary_api_secret

3️⃣ Database Seeding

Before starting the server, seed the database with initial data:

node backend/seeder.js

🔑 Default Admin Login: Field Value Email admin@example.com

Password 123456 4️⃣ Running the Application

Start backend and frontend in two different terminals (or one with concurrent tools).

Service Command URL Backend (Express) node backend/server.js http://localhost:5000

Frontend (Vite) npm run dev (from /frontend) http://localhost:5173 📐 Project Structure . ├── backend/ │ ├── config/ # DB connection │ ├── data/ # Mock data (products.js) │ ├── middleware/ # Auth protection (protect, admin) │ ├── models/ # Mongoose Schemas │ ├── routes/ # Express APIs │ ├── .env # Backend environment variables │ ├── seeder.js # Seeder script │ └── server.js # Server entry point └── frontend/ ├── src/ │ ├── assets/ # Static assets │ ├── components/ │ │ ├── Admin/ # Admin Dashboard UI │ │ ├── Cart/ # Cart components │ │ ├── Common/ # Navbar, Footer, ProtectedRoute, Searchbar │ │ └── Products/ # Product UI and filters │ ├── pages/ # Page-level components │ └── App.jsx # React Router ├── redux/ # Redux Toolkit │ ├── slice/ # Feature slices │ └── store.js # Store config └── .env

🔐 Authorization Details User Roles Role Access customer Standard shopping access, profile, orders, checkout admin Full access + admin dashboard Protected Routes Frontend

src/App.jsx uses:

Backend

backend/middleware/authmiddleware.js:

protect // verifies JWT admin // checks user's role

📝 License

This project is released under MIT License. Feel free to use, modify, and build upon it.

❤️ Contributing

Pull requests are welcome! Open an issue for new features or bugs.