![image](https://private-user-images.githubusercontent.com/78966839/253870904-51c0517e-e5e6-4a65-a520-9e5a52095fb9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUwMzYwMzcsIm5iZiI6MTcyNTAzNTczNywicGF0aCI6Ii83ODk2NjgzOS8yNTM4NzA5MDQtNTFjMDUxN2UtZTVlNi00YTY1LWE1MjAtOWU1YTUyMDk1ZmI5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MzAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODMwVDE2MzUzN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPThhZjQyMjZjY2JjNTM4NDZmY2FmODY4YWIzNTZkYzdhZGM1YmM4MDE2Yzg2NjBlZGNkZDk5YmRiYzdkOTFkZDYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.gGVUQGGOnHXtaFQ6wIk0TpWoUCXh_N7xcmvP3dVVUIk)
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.
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
-
User Authentication Pages ๐ช
- User Signup ๐
- email verification
- upload a Profile image
- User Login ๐
- User Signup ๐
-
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)
- Check out for payment ๐ณ
-
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 Signup ๐
-
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 Size is high So, I can not upload it to Github.I upload it to youtube.Vedo Demo heaar
< |
|
![image](https://private-user-images.githubusercontent.com/78966839/253807650-60d125e1-c4b5-4ab7-9ae5-ca922f44cd62.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUwMzYwMzcsIm5iZiI6MTcyNTAzNTczNywicGF0aCI6Ii83ODk2NjgzOS8yNTM4MDc2NTAtNjBkMTI1ZTEtYzRiNS00YWI3LTlhZTUtY2E5MjJmNDRjZDYyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MzAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODMwVDE2MzUzN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTIwNjY1OGM5NGFmODZmNzVkODM1NWZlMDU4YjUxNzJmNjJiY2FkMjZhMzVmYWNhYmVjZDQ4NDUyYzlkYTA0YTMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.L-OsYdcy0eOfIg4-pd9qN2gSHkyNAjXrAUbbynRGNH4)
![image](https://private-user-images.githubusercontent.com/78966839/253808260-370e357d-8248-46fc-8749-37aed7f5efd3.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUwMzYwMzcsIm5iZiI6MTcyNTAzNTczNywicGF0aCI6Ii83ODk2NjgzOS8yNTM4MDgyNjAtMzcwZTM1N2QtODI0OC00NmZjLTg3NDktMzdhZWQ3ZjVlZmQzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MzAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODMwVDE2MzUzN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTMxNmIyOGQ1YzAyMDU4NjE5Y2I0MGVkNDdhNTI1OWU4YTM3ZjllNTBhOGVjZTc0NTRmMTU5YWYxOGMxM2U2ZGYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.KWHys5gtoBjcAWO6RQQXepNzN27rzgSjtG9nQjLygjw)
![image](https://private-user-images.githubusercontent.com/78966839/253808734-386b48a1-9139-4b19-be0b-0b86c9cb8ccb.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUwMzYwMzcsIm5iZiI6MTcyNTAzNTczNywicGF0aCI6Ii83ODk2NjgzOS8yNTM4MDg3MzQtMzg2YjQ4YTEtOTEzOS00YjE5LWJlMGItMGI4NmM5Y2I4Y2NiLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MzAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODMwVDE2MzUzN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTFiMTI0M2Q1MGQzMGE0N2QwZDU5MGMyYmZlOTMzMmFjNWM2YjhjYmU3N2JkMjg0YjkyNWYwZmJmYjdjODQ0OTcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.5Lq869YBcApYhbUul4D1Qb3NBRyuRDKBhU8zx1QFXrk)
Mobile View | Desktop View |
---|---|
![adminDs](https://private-user-images.githubusercontent.com/78966839/253853769-df7f3d6c-d429-48a0-b9bc-1673c7532faf.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUwMzYwMzcsIm5iZiI6MTcyNTAzNTczNywicGF0aCI6Ii83ODk2NjgzOS8yNTM4NTM3NjktZGY3ZjNkNmMtZDQyOS00OGEwLWI5YmMtMTY3M2M3NTMyZmFmLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MzAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODMwVDE2MzUzN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTIwMzJiODAxOTk2YWQyOGZhYTMyYmU0NjNiYzJjNzIzNjMwNTdjMjQ3ZmYxNzFkNWY1ZGU0NTVjNzY4YWQyMWMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.y2ORRlw8RIHkbAgoRvb8KTVs909y-vWMGTtM7f_RyMI)
๐ 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
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.
-
-
- Admin
- cart
- Checkout
- Events
- layout
- Logout
- Payment
- Products
- Profile
- Route
- Shop
- Signup
- Wishlist
-
- Shop
-
- action
- reducer
- .env
- index.js
- package.json
๐ป How to run the app locally! ๐
git clone https://github.com/pattjoshi/Multi_vondor_E_shop.git
cd frontend
yarn install
yarn start
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
cd socket
yarn install
- create a
.env
file
PORT = 4000
yarn start
YouTub :- I Learn from this
๐ If you find this repo helpful then don't forget to give a star โ๏ธ to this repository. :)
@copyright by Om Pattjoshi 2023