MERN-Stack E-commerce Project live

This comprehensive E-commerce project is developed using the MERN stack , which includes ReactJS, NodeJS, MongoDB, and ExpressJS. It offers user authentication, a shopping cart, search functionality with category filters, an admin panel for product and category management, and global state management through Context API.

Features

• User Authentication: Secure user registration, login, and password reset functionalities.
• Cart Functionality: Enable users to manage their shopping cart by adding/removing items.
• Search with Category Filters: Allow users to search and filter products by categories.
• Admin Panel: Secure access for administrators to manage products and categories via CRUD operations.
• Global State Management: Utilize Context API for efficient global state management.
• Third-Party Libraries:
  • React-Toast: Display informative messages or notifications to users.
  • Context API: Manage global states efficiently.

Admin Panel Usage

• Managing Products:
  • Use the admin panel to add, edit, or delete products.
• Managing Categories:
  • Admins can perform CRUD operations on product categories.

Tech Stack

Frontend

• React.js
• Redux-Toolkit
• Context API
• React-Toastify
• react-router-dom
• web-vitals
• TailwindCSS

Backend

• Node.js
• Express.js
• MongoDB (Mongoose)

Deployment

This Ecommerce project is deployed on various cloud-based services:

• Front-end: Vercel for static site hosting.
• Back-end: Render for Node.js and MongoDB hosting.
• Media Files: Cloudinary for media content storage.
• Database: MongoDB Atlas for database hosting.

This infrastructure ensures scalability, security, and reliability.

Installation and Setup

To start building your own components and styles, follow these steps:

1. Clone the repository to your local machine.

   git clone https://github.com/TheChiragKhaitan/Ecommerce.git
   

2. Install the required packages.

   npm install
   

3. Start the development server.

   for backend :-

   npm run dev 
   

   for frontend :-

   npm start 
   

4. Open the project in your browser at http://localhost:3000 to view your project.

Contributing

Contributions are welcome! If you have any suggestions or find any issues, please feel free to open an issue or a pull request.

Contact

If you wish to connect with me, you can reach out through the following channels:

© 2024 Chirag Khaitan