E-Commerce Website (MERN Stack)

Description

This project is a fully functional e-commerce website built using the MERN (MongoDB, Express, React, Node.js) stack. It features user authentication, product management, a shopping cart, order placement, and payment gateway integration. The admin dashboard allows for efficient store management, including order tracking and product uploads.

Features

• Frontend: Built with Vite React, including pages for home, collections, product details, cart, orders, login, about, and contact.
• Backend: Node.js and Express handle APIs, user authentication, and database management.
• Authentication: Secure user and admin authentication using JWT.
• Product Management: Upload, edit, and delete products via an admin dashboard.
• Cart & Order Management: Add products to the cart, place orders, and track them in the admin panel.
• Payment Integration: Supports Stripe and Razorpay for secure transactions.
• Image Uploads: Uses Cloudinary and Multer for efficient image storage and handling.
• Deployment: Fully deployed on Vercel for easy access.

Project Structure

1. Frontend: Vite React setup, routing, and UI components.
2. Backend: API development with Express and MongoDB.
3. Authentication: User registration and admin verification.
4. Product Features: Uploading and displaying products.
5. Cart & Orders: Managing user purchases and tracking orders.
6. Admin Dashboard: Overview and control over website operations.
7. Payments: Secure integration with Stripe and Razorpay.
8. Image Uploads: Implemented using Cloudinary and Multer.
9. Deployment: Final hosting on Vercel.

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/mern-ecommerce.git

2. Navigate to the project directory:

   cd mern-ecommerce

3. Configure environment variables:
   • backend: create backend/.env with MONGODB_URI (must start with mongodb:// or mongodb+srv://), JWT_SECRET, ADMIN_EMAIL, ADMIN_PASSWORD, and Cloudinary keys. See backend/config/mongodb.js and related config.
   • frontend and admin: set VITE_BACKEND_URL in each app’s .env (e.g. http://localhost:4000/). A trailing slash is optional; the app normalizes the base URL and uses paths like api/....
4. Install dependencies (from the repository root, where frontend, backend, and admin are sibling folders):

   cd frontend
   npm install
   cd ../backend
   npm install
   cd ../admin
   npm install

5. Start the development servers — use three terminals, each opened at the repository root:

   cd frontend
   npm run dev

   Opens the shop at http://localhost:5173/.

   cd backend
   npm run dev

   Same as npm run server (nodemon). API at http://localhost:4000/ by default.

   cd admin
   npm run start

   Same as npm run dev. Admin UI at http://localhost:5174/.

Technologies Used

• Frontend: React, Redux, React Router
• Backend: Node.js, Express, MongoDB
• Authentication: JWT
• Payment: Stripe, Razorpay
• Image Uploads: Cloudinary, Multer
• Deployment: Vercel

Deployment

To deploy the project on Vercel:

1. Push the code to GitHub.
2. Connect the repository to Vercel.
3. Deploy both the frontend and backend separately.

Credits : https://youtu.be/7E6um7NGmeE?si=3tdDDz2_2CrXqJwe

Contributors

• Divanshi Jain - GitHub Profile

License

This project is licensed under the MIT License.