🛒 E-Commerce Web App

A full-stack e-commerce platform built with the MERN stack, featuring separate user and admin dashboards, multiple payment methods, and a modern, responsive interface.

Try Live Demo at: ShopSphere Live Demo

✨ Features

👤 User Features

• 🔐 User authentication (Register/Login)
• 🛍️ Browse products with search and filter options
• 🛒 Shopping cart management
• 💳 Multiple payment methods:
  • Stripe integration
  • Razorpay integration
  • Cash on Delivery
• 📦 Order tracking and history
• 👤 User profile management
• 📱 Fully responsive design

🔧 Admin Features

• 📊 Admin dashboard with analytics
• ➕ Add/Edit/Delete products
• 📦 Order management
• 👥 User management
• 🖼️ Image upload with Cloudinary integration
• 📈 Sales tracking

🛠️ Tech Stack

Frontend

• React - UI Library
• React Router DOM - Navigation
• Tailwind CSS - Styling
• Axios - HTTP Client
• React Toastify - Notifications
• Vite - Build Tool

Backend

• Node.js - Runtime Environment
• Express.js - Web Framework
• MongoDB - Database
• Mongoose - ODM
• JWT - Authentication
• bcrypt - Password Hashing
• Cloudinary - Image Hosting
• Stripe & Razorpay - Payment Processing
• Multer - File Upload Middleware

📁 Project Structure

ecommerce-app/
├── frontend/          # User-facing React application
├── admin/            # Admin dashboard React application
├── backend/          # Node.js/Express API server
└── README.md

🚀 Getting Started

Prerequisites

• Node.js (v14 or higher)
• MongoDB Atlas account
• Cloudinary account
• Stripe account (for payment)
• Razorpay account (for payment)

Installation

1. Clone the repository

   git clone <repository-url>
   cd ecommerce-app

2. Install dependencies for all three parts

   # Backend
   cd backend
   npm install
   
   # Frontend
   cd ../frontend
   npm install
   
   # Admin
   cd ../admin
   npm install

3. Environment Variables Setup

   Create .env files in each directory:

   Backend (.env)

   MONGODB_URI=your_mongodb_connection_string
   JWT_SECRET=your_jwt_secret_key
   CLOUDINARY_NAME=your_cloudinary_name
   CLOUDINARY_API_KEY=your_cloudinary_api_key
   CLOUDINARY_SECRET_KEY=your_cloudinary_secret_key
   STRIPE_SECRET_KEY=your_stripe_secret_key
   RAZORPAY_KEY_ID=your_razorpay_key_id
   RAZORPAY_KEY_SECRET=your_razorpay_key_secret
   ADMIN_EMAIL=admin@example.com
   ADMIN_PASSWORD=your_admin_password
   PORT=4000

   Frontend (.env)

   VITE_BACKEND_URL=http://localhost:4000

   Admin (.env)

   VITE_BACKEND_URL=http://localhost:4000

Running the Application

You need to run three separate servers simultaneously:

1. Backend Server (Terminal 1)

   cd backend
   npm run server

   Server runs on: http://localhost:4000

2. Frontend (Terminal 2)

   cd frontend
   npm run dev

   Runs on: http://localhost:5173

3. Admin Panel (Terminal 3)

   cd admin
   npm run dev

   Runs on: http://localhost:5174

📦 Deployment on Vercel

Configure for Vercel Deployment

Each directory (frontend, admin, and backend) contains a vercel.json configuration file for deployment.

Deploy Steps

1. Install Vercel CLI

   npm install -g vercel

2. Deploy Backend

   cd backend
   vercel --prod

3. Deploy Frontend

   cd frontend
   vercel --prod

4. Deploy Admin

   cd admin
   vercel --prod

5. Update Environment Variables

   • Go to Vercel Dashboard > Project > Settings > Environment Variables
   • Add all required environment variables for each project
   • Update VITE_BACKEND_URL in frontend and admin to point to your deployed backend URL

Important Notes for Deployment

• Make sure MongoDB Atlas allows connections from anywhere (0.0.0.0/0) or add Vercel's IP ranges
• Update CORS settings in backend to allow your frontend and admin domains
• Set all environment variables in Vercel dashboard
• Backend will need serverless function configuration for API routes

🔑 API Endpoints

User Routes

• POST /api/user/register - Register new user
• POST /api/user/login - User login
• GET /api/user/profile - Get user profile

Product Routes

• GET /api/product/list - Get all products
• POST /api/product/add - Add new product (Admin)
• PUT /api/product/update - Update product (Admin)
• DELETE /api/product/remove - Delete product (Admin)

Cart Routes

• POST /api/cart/add - Add to cart
• GET /api/cart/get - Get user cart
• POST /api/cart/update - Update cart item

Order Routes

• POST /api/order/place - Place order
• GET /api/order/user - Get user orders
• GET /api/order/list - Get all orders (Admin)
• PUT /api/order/status - Update order status (Admin)

🔐 Default Admin Credentials

Email: admin@forever.com
Password: admin@123

🤝 Contributing

We welcome contributions from the community. If you want to help improve ShopSphere, follow this simple workflow:

1. Find an issue

   • Browse the issues list and pick something you can work on.
   • If possible, comment on the issue before starting so others know it is being handled.

2. Fork the repository

   • Create your own copy of the project on GitHub.
   • Clone your fork to your local machine.

3. Create a branch

   • Make a new branch for your fix or feature.
   • Use a clear branch name related to the task.

4. Make your changes

   • Follow the existing code style and keep changes focused.
   • Test your changes locally before submitting.

5. Commit your work

   • Write a clear commit message that explains what you changed.
   • Keep commits small and meaningful when possible.

6. Push and open a Pull Request

   • Push your branch to your fork.
   • Open a PR against the main branch of the original repository.
   • Include a short description of the change and any relevant screenshots or notes.

7. Review feedback

   • Respond to review comments if any changes are requested.
   • Update your branch and push again until the PR is ready to merge.

📝 License

This project is licensed under the MIT License.

👨‍💻 Author

Kallappa Murasiddh Kabboor

🙏 Acknowledgments

• MongoDB Atlas for database hosting
• Cloudinary for image hosting
• Stripe and Razorpay for payment processing
• Vercel for deployment platform

---