Skip to content

A fully-functional multi vendor e-commerce website like amazon. MERN stack e-commerce project.using MERN stack (MongoDB, ExpressJS, React and Node.JS).

Notifications You must be signed in to change notification settings

pattjoshi/Multi_vondor_E_shop

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

26 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

image

🌟 MERN Marketplace 🌟

The MERN Marketplace application will allow users to become sellers, who can manage shops, and add the products they want to sell in each shop. Admin can control functionality of Seller Users who visit MERN Marketplace will be able to search for and browse products they want to buy, and add products to their shopping cart to place an order. we have 3 Order Method.

πŸ–₯️ Tech Stack

Frontend:

reactjsΒ  react-routerΒ  reduxΒ  tailwindcssΒ  muiΒ  PayPal

Backend:

nodejsΒ  expressjsΒ  mongodbΒ  jwtΒ 

Realtime Communication:

socketio

package manager

Yarn

πŸš€ Features

  • User Authentication Pages πŸšͺ

    • User Signup πŸ“
      • email verification
      • upload a Profile image
    • User Login πŸ”
  • Home Page 🏠

    • View all product uploads by seller πŸ“ƒ
    • filter with the category πŸ“Š
    • Best-selling product (Sort by Sold_out data) πŸ’Ž
    • All Product πŸ“¦
    • All Event's 🎊
    • FAQ πŸ™‹
  • Filters for Sorting Posts πŸ—‚οΈ

    • Sort posts by Clothes, Shows, gifts, etc...
  • User Search Bar πŸ”

    • Search for product πŸ”Ž
    • Click on a user to go to the Product details page πŸ‘€
  • wish list ❀️

    • store in cart πŸ‘€
  • Add to cart πŸ›’

    • Check out for payment πŸ’³
      • we have 3 payment systems Pay-pal,Strip,Cash of Delivery (COD)
  • Apply Coupon Code for Discount πŸ‘‰πŸ’₯

  • Product Explore Page πŸ”

    • View Product from another seller 🌍
    • View reviews from other users ⭐
    • The eye button shows Product Details πŸ‘
    • Original Price and discount price πŸ’΅
    • HowMeney Buy this product 🀝
    • Inc and Dec product πŸ“‰ +
    • Show Description of product πŸ“ƒ
    • View Seller Profile πŸ‘₯
    • Chating with Seller πŸ’¬
    • Show Seller Information πŸ“‹
    • Show Related Products πŸ”—
    • Add to wish list ❀️
    • Add to Cart πŸ›’
  • User Profile Page πŸ‘€

    • Edit your profile details - profile photo, name, email, phone number ✏️
    • change Password πŸ”
    • View All Order πŸ‘¨πŸΎβ€πŸ’».
    • After Delivery of the product user can Refund the product. πŸ”™
    • User inbox Chat with the seller. βœ‰οΈ
    • Use can Track Orders. πŸ›€οΈ
    • Store 3 Address Details. Like Default, Home, office. πŸ“«
    • Only Admin show Admin Dashboard πŸ‘‘
    • Logout πŸ”š
    • Create a Review After Delivery Product πŸš›
    • After the Buy product is Sold out is increased. and Stock decrease in DB.
  • Message βœ‰οΈ

    • Sand Image πŸ–ΌοΈ
    • Show active or not 🟒
    • Time of sand Message ⏰
  • Popular Events πŸ’₯

    • Show Recent Events
  • Responsive πŸ“±

    • All screens are responsive
  • Alerts 🚨

    • Alerts in the app to notify users about success/failure operations
  • Seller Authentication Pages πŸšͺ

    • Seller Signup πŸ“
      • shop name, Phone Number, Email address, Address,Zip Code, Password ✍
      • upload a Profile image πŸ“·
      • email verification βœ…
    • Seller Login πŸ”
  • Seller Dashboard πŸ‘¨πŸ»β€πŸ”§

    • Overview of a Product and Latest Orders πŸ–‡οΈ
    • Account Balance (with 10% service charge) πŸ’°
  • All Orders βš–

    • Seller Update Product Delivery status πŸ“†
    • Create Products βœ”οΈ
      • name*
      • Description *
      • Category * like:- Computer and Laptops, Cosmetics and body care, Accessories, clothes,Shoes, Gifts, Pet Care, Mobile and Tablets, Music and Gaming, Other 🧩
    • All product πŸ’»
      • Seller can delete Product ❌
      • View all Products πŸ“¦
  • Create an Event πŸ’₯πŸŽ‰

    • name* πŸ“‡
    • Description *
    • Category * like:- Computer and Laptops, Cosmetics and body care,Accessories, Clothes, Shoes,Gifts, Pet Care, Mobile and Tablets, Music and Gaming, Other
    • Tags
    • Original Price
    • Price (With Discount) *
    • Product Stock *
    • Event Start Date * βœ…
    • Event End Date * (Default 3 days) β›”
    • Upload multiple Images * πŸ“·
  • All Event πŸŽ‰

    • Show Event πŸ’₯
    • Delete Event β›”
  • Withdraw Money πŸ“₯

    • Add Bank Details πŸ›οΈ
    • Not withdraw the highest amount of Balance πŸ’±
    • Sand mail to sell with amount πŸ“©
    • Delete Bank Details πŸͺ§
  • Shop Inbox πŸ“ž

    • All Messages πŸ“¬
    • Sand Image to user πŸ–ΌοΈ
    • Show Activ function 🟒
  • Discount Codes 🎟️

    • Create coupon code πŸ–±
    • Delete coupon code πŸ›‘
    • apply all Products of the shop 🀩
    • Can apply the specific product 1οΈβƒ£β˜οΈ
  • Refunds πŸ”™

    • Seller can update the Status of the Product πŸ”„
  • Settings βš›

    • update Images, Shop Address, Shop Phone Number, Shop Zip Code β›“
    • Add Shop description πŸ“–
  • Shop Desboard 🎰

    • Shop Products πŸŒƒ
    • Running Events πŸŽͺ
    • Shop Reviews ⭐
    • Log out β†ͺ️
  • Admin Authentication Pages (normal user in DB roll in Admin) πŸšͺ

    • Admin Signup πŸ“
    • Admin Login πŸ”
    • Overview πŸ‘” - Total Earning πŸ€‘ - All Sellers πŸ‘¨β€πŸ”§ - All Orders πŸ›οΈ - Latest Orders πŸ”’
    • Show All Orders of Seller's πŸ›οΈ
    • Show All sellers and Delete β›”
    • Show All users and Delete πŸ‘¨β€πŸ‘©β€πŸ‘¦β€πŸ‘¦ β›”
    • All Products in DB. πŸ‘¨πŸ»β€πŸ’»
    • All Events of Seller πŸ“’
    • verify Seller Withdraw request and Sand mail to update's πŸ“§
    • if Delete images it also deletes from the local devise

