Product Page ⚙️

🌟 MERN Marketplace || Ecommerce-Shopify 🌟

Built a MERN Marketplace enabling users to become sellers, manage shops, and list products for sale. Visitors can search, browse, and add items to their cart for purchasing. Implemented secure non-volatile messaging, JWT authentication, and email verification for communication between sellers and buyers. Integrated Stripe and Paypal payment for seamless transactions.

🖥️ Tech Stack

Frontend:

Backend:

Realtime Communication:

package manager

Show Error: Toastify
Data Fetch from Backent: axios
Icons: react-icons
Payment stripe: Strip
Payment Paypal: Strip
Store Date in Cookes: js-cookie
Sand maill to User,seller,Admin: nodemailer
Store Img in Local Dev: multer

🚀 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 💵
- How Many Buy this product 🤝
- Inc and Dec product 📉 +
- Show Description of product 📃
- View Seller Profile 👥
- Chatting 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 Sign up 📝
  - 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 Active 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 Dashboard 🎰
- Shop Products 🌃
- Running Events 🎪
- Shop Reviews ⭐
- Log out ↪️
Admin Authentication Pages (normal user in DB roll in Admin) 🚪
- Admin Sign up 📝
- 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

Sneak Peek of Home Page 🙈 :

	<

User Profile Page 👥 :

Product Page ⚙️

🧾 Receipt

Seller page 🛍️

Mobile View	Desktop View

Admin Dashboard 👤

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 Sign up: 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 #E commerce #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
  - Sign up
  - 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
multer.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! 🏃

STEP-1

git clone https://github.com/SahilMund/Ecommerce-Shopify.git

STEP-2

cd frontend
yarn install
yarn start

STEP-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

STEP-4

cd socket
yarn install
create a .env file

PORT = 4000

yarn start

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
backend		backend
frontend		frontend
socket		socket
.gitignore		.gitignore
README.md		README.md

SahilMund/Ecommerce-Shopify

Folders and files

Latest commit

History

Repository files navigation

🌟 MERN Marketplace || Ecommerce-Shopify 🌟

🖥️ Tech Stack

🚀 Features

Sneak Peek of Home Page 🙈 :

User Profile Page 👥 :

Product Page ⚙️

🧾 Receipt

Seller page 🛍️

Admin Dashboard 👤

Project description 📝

IMPORTANT NOTE -

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

pages - This folder holds All pages Admin, shop, user

redux - This folder holds all states of the Web app

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

multer.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

.gitignore - Tells git which files to ignore

README - This file!

STEP-1

STEP-2

STEP-3

STEP-4

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

`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

`pages` - This folder holds All pages Admin, shop, user

`redux` - This folder holds all states of the Web app

`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

`multer.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

`.gitignore` - Tells git which files to ignore

`README` - This file!

Packages