https://github.com/aakashsharma7/ecommerce-mern-website
Seamless shopping, search and explore different product categories, add products to cart, and checkout swiftly. Become a seller and add products, monitor sales, and gather customer feedback.
https://github.com/aakashsharma7/ecommerce-mern-website
ecommerce ecommerce-website material-ui mern mern-stack moongose nodejs reactjs redux-toolkit
Last synced: 3 months ago
JSON representation
Seamless shopping, search and explore different product categories, add products to cart, and checkout swiftly. Become a seller and add products, monitor sales, and gather customer feedback.
- Host: GitHub
- URL: https://github.com/aakashsharma7/ecommerce-mern-website
- Owner: aakashsharma7
- Created: 2025-02-27T14:13:29.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-02-27T14:23:43.000Z (3 months ago)
- Last Synced: 2025-02-27T20:15:33.949Z (3 months ago)
- Topics: ecommerce, ecommerce-website, material-ui, mern, mern-stack, moongose, nodejs, reactjs, redux-toolkit
- Language: JavaScript
- Homepage: https://ecommerce-aakash-sharma.vercel.app/
- Size: 346 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
SHOPCART: Ecommerce Site
Seamless shopping, search and explore different product categories, add products to cart, and checkout swiftly.
Become a seller and add products, monitor sales, and gather customer feedback.
# About
ShopCart is an ecommerce site developed using the MERN (MongoDB, Express.js, React, Node.js) stack. It offers a user-friendly and efficient shopping experience for customers, while providing sellers with essential tools to manage their products and sales.
## Features
- **User Registration:** ShopCart allows users to register as customers or sellers, enabling a tailored shopping experience.
- **Cart System:** Customers can add products to their cart for easy checkout. The cart allows them to review and manage their selections before completing the purchase.
- **Product Search:** ShopCart offers a search functionality where customers can find products by name or browse through categories such as Electronics, Clothes, Kitchen, and more.
- **Reviews and Ratings:** Customers can leave reviews and ratings (out of 5) for products they've purchased, providing valuable feedback for sellers and building trust within the community.
- **Seller Dashboard:** Sellers have access to a dedicated dashboard where they can manage their products, view sales data, and gain insights into their store's performance through data visualization.
- **Product Management:** Sellers can add products with detailed information and set their prices. They can also check which customers have added their products to their carts.
- **Order Tracking:** Sellers can monitor the products ordered by customers, helping them stay organized and fulfill orders efficiently.
## Technologies Used
- Frontend: React.js, Material UI, Redux Toolkit, Styled Components
- Backend: Node.js, Express.js, JWT Token
- Database: MongoDB
- Data Visualization: React Apexcharts
# Installation
Open 2 terminals in separate windows/tabs.
Terminal 1: Setting Up Backend
```sh
cd backend
npm install
npm start
```
Create a file called .env in the backend folder.
Inside it write this :
```sh
MONGO_URL = mongodb://127.0.0.1/ecommerce
SECRET_KEY = 'secret-key'
```
Instead of this link write your database link.
Terminal 2: Setting Up Frontend
```sh
cd frontend
npm install
npm start
```
Now, navigate to `localhost:3000` in your browser.
The Backend API will be running at `localhost:5000`.
# Error Solution
If you encounter a network error while signing up, follow these steps to resolve it:
1. Navigate to the `src > redux > userHandle.js` file.
2. Add the following line after the import statements:
```javascript
const REACT_APP_BASE_URL = "http://localhost:5000";
```
3. Replace all instances of `process.env.REACT_APP_BASE_URL` with `REACT_APP_BASE_URL`.
The issue arises because the `.env` file in the frontend may not work for all users, while it works for me.
These steps should resolve the network error in the frontend. If the issue persists, feel free to contact me for further assistance.
Don't forget to leave a star for this project if you found the solution helpful. Thank you!
# Deployment
* Render - server side
* Vercel - client side