πŸ“Ή Video Demo

  • Video Size is high So, I can not upload it to Github.I upload it to youtube.Vedo Demo heaar

Sneak Peek of Home Page πŸ™ˆ :

home

image <image
image image

User Profile Page πŸ‘₯ :

userHome

image image
image image
image image

Product Page βš™οΈ

image
image image
image image
image image

🧾 Receipt

image
image image
image image
image image

Seller page πŸ›οΈ

image
image image
image image
image image
image image
image image
Mobile View Desktop View
image image
image image
image image

Admin Dashbard πŸ‘€

adminDs
image image
image image
image image
image

Project description πŸ“

🌟 Introducing MERN Marketplace: A Revolutionary Multi-Vendor Website 🌟

πŸš€ Dear LinkedIn Network, I am thrilled to announce the completion of my latest project, the MERN Marketplace! 🌟 This dynamic platform brings together buyers and sellers, offering a seamless online shopping experience with a plethora of innovative features.

πŸ’‘ Key Technologies: Front-End:

React 18:- user interface

React Router: client-side routing

Redux: Employing Redux for state management, ensuring centralized data handling and seamless interactions between components.

Tailwind CSS: Leveraging the power of Tailwind CSS for streamlined and responsive UI design, enabling rapid development and customization.

Material-UI: Integrating Material-UI components to enhance the visual appeal and usability of the website.

