Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sahiltiwariiii/ecommerce-famous-mern-app
This is famous Ecommerce app
https://github.com/sahiltiwariiii/ecommerce-famous-mern-app
Last synced: about 2 months ago
JSON representation
This is famous Ecommerce app
- Host: GitHub
- URL: https://github.com/sahiltiwariiii/ecommerce-famous-mern-app
- Owner: sahilTiwariiii
- Created: 2023-07-24T12:29:47.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-07-24T12:54:56.000Z (over 1 year ago)
- Last Synced: 2023-07-24T14:53:17.868Z (over 1 year ago)
- Language: JavaScript
- Size: 2.21 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
---
# 🛍️ **Ecommerce-famous-MERN-app**
This is a **full-featured, modern, and scalable eCommerce app** built using the MERN stack (MongoDB, Express.js, React.js, and Node.js) 🌍. It includes an **admin dashboard** for managing products, categories, and users, along with a **payment gateway** integration 💳 for smooth transactions. The app offers a seamless shopping experience for users and an easy-to-manage backend for admins.
---
## 🚀 **Features**
- **🛒 Product Management**: Add, update, delete products with categories.
- **📊 Admin Dashboard**: Manage products, categories, users, and view sales analytics.
- **💳 Payment Gateway Integration**: Secure and fast checkout process using payment APIs.
- **🛠️ Full-Stack MERN**: Efficient backend with RESTful API, and responsive, interactive frontend.
- **🔍 Search & Filter**: Easily find products with search and filtering options.
- **✨ User Authentication**: Secure login and registration for users and admins.
- **📱 Mobile-Responsive**: Optimized for all device types (mobile, tablet, desktop).---
## 🛠️ **Technologies Used**
- **Frontend**:
- [React.js](https://reactjs.org/) (for interactive UI)
- **Axios** for making HTTP requests 🌐
- **React-toastify** for elegant notifications 🔔
- **Redux** for state management 🧠
- **React-router-dom** for dynamic routing 🛣️- **Backend**:
- [Node.js](https://nodejs.org/) + [Express.js](https://expressjs.com/) (for REST API)
- **MongoDB** for database 💾
- **JWT** for authentication and authorization 🔐
- **bcryptjs** for password hashing 🔑
- **Multer** for image uploads 🖼️---
## 🖥️ **Screenshots**
Here are some glimpses of the application:
### User Dashboard
![User Dashboard](https://github.com/user-attachments/assets/db45526d-9461-40c5-bed9-a19b7a9da9c9)### Admin Product Management
![Admin Product Management](https://github.com/user-attachments/assets/5f1c31c9-255d-4f84-82e3-573aec3d5228)### Payment Page
![Payment Page](https://github.com/user-attachments/assets/3c902798-4260-4f62-9ced-e3e35e80407f)---
## 🏗️ **Installation & Setup**
To run this project locally:
1. **Clone the repository**:
```bash
git clone https://github.com/sahilTiwariiii/Ecommerce-famous-MERN-app
```
2. **Install frontend dependencies**:
```bash
cd frontend
npm install
```3. **Install backend dependencies**:
```bash
cd backend
npm install
```4. **Set up environment variables**:
- Create a `.env` file in the root of the backend folder and add:
```
MONGO_URI=your_mongoDB_connection_string
JWT_SECRET=your_jwt_secret_key
STRIPE_SECRET_KEY=your_stripe_secret_key
```5. **Run the application**:
- Run the backend server:
```bash
cd backend
npm run server
```
- Run the frontend server:
```bash
cd frontend
npm start
```---
## 🌟 **Key Packages**
- **Axios**: Simplified HTTP requests and APIs integration.
- **React-toastify**: Customizable toast notifications for a better UX.
- **Redux**: Efficient state management.
- **Multer**: File handling middleware for image uploads.
- **Stripe**: Payment gateway integration for processing secure payments.
- **JWT**: Securing routes with token-based authentication.---
## 👨💻 **Author**
**Your Name** - [GitHub](https://github.com/sahilTiwariiii)
Frontend Developer & Full-Stack MERN Developer with experience in building scalable web apps and modern eCommerce solutions.---
## 📸 **More Screenshots**
At the end, here are more visuals showcasing different parts of the application:
![Checkout Page](https://github.com/user-attachments/assets/bd716123-4fa7-43f6-8a17-ea0dca551962)
![Product List](https://github.com/user-attachments/assets/7f7727cb-b4aa-43b3-b1d9-5e5f012854a9)
![Cart Page](https://github.com/user-attachments/assets/ff579bb6-9736-47a0-a9a5-f1a91e29c20e)---
## 🎯 **Future Enhancements**
- Add product reviews and ratings ⭐
- Implement advanced search and filter options 🔍
- Integrate email notifications for order status updates 📧---