MERN E-commerce Application

Overview

This is a full-stack e-commerce application built using the MERN (MongoDB, Express.js, React.js, Node.js) stack. It provides a platform for online shopping with features such as product browsing, cart management, user authentication, and order processing.

Live Demo

Check out the live demo of this application:

MERN E-commerce Live Demo

Technologies Used

• Frontend: React.js, React Router, Axios
• Backend: Node.js, Express.js
• Database: MongoDB
• Authentication: JSON Web Tokens (JWT)
• State Management: React Context API
• Styling: CSS Modules or Styled Components (specify which one you're using)
• Deployment: Versal (frontend), Render (backend)

Prerequisites

Before you begin, ensure you have the following installed on your local machine:

• Node.js (v14 or later)
• npm (usually comes with Node.js)
• MongoDB (v4 or later)

Installation & Setup

1. Clone the repository

   git clone [(https://github.com/amankumar94728/E-commerce)t](https://github.com/amankumar94728/E-commerce)
   cd ecommerce-mern

2. Set up the backend

   cd server
   npm install

   Create a .env file in the server directory with the following content:

   PORT=3000
   MONGODB_URI=mongodb://localhost:27017/ecommerce
   JWT_SECRET=your_jwt_secret_here
   
   CLOUDINARY_CLOUD_NAME=dhcpsqprl
   CLOUDINARY_API_KEY= Enter your CLOUDINARY_API_KEY
   CLOUDINARY_API_SECRET=Enter your CLOUDINARY_API
   
   PAYPAL_MODE=Enter your PAYPAL_MODE
   PAYPAL_CLIENT_ID= Enter your PAYPAL_CLIENT_ID
   PAYPAL_CLIENT_SECRET=Enter your PAYPAL_CLIENT_SECRET
   
   
   

   Replace your_jwt_secret_here with a secure random string.

3. Set up the frontend

   cd ../client
   npm install

   Create a .env file in the client directory with the following content:

   REACT_APP_API_URL=http://localhost:3000/api
   

4. Start the application

   In one terminal, start the backend server:

   cd server
   npm run dev

   In another terminal, start the frontend development server:

   cd client
   npm start

   The application should now be running, with the backend on http://localhost:3000 and the frontend on http://localhost:5173.

Project Structure

ecommerce-mern/
├── client/                 # React frontend
│   ├── public/
│   ├── src/
│   │   ├── components/     # Reusable React components
│   │   ├── pages/          # React components for different pages
│   │   ├── context/        # React context for state management
│   │   ├── services/       # API service functions
│   │   ├── App.js          # Main React component
│   │   └── index.js        # Entry point of the React application
│   ├── package.json
│   └── ...
├── server/                 # Node.js & Express backend
│   ├── config/             # Configuration files
│   ├── controllers/        # Request handlers
│   ├── models/             # Mongoose models
│   ├── routes/             # API routes
│   ├── .env
│   ├── server.js           # Main application file
│   ├── package.json
│   └── ...
├── .gitignore
└── README.md

API Endpoints

• GET /api/products: Get all products
• GET /api/products/:id: Get a single product
• POST /api/users/register: Register a new user
• POST /api/users/login: Login a user
• GET /api/orders: Get all orders (requires authentication)
• POST /api/orders: Create a new order (requires authentication)

For a full list of API endpoints and their usage, please refer to the API documentation (if available) or the route files in the server/routes directory.

Deployment

This application is deployed using the following services:

• Frontend: Versal
• Backend: Render
• Database: MongoDB Atlas

To deploy your own version:

1. Set up a MongoDB Atlas cluster and obtain the connection string.
2. Deploy the backend to Render, setting the necessary environment variables.
3. Update the REACT_APP_API_URL in the frontend to point to your Render backend URL.
4. Deploy the frontend to Versal, setting up the build command and publish directory.

Contributing

We welcome contributions to this project. Please follow these steps to contribute:

1. Fork the repository
2. Create a new branch (git checkout -b feature/AmazingFeature)
3. Make your changes
4. Commit your changes (git commit -m 'Add some AmazingFeature')
5. Push to the branch (git push origin feature/AmazingFeature)
6. Open a Pull Request

Acknowledgments

• Thanks to all contributors who have helped with this project.
• Special thanks to [any specific libraries or resources you want to acknowledge].

Project Link: https://github.com/amankumar94728/E-commerce