Back-End:

Node.js: Utilizing Node.js as the server-side runtime environment to build scalable and efficient backend services.

Express.js: Harnessing the power of Express.js, a fast and minimalist web application framework, to handle routing and middleware.

JWT (JSON Web Tokens): Implementing JWT-based authentication for secure and stateless user sessions.

MongoDB: Leveraging MongoDB, a NoSQL database, for efficient data storage and retrieval, enabling seamless scalability.

Real-time Communication: Utilizing Socket.io to enable real-time communication between buyers, sellers, and the application server.

Yarn: Employing Yarn as the package manager to manage project dependencies efficiently.

Image Upload with Multer: Integrating Multer middleware to handle image uploads, ensuring seamless storage and retrieval of product images.

Email Communication with Nodemailer: Implementing Nodemailer to facilitate email communication, including email verification and notifications.

πŸ’‘ Key Features: 1️⃣ User Authentication Pages πŸšͺ

User Signup: Enable users to create accounts, complete with email verification and the option to upload a profile image.

User Login: Secure login functionality to protect user accounts.

2️⃣ Home Page 🏠

View Seller Products: Showcase all product uploads by sellers, allowing users to browse and explore various offerings.

Category Filters: Implement filters to help users narrow down their search by selecting specific product categories.

Best-Selling Products: Highlight popular products based on the number of units sold, aiding users in making informed decisions.

Events Section: Display all upcoming events, fostering engagement and excitement among users.

Frequently Asked Questions (FAQ): Provide a dedicated section to address common user queries.

3️⃣ Filters for Sorting Posts πŸ—‚οΈ

Sort by Category: Enable users to filter posts by different categories, such as clothes, shoes, gifts, and more.

4️⃣ User Search Bar πŸ”

Search Functionality: Implement a robust search feature, allowing users to search for specific products or click on user profiles to view their offerings.

5️⃣ Wishlist and Cart Management β€οΈπŸ›’

Wishlist: Enable users to add products to their wishlist, saving them for future reference.

Add to Cart: Provide a seamless shopping experience by allowing users to add products to their cart for purchase.

Checkout and Payment: Implement a secure payment system, supporting PayPal, Stripe, and Cash on Delivery (COD) options.

Apply Coupon Code: Allow users to apply coupon codes for discounts during the checkout process.

6️⃣ Product Explore Page πŸ”

Detailed Product Information: Display product details, including original and discounted prices, descriptions, seller information, and related products.

Seller Interaction: Facilitate direct communication between users and sellers through chat functionality.

Reviews and Ratings: Showcase reviews and ratings from other users to help inform purchasing decisions.

7️⃣ User Profile Page πŸ‘€

Profile Editing: Allow users to edit their profile details, including profile photos, names, email addresses, and phone numbers.

Order History: Provide users with an overview of all their previous orders, allowing them to track deliveries and request refunds if necessary.

Inbox and Chat: Enable users to communicate with sellers, fostering a seamless exchange of information.

Address Management: Allow users to store multiple addresses for efficient checkout, including default, home, and office options.

8️⃣ Seller Dashboard πŸ‘¨πŸ»β€πŸ”§

Product and Order Management: Provide sellers with an overview of their products and the latest orders, along with the ability to update delivery statuses.

Event Creation: Allow sellers to create and manage events, including details such as event name, description, category, dates, and images.

Shop Settings: This enables sellers to update their shop information, including images, addresses, phone numbers, and descriptions.

Inbox and Communication: Facilitate communication between sellers and users, ensuring a smooth exchange of information.

