MegaBasket E-commerce Platform

A modern, full-stack e-commerce application built with the MERN stack (MongoDB, Express, React, Node.js).
Explore the features »

---

About The Project

MegaBasket is a feature-rich e-commerce platform designed to provide a seamless shopping experience for customers and a comprehensive management dashboard for administrators. This project demonstrates the practical application of modern web development technologies to build a scalable and robust online store.

🛠️ Built With

• Frontend:
  • React.js (with Vite)
  • React Router for navigation
  • Axios for API requests
  • Standard CSS with some reusable components
• Backend:
  • Node.js
  • Express.js
  • MongoDB with Mongoose ODM
• Authentication:
  • JSON Web Tokens (JWT) for secure API access
  • Google OAuth for social login
• File Storage:
  • AWS S3 for product and category image hosting

---

✨ Key Features

For Customers:

• 🔐 Authentication: Secure user registration and login with email/password and Google.
• 🔍 Product Discovery: Advanced search, filtering (by price, category, brand, etc.), and sorting.
• 📄 Product Pages: Detailed product information, multiple images, specifications, and pricing.
• 🛒 Shopping Cart: Add, update, and remove products from the cart.
• 💳 Checkout: Smooth and secure checkout process.
• 👤 User Profile: Manage personal information and view order history.
• 📱 Responsive Design: Fully responsive interface for a great experience on any device.

For Admins:

• 📊 Dashboard: At-a-glance view of key metrics like total sales, orders, and new customers.
• 📦 Product Management: Full CRUD operations for products, including image uploads and inventory tracking.
• 🗂️ Category Management: Manage main categories and sub-categories with images.
• 📋 Order Management: View and update order statuses.
• 👥 User Management: View and manage customer accounts.
• 🖼️ Banner Management: Control promotional banners on the homepage.
• 🔒 Secure Access: Protected admin routes and functionalities.

---

🚀 Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

• Node.js (v16 or later)
• npm or yarn
• MongoDB (a local instance or a cloud service like MongoDB Atlas)
• AWS S3 bucket and credentials for file uploads.

Installation & Setup

1. Clone the repository:

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

2. Backend Setup:

   • Navigate to the backend directory: cd backend
   • Install dependencies: npm install
   • Create a .env file by copying the example: cp .env.example .env
   • Fill in your environment variables in .env (MongoDB URI, JWT Secret, AWS keys, etc.).

3. Frontend Setup:

   • Navigate to the frontend directory: cd ../frontend
   • Install dependencies: npm install
   • The frontend is configured to proxy API requests to http://localhost:5000. If your backend runs on a different port, you may need to update the proxy setting in frontend/vite.config.js.

---

🏃‍♂️ Running the Application

You need to run both the backend and frontend servers concurrently in separate terminal windows.

1. Run the Backend Server:

   • In the backend directory:

     npm run dev

   • The server will start on http://localhost:5000 (or the port specified in your .env file).

2. Run the Frontend Development Server:

   • In the frontend directory:

     npm run dev

   • The React application will open in your browser, typically at http://localhost:5173.

Now you can access the application in your web browser.

---

📂 Project Structure

The project is organized into two main folders: frontend and backend.

/
├── backend/
│   ├── config/         # Database connection, etc.
│   ├── controllers/    # Request handling logic
│   ├── models/         # Mongoose schemas
│   ├── routes/         # API routes
│   ├── server.js       # Main server entry point
│   └── .env.example    # Environment variable template
│
└── frontend/
    ├── public/         # Static assets (e.g., payment icons)
    ├── src/
    │   ├── components/ # Reusable React components
    │   ├── layouts/    # Page layouts (Root, Admin)
    │   ├── pages/      # Page components
    │   ├── App.jsx     # Main App component with routing
    │   └── main.jsx    # Frontend entry point
    └── vite.config.js  # Vite configuration

---

troubleshooting

Vite Errors (e.g., "Cannot read properties of undefined"): Sometimes the Vite development server cache or dependencies can become corrupted. If you see strange errors related to Vite or its plugins, follow these steps:

1. Stop the frontend development server.
2. In the frontend directory, delete the node_modules folder and the package-lock.json file.
3. Run npm install again.
4. Restart the server with npm run dev.

---

📄 License

Distributed under the MIT License. See LICENSE for more information.

Copyright (c) 2025 Saurabh Kumar