9️⃣ Admin Dashboard πŸ‘‘

Admin Authentication: Implement secure login functionality for admins.

Overview and Analytics: Provide admins with an overview of total earnings, all sellers, all orders, and the latest orders.

Seller and User Management: Enable admins to manage sellers and users, including the ability to delete accounts if necessary.

Product and Event Management: Allow admins to view all products and events in the database, facilitating efficient management.

Withdrawal Management: Provide admins with the ability to verify seller withdrawal requests, update balances, and send email notifications.

Image Management: Enable admins to delete images, ensuring data integrity and storage optimization.

πŸš€ With the power of these cutting-edge technologies, the MERN Marketplace delivers a robust and feature-rich multi-vendor website. It ensures a seamless user experience, efficient data management, real-time communication, and secure transactions. Join me in revolutionizing the e-commerce experience by connecting buyers and sellers in a dynamic and user-friendly environment.

Feel free to reach out to me for more information or to explore collaboration opportunities.

#MERNMarketplace #Ecommerce #React #NodeJS #ExpressJS #MongoDB #SocketIO #TailwindCSS #MaterialUI #Innovation #OnlineShopping #RevolutionizingRetail

IMPORTANT NOTE -

This project does not have a mongoDB connection setup. Set up the connection based on the environments below.

  • local development: create a config folder (make sure to name it .env) in the config folder, which exports your db.uri connection.
  • (make new folder uploads) in the backend.

File structure

client - Holds the client application

  • public - This holds all of our static files

  • src

    • assets - This folder holds assets such as images, docs, and fonts

    • components - This folder holds all of the different components that will make up our views

      • Admin
      • cart
      • Checkout
      • Events
      • layout
      • Logout
      • Payment
      • Products
      • Profile
      • Route
      • Shop
      • Signup
      • Wishlist
    • pages - This folder holds All pages Admin, shop, user

      • Shop
    • redux - This folder holds all states of the Web app

      • action
      • reducer
    • static - This folder holds Static file like logo categorie

    • App.js - This is what renders all of our browser routes and different views

    • index.js - This is what renders the react app by rendering App.js, should not change

  • package.json - Defines npm behaviors and packages for the client

server - Holds the server application

  • config - This holds our configuration files, like mongoDB uri

  • controller - These hold all of the callback functions that each route will call

  • db - These hold all of Data Base Connection

  • middleware - These hold all error handle

  • models - This holds all of our data models

  • uploads - Store all image in hear

  • utils - This holds all of our HTTP to URL. jwtToken and sand mail, Token gentrare

  • mlter.js - Sand mail login

  • server.js - Defines npm behaviors and packages for the client

  • package.json - Defines npm behaviors like the scripts defined in the next section of the README

socket - Socket.io is use to chaing feacher

  • .env
  • index.js
  • package.json

.gitignore - Tells git which files to ignore

README - This file!


πŸ’» How to run the app locally! πŸƒ

STAP-1

git clone https://github.com/pattjoshi/Multi_vondor_E_shop.git

STAP-2

  • cd frontend
  • yarn install
  • yarn start

STAP-3

  • cd backend
  • yarn install
  • create folder uploads
  • create confilg folder and a .env file
  • use your Cradincial in.env file
PORT = 8000
DB_URL = ""
JWT_SECRET_KEY = ""
JWT_EXPIRES = 7d
ACTIVATION_SECRET = 
SMPT_HOST = 'smtp.gmail.com'
SMPT_PORT = 465
SMPT_PASSWORD = 
SMPT_MAIL =
STRIPE_API_KEY = 
STRIPE_SECRET_KEY = 
  • yarn start

STAP-4

  • cd socket
  • yarn install
  • create a .env file
PORT = 4000
  • yarn start

πŸ™ If you find this repo helpful then don't forget to give a star ❇️ to this repository. :)

Animated footer bars


Back to top

@copyright by Om Pattjoshi 2023