For Vendors & Customers
Vendors/Admin Dashboard is available
Comes with a mobile app compatible with Android & iOS devices

---

shop-c.mp4

---

📖 Table of Contents

• 📖 Table of Contents
• 📍 Overview
• 📦 Features
• 📂 repository Structure
• ⚙️ Modules
• 🚀 Getting Started
  • 🔧 Installation
    • 🌐 Local Installation
    • 💻 Web Deploy
  • 🤖 Running Shop-Ecommerce
  • 🧪 Tests
• 🛣 Roadmap
• 🤝 Contributing
• 📄 License
• 👏 Acknowledgments

---

📍 Overview

E-commerce software that levarages the MERN stack. The live website is available at https://shop.josetolentino.site/ and the mobile application project can be found at https://github.com/jatolentino/Shop-Ecommerce-app

---

📦 Features

Features	Customer	Vendor	Admin	Website
Users Registration	✔️	✔️	✔️	✔️
Users Login/Logout	✔️	✔️	✔️	✔️
Reset Password	✔️	✔️	✔️	✔️
Dashboard	✔️	✔️	✔️	✔️
Chat	✔️	✔️	✔️	✔️
Add/Edit Products	❌	✔️	✔️	✔️
Add Products to your cart	✔️	✔️	➖	✔️
Add Products to your favorites	✔️	✔️	➖	✔️
Search/filter products	✔️	✔️	✔️	✔️
Credit/Debit card payment	✔️	✔️	✔️	✔️
PayPal payment	✔️	✔️	✔️	✔️
Product tracking	✔️	✔️	✔️	✔️
Rating Products	✔️	✔️	✔️	✔️
Add Users	❌	❌	✔️	✔️
SEO	➖	➖	✔️	✔️
Blog	➖	➖	✔️	✔️
Terms & Condition	➖	➖	✔️	✔️
Privacy & Policy	➖	➖	✔️	✔️
Newsletter Subscription	➖	➖	✔️	✔️
FAQs	➖	➖	✔️	✔️

---

📂 Repository Structure

└──Shop-Ecommerce
	├── .gitignore
	├── client
	│   ├── package.json
	│   ├── public
	│   │   ├── favicon.ico
	│   │   ├── favicon.png
	│   │   ├── favicon.svg
	│   │   ├── index.html
	│   │   ├── logo192.png
	│   │   ├── logo512.png
	│   │   ├── manifest.json
	│   │   └── robots.txt
	│   └── src
	│       ├── App.js
	│       ├── App.test.js
	│       ├── assets
	│       │   ├── css
	│       │   │   ├── bootstrap.min.css
	│       │   │   ├── boxicon.min.css
	│       │   │   ├── dark
	│       │   │   │   ├── dark.css
	│       │   │   │   └── dark.scss
	│       │   │   ├── flaticon.min.css
	│       │   │   ├── responsive.min.css
	│       │   │   └── terms.css
	│       │   ├── fonts
	│       │   │   ├── boxicons.eot
	│       │   │   ├── boxicons.svg
	│       │   │   ├── boxicons.ttf
	│       │   │   ├── boxicons.woff
	│       │   │   ├── boxicons.woff2
	│       │   │   ├── Flaticon.eot
	│       │   │   ├── Flaticon.svg
	│       │   │   ├── Flaticon.ttf
	│       │   │   ├── Flaticon.woff
	│       │   │   └── Flaticon.woff2
	│       │   ├── img
	│       │   │   ├── 404.png
	│       │   │   ├── arab.png
	│       │   │   ├── arrivalsproducts
	│       │   │   │   ├── arrivalsproducts1.jpg
	│       │   │   │   ├── arrivalsproducts2.jpg
	│       │   │   │   ├── arrivalsproducts3.jpg
	│       │   │   │   └── arrivalsproducts4.jpg
	│       │   │   ├── bestsellers-products
	│       │   │   │   ├── bestsellers-products-1.jpg
	│       │   │   │   ├── bestsellers-products-2.jpg
	│       │   │   │   ├── bestsellers-products-3.jpg
	│       │   │   │   ├── bestsellers-products-4.jpg
	│       │   │   │   ├── bestsellers-products-5.jpg
	│       │   │   │   ├── bestsellers-products-6.jpg
	│       │   │   │   ├── bestsellers-products-7.jpg
	│       │   │   │   └── bestsellers-products-8.jpg
	│       │   │   ├── blog
	│       │   │   │   ├── blog-10.jpg
	│       │   │   │   ├── blog-11.jpg
	│       │   │   │   ├── blog-12.jpg
	│       │   │   │   ├── blog-1.jpg
	│       │   │   │   ├── blog-2.jpg
	│       │   │   │   ├── blog-3.jpg
	│       │   │   │   ├── blog-4.jpg
	│       │   │   │   ├── blog-5.jpg
	│       │   │   │   ├── blog-6.jpg
	│       │   │   │   ├── blog-7.jpg
	│       │   │   │   ├── blog-8.jpg
	│       │   │   │   └── blog-9.jpg
	│       │   │   ├── blog-10.jpg
	│       │   │   ├── blog-details.jpg
	│       │   │   ├── card-background
	│       │   │   │   ├── 10.jpeg
	│       │   │   │   ├── 11.jpeg
	│       │   │   │   ├── 12.jpeg
	│       │   │   │   ├── 13.jpeg
	│       │   │   │   ├── 14.jpeg
	│       │   │   │   ├── 15.jpeg
	│       │   │   │   ├── 16.jpeg
	│       │   │   │   ├── 17.jpeg
	│       │   │   │   ├── 18.jpeg
	│       │   │   │   ├── 19.jpeg
	│       │   │   │   ├── 1.jpeg
	│       │   │   │   ├── 20.jpeg
	│       │   │   │   ├── 21.jpeg
	│       │   │   │   ├── 22.jpeg
	│       │   │   │   ├── 23.jpeg
	│       │   │   │   ├── 24.jpeg
	│       │   │   │   ├── 25.jpeg
	│       │   │   │   ├── 2.jpeg
	│       │   │   │   ├── 3.jpeg
	│       │   │   │   ├── 4.jpeg
	│       │   │   │   ├── 5.jpeg
	│       │   │   │   ├── 6.jpeg
	│       │   │   │   ├── 7.jpeg
	│       │   │   │   ├── 8.jpeg
	│       │   │   │   └── 9.jpeg
	│       │   │   ├── card-type
	│       │   │   │   ├── amex.png
	│       │   │   │   ├── diners.png
	│       │   │   │   ├── discover.png
	│       │   │   │   ├── mastercard.png
	│       │   │   │   ├── troy.png
	│       │   │   │   ├── unionpay.png
	│       │   │   │   └── visa.png
	│       │   │   ├── cart
	│       │   │   │   ├── cart-1.png
	│       │   │   │   ├── cart-2.png
	│       │   │   │   ├── cart-3.png
	│       │   │   │   ├── cart-4.png
	│       │   │   │   └── cart-5.png
	│       │   │   ├── catavatar.jpg
	│       │   │   ├── china.png
	│       │   │   ├── chip.png
	│       │   │   ├── collection
	│       │   │   │   ├── collection-1.png
	│       │   │   │   ├── collection-2.png
	│       │   │   │   ├── lights.png
	│       │   │   │   └── micro.png
	│       │   │   ├── english.png
	│       │   │   ├── featured
	│       │   │   │   ├── featured-1.jpg
	│       │   │   │   ├── featured-2.jpg
	│       │   │   │   ├── featured-3.jpg
	│       │   │   │   ├── featured-4.jpg
	│       │   │   │   └── featured-5.jpg
	│       │   │   ├── germany.png
	│       │   │   ├── hot-products
	│       │   │   │   ├── hot-products-1.jpg
	│       │   │   │   ├── hot-products-2.jpg
	│       │   │   │   ├── hot-products-3.jpg
	│       │   │   │   ├── hot-products-4.jpg
	│       │   │   │   └── hot-products-5.jpg
	│       │   │   ├── loginvendor.jpg
	│       │   │   ├── logo-2.png
	│       │   │   ├── logo.png
	│       │   │   ├── logoShop.svg
	│       │   │   ├── main-slider
	│       │   │   │   ├── clothes1.svg
	│       │   │   │   ├── headphone1.png
	│       │   │   │   └── landing.jpg
	│       │   │   ├── mission.jpg
	│       │   │   ├── modal-newsletter.png
	│       │   │   ├── offer-products
	│       │   │   │   ├── large-offer-products.png
	│       │   │   │   ├── offer-products-1.png
	│       │   │   │   ├── offer-products-2.png
	│       │   │   │   ├── offer-products-3.png
	│       │   │   │   ├── offer-products-4.jpg
	│       │   │   │   ├── offer-products-5.jpg
	│       │   │   │   ├── offer-products-6.jpg
	│       │   │   │   └── offer-products-7.png
	│       │   │   ├── overview
	│       │   │   │   ├── clothes1.png
	│       │   │   │   ├── clothes.png
	│       │   │   │   ├── overview1.png
	│       │   │   │   ├── overview2.png
	│       │   │   │   ├── table.png
	│       │   │   │   ├── tshirt.png
	│       │   │   │   └── T-Shirt.png
	│       │   │   ├── partner
	│       │   │   │   ├── adidas.png
	│       │   │   │   ├── adidas.svg
	│       │   │   │   ├── apple.svg
	│       │   │   │   ├── asus.svg
	│       │   │   │   ├── dell.svg
	│       │   │   │   ├── gucci.png
	│       │   │   │   ├── gucci.svg
	│       │   │   │   ├── huawei.svg
	│       │   │   │   ├── luigi.svg
	│       │   │   │   ├── msi.svg
	│       │   │   │   ├── nike.svg
	│       │   │   │   ├── partner-1.png
	│       │   │   │   ├── partner-2.png
	│       │   │   │   ├── partner-3.png
	│       │   │   │   ├── partner-4.png
	│       │   │   │   ├── partner-5.png
	│       │   │   │   ├── rolex.svg
	│       │   │   │   ├── samsung.svg
	│       │   │   │   ├── sony.png
	│       │   │   │   ├── sony.svg
	│       │   │   │   ├── versage.png
	│       │   │   │   ├── xiomi.svg
	│       │   │   │   ├── Zara_Logo.svg
	│       │   │   │   └── zara.svg
	│       │   │   ├── portugal.png
	│       │   │   ├── quick-view
	│       │   │   │   ├── quick-view-1.jpg
	│       │   │   │   ├── quick-view-2.jpg
	│       │   │   │   └── quick-view-3.jpg
	│       │   │   ├── shop
	│       │   │   │   ├── shop-10.jpg
	│       │   │   │   ├── shop-11.jpg
	│       │   │   │   ├── shop-12.jpg
	│       │   │   │   ├── shop-13.jpg
	│       │   │   │   ├── shop-14.jpg
	│       │   │   │   ├── shop-15.jpg
	│       │   │   │   ├── shop-1.jpg
	│       │   │   │   ├── shop-2.jpg
	│       │   │   │   ├── shop-3.jpg
	│       │   │   │   ├── shop-4.jpg
	│       │   │   │   ├── shop-5.jpg
	│       │   │   │   ├── shop-6.jpg
	│       │   │   │   ├── shop-7.jpg
	│       │   │   │   ├── shop-8.jpg
	│       │   │   │   └── shop-9.jpg
	│       │   │   ├── special-products
	│       │   │   │   ├── freeze.png
	│       │   │   │   ├── special-products-1.jpg
	│       │   │   │   ├── special-products-2.jpg
	│       │   │   │   ├── special-products-3.jpg
	│       │   │   │   ├── special-products-bg-2.jpg
	│       │   │   │   └── special-products-bg.jpg
	│       │   │   ├── story.jpg
	│       │   │   ├── team
	│       │   │   │   ├── team-1.jpg
	│       │   │   │   ├── team-2.jpg
	│       │   │   │   ├── team-3.jpg
	│       │   │   │   ├── team-4.jpg
	│       │   │   │   ├── team-5.jpg
	│       │   │   │   └── team-6.jpg
	│       │   │   ├── terms-of-service.jpg
	│       │   │   ├── track-order.jpg
	│       │   │   └── vision.jpg
	│       │   └── overview
	│       │       ├── overview-1.png
	│       │       └── overview-2.png
	│       ├── components
	│       │   ├── About
	│       │   │   ├── ComingSoonArea.jsx
	│       │   │   ├── CompareArea.jsx
	│       │   │   ├── ContactArea.jsx
	│       │   │   ├── Data.js
	│       │   │   ├── ErrorArea.jsx
	│       │   │   ├── FaqsArea.jsx
	│       │   │   ├── Founders.jsx
	│       │   │   ├── FunFactArea.jsx
	│       │   │   ├── Map.jsx
	│       │   │   ├── MissionArea.jsx
	│       │   │   ├── PricingArea.jsx
	│       │   │   ├── Privacy.jsx
	│       │   │   ├── PrivacyPolicyArea.jsx
	│       │   │   ├── SearchArea.jsx
	│       │   │   ├── StoryArea.jsx
	│       │   │   ├── TeamMembers.jsx
	│       │   │   ├── Terms.jsx
	│       │   │   ├── TermsOfServiceArea.jsx
	│       │   │   ├── TrackingOrderArea.jsx
	│       │   │   └── VisionArea.jsx
	│       │   ├── Auth
	│       │   │   ├── LoginArea.jsx
	│       │   │   ├── loginarea.scss
	│       │   │   ├── LoginArea.test.jsx
	│       │   │   ├── LoginAreaVendor.jsx
	│       │   │   ├── PasswordResetArea.jsx
	│       │   │   └── RegisterArea.jsx
	│       │   ├── Blog
	│       │   │   ├── BlogArea.jsx
	│       │   │   ├── BlogDetailsArea.jsx
	│       │   │   ├── BlogLeftSidbarArea.jsx
	│       │   │   ├── BlogListViewArea.jsx
	│       │   │   └── __blogs__
	│       │   │       └── Blogs.jsx
	│       │   ├── Common
	│       │   │   ├── BestSellers.jsx
	│       │   │   ├── Collection.jsx
	│       │   │   ├── LatestNews.jsx
	│       │   │   ├── NewArrivals.jsx
	│       │   │   ├── PageTitle.jsx
	│       │   │   ├── PageTitleVendor.jsx
	│       │   │   ├── Partner.jsx
	│       │   │   ├── Preloader.jsx
	│       │   │   ├── SpecialOffer.jsx
	│       │   │   ├── SpecialProducts.jsx
	│       │   │   ├── Support.jsx
	│       │   │   ├── SupportTwo.jsx
	│       │   │   └── Testimonial.jsx
	│       │   ├── Ecommerce
	│       │   │   ├── Chart
	│       │   │   │   ├── Chart.jsx
	│       │   │   │   └── chart.scss
	│       │   │   ├── CustomersTable
	│       │   │   │   ├── CustomersTable.jsx
	│       │   │   │   ├── customerstable.scss
	│       │   │   │   └── CustomerTableSource.jsx
	│       │   │   ├── Featured
	│       │   │   │   ├── Featured.jsx
	│       │   │   │   └── featured.scss
	│       │   │   ├── Navbar
	│       │   │   │   ├── Navbar.jsx
	│       │   │   │   └── navbar.scss
	│       │   │   ├── OrdersTable
	│       │   │   │   ├── OrdersTable.jsx
	│       │   │   │   └── orderstable.scss
	│       │   │   ├── ProductsTable
	│       │   │   │   ├── Datatable1.test.jsx
	│       │   │   │   ├── Datatable2.test.jsx
	│       │   │   │   ├── Datatable3.test.jsx
	│       │   │   │   ├── Datatable.test.jsx
	│       │   │   │   ├── ProductsTable.jsx
	│       │   │   │   ├── productstable.scss
	│       │   │   │   ├── ProductsTableSource.jsx
	│       │   │   │   └── UserColumns.test.jsx
	│       │   │   ├── Sidebar
	│       │   │   │   ├── Sidebar.jsx
	│       │   │   │   ├── sidebar.scss
	│       │   │   │   └── Sidebar.test.jsx
	│       │   │   ├── Table
	│       │   │   │   ├── Table.jsx
	│       │   │   │   └── table.scss
	│       │   │   ├── VendorsTable
	│       │   │   │   ├── VendorsTable.jsx
	│       │   │   │   ├── vendorstable.scss
	│       │   │   │   └── VendorTableSource.jsx
	│       │   │   └── Widget
	│       │   │       ├── Widget.jsx
	│       │   │       └── widget.scss
	│       │   ├── Footer
	│       │   │   └── Footer.jsx
	│       │   ├── Home
	│       │   │   ├── Home-four
	│       │   │   │   ├── Banner.jsx
	│       │   │   │   └── FeaturedArea.jsx
	│       │   │   ├── Home-one
	│       │   │   │   ├── Banner.jsx
	│       │   │   │   ├── Overview.jsx
	│       │   │   │   ├── SpecialOffer.jsx
	│       │   │   │   └── SpecialProducts.jsx
	│       │   │   ├── Home-three
	│       │   │   │   ├── Banner.jsx
	│       │   │   │   ├── FeaturedArea.jsx
	│       │   │   │   ├── HotProductsArea.jsx
	│       │   │   │   └── OfferProductsArea.jsx
	│       │   │   └── Home-two
	│       │   │       ├── Banner.jsx
	│       │   │       ├── Category.jsx
	│       │   │       └── FeaturedArea.jsx
	│       │   ├── Layout
	│       │   │   ├── MiddleHeader.css
	│       │   │   ├── MiddleHeader.jsx
	│       │   │   ├── Navbar.jsx
	│       │   │   ├── TopHeader.css
	│       │   │   └── TopHeader.jsx
	│       │   ├── Products
	│       │   │   ├── AddProductArea.jsx
	│       │   │   ├── ProductsArea.jsx
	│       │   │   ├── QuickView.css
	│       │   │   ├── QuickView.jsx
	│       │   │   └── validateinfo.js
	│       │   ├── Shop
	│       │   │   ├── CartArea.jsx
	│       │   │   ├── CheckoutArea.jsx
	│       │   │   ├── checkoutarea.test.jsx
	│       │   │   ├── OrderArea.jsx
	│       │   │   ├── __payment__
	│       │   │   │   ├── component
	│       │   │   │   │   ├── card
	│       │   │   │   │   │   ├── card1.test.jsx
	│       │   │   │   │   │   ├── Card.jsx
	│       │   │   │   │   │   ├── card.scss
	│       │   │   │   │   │   └── Card.test.jsx
	│       │   │   │   │   └── form
	│       │   │   │   │       └── Form.jsx
	│       │   │   │   ├── Payment.jsx
	│       │   │   │   ├── payment.scss
	│       │   │   │   ├── payment.test.scss
	│       │   │   │   └── State.jsx
	│       │   │   ├── __products__
	│       │   │   │   ├── orderarea.test.jsx
	│       │   │   │   └── Products.jsx
	│       │   │   ├── ProductsDetailsArea.jsx
	│       │   │   ├── ProductsDetailsSidebarArea.jsx
	│       │   │   ├── ShopArea.jsx
	│       │   │   ├── ShopFullWidthArea.jsx
	│       │   │   ├── ShopLeftSidebarArea.jsx
	│       │   │   ├── ShopListViewArea.jsx
	│       │   │   └── WishListArea.jsx
	│       │   ├── ShowNavbar
	│       │   │   └── ShowNavbar.jsx
	│       │   ├── User
	│       │   │   └── UserArea.jsx
	│       │   └── Widgets
	│       │       ├── Arrival.jsx
	│       │       ├── BestSellerProducts.jsx
	│       │       ├── Categories.jsx
	│       │       ├── Continents.jsx
	│       │       ├── PopularPosts.jsx
	│       │       ├── PopularTags.jsx
	│       │       ├── Price.jsx
	│       │       └── Search.jsx
	│       ├── contexts
	│       │   ├── auth-context.js
	│       │   ├── cart-context.js
	│       │   ├── constants.js
	│       │   ├── darkModeContext.js
	│       │   └── darkModeReducer.js
	│       ├── datatablesource.js
	│       ├── formSource.js
	│       ├── index.css
	│       ├── index.js
	│       ├── index.test.css
	│       ├── pages
	│       │   ├── About
	│       │   │   ├── About.jsx
	│       │   │   ├── ComingSoon.jsx
	│       │   │   ├── Compare.jsx
	│       │   │   ├── Contact.jsx
	│       │   │   ├── Error-404.jsx
	│       │   │   ├── Faqs.jsx
	│       │   │   ├── MyAccount.jsx
	│       │   │   ├── OurTeam.jsx
	│       │   │   ├── PricingPlans.jsx
	│       │   │   ├── PrivacyPolicy.jsx
	│       │   │   ├── Search.jsx
	│       │   │   ├── TermsOfService.jsx
	│       │   │   └── TrackingOrder.jsx
	│       │   ├── Authentications
	│       │   │   ├── Login.jsx
	│       │   │   ├── LoginVendor.jsx
	│       │   │   ├── LoginVendor.test.jsx
	│       │   │   ├── Register.jsx
	│       │   │   └── ResetPassword.jsx
	│       │   ├── Blog
	│       │   │   ├── BlogDetailsa.jsx
	│       │   │   ├── BlogDetailsb.jsx
	│       │   │   ├── BlogDetailsc.jsx
	│       │   │   ├── BlogDetails.jsx
	│       │   │   ├── BlogFullWidth.jsx
	│       │   │   ├── Blog.jsx
	│       │   │   ├── BlogLeftSidebar.jsx
	│       │   │   ├── BlogListView.jsx
	│       │   │   └── BlogRightSidebar.jsx
	│       │   ├── Ecommerce
	│       │   │   ├── customers
	│       │   │   │   ├── Customers.jsx
	│       │   │   │   └── customers.scss
	│       │   │   ├── dashboard
	│       │   │   │   ├── Dashboard.jsx
	│       │   │   │   └── dashboard.scss
	│       │   │   ├── login
	│       │   │   │   ├── Login.jsx
	│       │   │   │   └── login.scss
	│       │   │   ├── new
	│       │   │   │   ├── New.jsx
	│       │   │   │   └── new.scss
	│       │   │   ├── products
	│       │   │   │   ├── AddProducts.jsx
	│       │   │   │   ├── addproducts.scss
	│       │   │   │   ├── ListOfProducts.jsx
	│       │   │   │   ├── listofproducts.scss
	│       │   │   │   ├── productform1.test.jsx
	│       │   │   │   ├── ProductForm.jsx
	│       │   │   │   ├── productform.scss
	│       │   │   │   ├── productform.test.js
	│       │   │   │   ├── productform.test.jsx
	│       │   │   │   └── test.jsx
	│       │   │   ├── singlecustomer
	│       │   │   │   ├── SingleCustomer.jsx
	│       │   │   │   └── singlecustomer.scss
	│       │   │   ├── singlevendor
	│       │   │   │   ├── SingleVendor.jsx
	│       │   │   │   └── singlevendor.scss
	│       │   │   ├── vendororders
	│       │   │   │   ├── VendorOrders.jsx
	│       │   │   │   └── vendororders.scss
	│       │   │   └── vendors
	│       │   │       ├── Vendors.jsx
	│       │   │       └── vendors.scss
	│       │   ├── Home
	│       │   │   ├── Home.css
	│       │   │   ├── HomeFour.jsx
	│       │   │   ├── Home.jsx
	│       │   │   ├── HomeThree.jsx
	│       │   │   └── HomeTwo.jsx
	│       │   ├── Products
	│       │   │   ├── AddProduct.jsx
	│       │   │   └── Products.jsx
	│       │   ├── Shop
	│       │   │   ├── Cart.jsx
	│       │   │   ├── Checkout.jsx
	│       │   │   ├── Orders.jsx
	│       │   │   ├── ProductsDetails.jsx
	│       │   │   ├── ProductsDetailsSidebar.jsx
	│       │   │   ├── ShopFullWidth.jsx
	│       │   │   ├── Shop.jsx
	│       │   │   ├── ShopLeftSidebar.jsx
	│       │   │   ├── ShopListView.jsx
	│       │   │   ├── ShopRightSidebar.jsx
	│       │   │   └── WishList.jsx
	│       │   └── User
	│       │       └── User.jsx
	│       ├── redux
	│       │   ├── Order
	│       │   │   ├── OrderAction.js
	│       │   │   ├── OrderReducer.js
	│       │   │   └── OrderTypes.js
	│       │   ├── Product
	│       │   │   ├── ProductAction.js
	│       │   │   ├── ProductReducer.js
	│       │   │   └── ProductTypes.js
	│       │   ├── ResetPassword
	│       │   │   ├── PasswordAction.js
	│       │   │   ├── PasswordReducer.js
	│       │   │   └── PasswordTypes.js
	│       │   ├── RootReducer.js
	│       │   └── Store.js
	│       └── setupTests.js
	├── cloudinary_preset_config.jpg
	├── LICENSE
	├── logo.svg
	├── README.md
	├── server
	│   ├── index_deploy.js
	│   ├── index.js
	│   ├── package.json
	│   ├── src
	│   │   ├── config
	│   │   │   └── db.js
	│   │   ├── controllers
	│   │   │   ├── order.js
	│   │   │   ├── product.js
	│   │   │   └── user.js
	│   │   ├── helpers
	│   │   │   └── genAccessToken.js
	│   │   ├── middlewares
	│   │   │   └── check-auth.js
	│   │   ├── models
	│   │   │   ├── Order.js
	│   │   │   ├── Product.js
	│   │   │   └── User.js
	│   │   ├── routings
	│   │   │   ├── order.js
	│   │   │   ├── product.js
	│   │   │   └── user.js
	│   │   ├── server.js
	│   │   └── utils
	│   │       ├── cloudinary.js
	│   │       └── validators.js
	│   └── vercel.json
	└── vercel.json

---

⚙️ Modules

Root

File

Summary

vercel.json

The code above represents the directory tree structure for a Shop Ecommerce project. It consists of a client folder, containing various files related to the frontend, and a server folder, containing files related to the backend. The code in the file vercel.json specifies the build and deployment configurations for the project on the Vercel platform. It specifies that the source for building the project is the client/package.json file and the build command to be used is "@vercel/node". It also defines a route that maps any request starting with "client/" to the client/src/index.js file.

Client

File

Summary

package.json

The code represents a directory structure for a Shop-Ecommerce project. It consists of a "client" directory and a "server" directory. The "client" directory contains a package.json file which defines the project dependencies, scripts, and configurations. The dependencies include various libraries and frameworks like React, Redux, MUI, Axios, and others. The "server" directory contains the server-side code, including controllers, models, routes, and helpers.

Src

File	Summary
index.js	This code renders the main application component (App.js) on the client-side using React and ReactDOM. It also sets up the Redux store and provides it to the application using Provider. Additionally, it wraps the entire application in a DarkModeContextProvider component. CSS files are imported for styling, and the rendered application is mounted to the HTML element with the ID "root" in the index.html file.
index.test.css	HTTPStatus Exception: 429
App.test.js	HTTPStatus Exception: 429
formSource.js	HTTPStatus Exception: 429
setupTests.js	HTTPStatus Exception: 429
datatablesource.js	HTTPStatus Exception: 429
App.js	HTTPStatus Exception: 429
index.css	HTTPStatus Exception: 429

Contexts

File	Summary
cart-context.js	HTTPStatus Exception: 429
auth-context.js	HTTPStatus Exception: 429
darkModeReducer.js	HTTPStatus Exception: 429
darkModeContext.js	HTTPStatus Exception: 429
constants.js	HTTPStatus Exception: 429

Blog

File	Summary
BlogListViewArea.jsx	HTTPStatus Exception: 429
BlogDetailsArea.jsx	HTTPStatus Exception: 429
BlogArea.jsx	HTTPStatus Exception: 429
BlogLeftSidbarArea.jsx	HTTPStatus Exception: 429
BlogDetailsb.jsx	HTTPStatus Exception: 429
BlogDetails.jsx	HTTPStatus Exception: 429
BlogDetailsa.jsx	HTTPStatus Exception: 429
BlogListView.jsx	HTTPStatus Exception: 429
BlogFullWidth.jsx	HTTPStatus Exception: 429
BlogLeftSidebar.jsx	HTTPStatus Exception: 429
BlogDetailsc.jsx	HTTPStatus Exception: 429
Blog.jsx	HTTPStatus Exception: 429
BlogRightSidebar.jsx	HTTPStatus Exception: 429

__blogs__

File	Summary
Blogs.jsx	HTTPStatus Exception: 429

Common

File	Summary
BestSellers.jsx	HTTPStatus Exception: 429
Testimonial.jsx	HTTPStatus Exception: 429
PageTitle.jsx	HTTPStatus Exception: 429
SpecialProducts.jsx	HTTPStatus Exception: 429
NewArrivals.jsx	HTTPStatus Exception: 429
SupportTwo.jsx	HTTPStatus Exception: 429
SpecialOffer.jsx	HTTPStatus Exception: 429
Collection.jsx	HTTPStatus Exception: 429
LatestNews.jsx	HTTPStatus Exception: 429
Support.jsx	HTTPStatus Exception: 429
PageTitleVendor.jsx	HTTPStatus Exception: 429
Partner.jsx	HTTPStatus Exception: 429
Preloader.jsx	HTTPStatus Exception: 429

Products

File	Summary
QuickView.css	HTTPStatus Exception: 429
ProductsArea.jsx	HTTPStatus Exception: 429
QuickView.jsx	HTTPStatus Exception: 429
AddProductArea.jsx	HTTPStatus Exception: 429
validateinfo.js	HTTPStatus Exception: 429
Products.jsx	HTTPStatus Exception: 429
AddProduct.jsx	HTTPStatus Exception: 429
test.jsx	HTTPStatus Exception: 429
productform.test.js	HTTPStatus Exception: 429
productform.test.jsx	HTTPStatus Exception: 429
AddProducts.jsx	HTTPStatus Exception: 429
addproducts.scss	HTTPStatus Exception: 429
ProductForm.jsx	HTTPStatus Exception: 429
productform1.test.jsx	HTTPStatus Exception: 429
productform.scss	HTTPStatus Exception: 429
ListOfProducts.jsx	HTTPStatus Exception: 429
listofproducts.scss	HTTPStatus Exception: 429

About

File	Summary
Founders.jsx	HTTPStatus Exception: 429
VisionArea.jsx	HTTPStatus Exception: 429
TeamMembers.jsx	HTTPStatus Exception: 429
PrivacyPolicyArea.jsx	HTTPStatus Exception: 429
Map.jsx	HTTPStatus Exception: 429
FaqsArea.jsx	HTTPStatus Exception: 429
TrackingOrderArea.jsx	HTTPStatus Exception: 429
MissionArea.jsx	HTTPStatus Exception: 429
TermsOfServiceArea.jsx	HTTPStatus Exception: 429
FunFactArea.jsx	HTTPStatus Exception: 429
CompareArea.jsx	HTTPStatus Exception: 429
StoryArea.jsx	HTTPStatus Exception: 429
Terms.jsx	HTTPStatus Exception: 429
SearchArea.jsx	HTTPStatus Exception: 429
ErrorArea.jsx	HTTPStatus Exception: 429
Privacy.jsx	HTTPStatus Exception: 429
PricingArea.jsx	HTTPStatus Exception: 429
ContactArea.jsx	HTTPStatus Exception: 429
ComingSoonArea.jsx	HTTPStatus Exception: 429
Data.js	HTTPStatus Exception: 429
MyAccount.jsx	HTTPStatus Exception: 429
ComingSoon.jsx	HTTPStatus Exception: 429
About.jsx	HTTPStatus Exception: 429
Error-404.jsx	HTTPStatus Exception: 429
OurTeam.jsx	HTTPStatus Exception: 429
Compare.jsx	HTTPStatus Exception: 429
PricingPlans.jsx	HTTPStatus Exception: 429
Faqs.jsx	HTTPStatus Exception: 429
PrivacyPolicy.jsx	HTTPStatus Exception: 429
Contact.jsx	HTTPStatus Exception: 429
Search.jsx	HTTPStatus Exception: 429
TermsOfService.jsx	HTTPStatus Exception: 429
TrackingOrder.jsx	HTTPStatus Exception: 429

User

File	Summary
UserArea.jsx	HTTPStatus Exception: 429
User.jsx	HTTPStatus Exception: 429

Auth

File	Summary
loginarea.scss	HTTPStatus Exception: 429
LoginAreaVendor.jsx	HTTPStatus Exception: 429
RegisterArea.jsx	HTTPStatus Exception: 429
LoginArea.jsx	HTTPStatus Exception: 429
LoginArea.test.jsx	HTTPStatus Exception: 429
PasswordResetArea.jsx	HTTPStatus Exception: 429

Home-one

File	Summary
SpecialProducts.jsx	HTTPStatus Exception: 429
Overview.jsx	HTTPStatus Exception: 429
SpecialOffer.jsx	HTTPStatus Exception: 429
Banner.jsx	HTTPStatus Exception: 429

Home-three

File	Summary
OfferProductsArea.jsx	HTTPStatus Exception: 429
Banner.jsx	HTTPStatus Exception: 429
FeaturedArea.jsx	HTTPStatus Exception: 429
HotProductsArea.jsx	HTTPStatus Exception: 429

Home-four

File	Summary
Banner.jsx	HTTPStatus Exception: 429
FeaturedArea.jsx	HTTPStatus Exception: 429

Home-two

File	Summary
Banner.jsx	HTTPStatus Exception: 429
FeaturedArea.jsx	HTTPStatus Exception: 429
Category.jsx	HTTPStatus Exception: 429

Shop

File	Summary
WishListArea.jsx	HTTPStatus Exception: 429
ShopFullWidthArea.jsx	HTTPStatus Exception: 429
ShopArea.jsx	HTTPStatus Exception: 429
ShopListViewArea.jsx	HTTPStatus Exception: 429
CartArea.jsx	HTTPStatus Exception: 429
ProductsDetailsSidebarArea.jsx	HTTPStatus Exception: 429
ProductsDetailsArea.jsx	HTTPStatus Exception: 429
checkoutarea.test.jsx	HTTPStatus Exception: 429
ShopLeftSidebarArea.jsx	HTTPStatus Exception: 429
CheckoutArea.jsx	HTTPStatus Exception: 429
OrderArea.jsx	HTTPStatus Exception: 429
ShopLeftSidebar.jsx	HTTPStatus Exception: 429
Cart.jsx	HTTPStatus Exception: 429
WishList.jsx	HTTPStatus Exception: 429
ShopListView.jsx	HTTPStatus Exception: 429
ProductsDetails.jsx	HTTPStatus Exception: 429
Checkout.jsx	HTTPStatus Exception: 429
ShopRightSidebar.jsx	HTTPStatus Exception: 429
ShopFullWidth.jsx	HTTPStatus Exception: 429
Shop.jsx	HTTPStatus Exception: 429
Orders.jsx	HTTPStatus Exception: 429
ProductsDetailsSidebar.jsx	HTTPStatus Exception: 429

__payment__

File	Summary
payment.scss	HTTPStatus Exception: 429
State.jsx	HTTPStatus Exception: 429
Payment.jsx	HTTPStatus Exception: 429
payment.test.scss	HTTPStatus Exception: 429

Form

File	Summary
Form.jsx	HTTPStatus Exception: 429

Card

File	Summary
Card.jsx	HTTPStatus Exception: 429
Card.test.jsx	HTTPStatus Exception: 429
card.scss	HTTPStatus Exception: 429
card1.test.jsx	HTTPStatus Exception: 429

__products__

File	Summary
Products.jsx	HTTPStatus Exception: 429
orderarea.test.jsx	HTTPStatus Exception: 429

Footer

File	Summary
Footer.jsx	HTTPStatus Exception: 429

Widget

File	Summary
Widget.jsx	HTTPStatus Exception: 429
widget.scss	HTTPStatus Exception: 429

Featured

File	Summary
featured.scss	HTTPStatus Exception: 429
Featured.jsx	HTTPStatus Exception: 429

Table

File	Summary
Table.jsx	HTTPStatus Exception: 429
table.scss	HTTPStatus Exception: 429

Navbar

File	Summary
navbar.scss	HTTPStatus Exception: 429
Navbar.jsx	HTTPStatus Exception: 429

Sidebar

File	Summary
Sidebar.jsx	HTTPStatus Exception: 429
Sidebar.test.jsx	HTTPStatus Exception: 429
sidebar.scss	HTTPStatus Exception: 429

Productstable

File	Summary
Datatable1.test.jsx	HTTPStatus Exception: 429
productstable.scss	HTTPStatus Exception: 429
Datatable2.test.jsx	HTTPStatus Exception: 429
Datatable3.test.jsx	HTTPStatus Exception: 429
ProductsTableSource.jsx	HTTPStatus Exception: 429
UserColumns.test.jsx	HTTPStatus Exception: 429
Datatable.test.jsx	HTTPStatus Exception: 429
ProductsTable.jsx	HTTPStatus Exception: 429

Vendorstable

File	Summary
VendorsTable.jsx	HTTPStatus Exception: 429
vendorstable.scss	HTTPStatus Exception: 429
VendorTableSource.jsx	HTTPStatus Exception: 429

Orderstable

File	Summary
orderstable.scss	HTTPStatus Exception: 429
OrdersTable.jsx	HTTPStatus Exception: 429

Chart

File	Summary
Chart.jsx	HTTPStatus Exception: 429
chart.scss	HTTPStatus Exception: 429

Customerstable

File	Summary
CustomerTableSource.jsx	HTTPStatus Exception: 429
CustomersTable.jsx	HTTPStatus Exception: 429
customerstable.scss	HTTPStatus Exception: 429

Shownavbar

File	Summary
ShowNavbar.jsx	HTTPStatus Exception: 429

Widgets

File	Summary
PopularPosts.jsx	HTTPStatus Exception: 429
PopularTags.jsx	HTTPStatus Exception: 429
Continents.jsx	HTTPStatus Exception: 429
Arrival.jsx	HTTPStatus Exception: 429
Categories.jsx	HTTPStatus Exception: 429
BestSellerProducts.jsx	HTTPStatus Exception: 429
Search.jsx	HTTPStatus Exception: 429
Price.jsx	HTTPStatus Exception: 429

Layout

File	Summary
MiddleHeader.css	HTTPStatus Exception: 429
MiddleHeader.jsx	HTTPStatus Exception: 429
Navbar.jsx	HTTPStatus Exception: 429
TopHeader.jsx	HTTPStatus Exception: 429
TopHeader.css	HTTPStatus Exception: 429

Home

File	Summary
Home.css	HTTPStatus Exception: 429
HomeFour.jsx	HTTPStatus Exception: 429
HomeTwo.jsx	HTTPStatus Exception: 429
Home.jsx	HTTPStatus Exception: 429
HomeThree.jsx	HTTPStatus Exception: 429

Authentications

File	Summary
LoginVendor.test.jsx	HTTPStatus Exception: 429
ResetPassword.jsx	HTTPStatus Exception: 429
Login.jsx	HTTPStatus Exception: 429
LoginVendor.jsx	HTTPStatus Exception: 429
Register.jsx	HTTPStatus Exception: 429

Singlecustomer

File	Summary
singlecustomer.scss	HTTPStatus Exception: 429
SingleCustomer.jsx	HTTPStatus Exception: 429

New

File	Summary
new.scss	HTTPStatus Exception: 429
New.jsx	HTTPStatus Exception: 429

Customers

File	Summary
Customers.jsx	HTTPStatus Exception: 429
customers.scss	HTTPStatus Exception: 429

Dashboard

File	Summary
dashboard.scss	HTTPStatus Exception: 429
Dashboard.jsx	HTTPStatus Exception: 429

Vendors

File	Summary
Vendors.jsx	HTTPStatus Exception: 429
vendors.scss	HTTPStatus Exception: 429

Login

File	Summary
login.scss	HTTPStatus Exception: 429
Login.jsx	HTTPStatus Exception: 429

Vendororders

File	Summary
VendorOrders.jsx	HTTPStatus Exception: 429
vendororders.scss	HTTPStatus Exception: 429

Singlevendor

File	Summary
SingleVendor.jsx	HTTPStatus Exception: 429
singlevendor.scss	HTTPStatus Exception: 429

Redux

File	Summary
RootReducer.js	HTTPStatus Exception: 429
Store.js	HTTPStatus Exception: 429

Order

File	Summary
OrderTypes.js	HTTPStatus Exception: 429
OrderAction.js	HTTPStatus Exception: 429
OrderReducer.js	HTTPStatus Exception: 429

Resetpassword

File	Summary
PasswordTypes.js	HTTPStatus Exception: 429
PasswordAction.js	HTTPStatus Exception: 429
PasswordReducer.js	HTTPStatus Exception: 429

Product

File	Summary
ProductAction.js	HTTPStatus Exception: 429
ProductReducer.js	HTTPStatus Exception: 429
ProductTypes.js	HTTPStatus Exception: 429

Public

File	Summary
robots.txt	HTTPStatus Exception: 429
index.html	HTTPStatus Exception: 429
manifest.json	HTTPStatus Exception: 429

Server

File	Summary
index.js	HTTPStatus Exception: 429
package.json	HTTPStatus Exception: 429
vercel.json	HTTPStatus Exception: 429

Helpers

File	Summary
genAccessToken.js	HTTPStatus Exception: 429

Routings

File	Summary
product.js	HTTPStatus Exception: 429
user.js	HTTPStatus Exception: 429
order.js	HTTPStatus Exception: 429

Config

File	Summary
db.js	HTTPStatus Exception: 429

Controllers

File	Summary
product.js	HTTPStatus Exception: 429
user.js	HTTPStatus Exception: 429
order.js	HTTPStatus Exception: 429

Utils

File	Summary
cloudinary.js	HTTPStatus Exception: 429
validators.js	HTTPStatus Exception: 429

Models

File	Summary
Product.js	HTTPStatus Exception: 429
Order.js	HTTPStatus Exception: 429
User.js	HTTPStatus Exception: 429

Middlewares

File	Summary
check-auth.js	HTTPStatus Exception: 429

---

🚀 Getting Started

Dependencies

Please ensure you have the following dependencies installed on your system:

- ℹ️ NodeJS >= 18.16.0

- ℹ️ NPM >= 9.5.1

🔧 Installation

⚙️ Previous Steps

Before setting up the platform (either online or locally) it is necessary that you configure your MongoDB database and Cloudinary account to store the images. These previous steps are necessary to fill the environment variables for both the server and the client. This is how you do it:

A. For the MongoDB: Watch the following YouTube video to create a DB in Mongo

https://youtu.be/YYmzj5DK_5s?si=nFdttB3tUsdZem3o&t=40

After creating your DB, go to the server folder and make a copy of the .example.env file and rename it as .env, then fill out the variables:

MONGODB_URL=
ACCESS_TOKEN_SECRET=
DATABASE_NAME=
DATABASE_USER=

Put in the ACCESS_TOKEN_SECRET any long hash string you want, it is just for the JWT security :)

B. For the Cloudinary: Watch the following YouTube video to configure your Cloudinary account.

https://youtu.be/fQo9ivqX4xs?si=c7Sjes3nXg3FPh4P&t=973

Open up the server/.env file again and finish its configuration by adding the variables of name, api_key, and api_secret that you get by default once you create your Cloudinary account.

CLOUDINARY_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=

Now configure your preset, according to the following pic navigating to Settings (gear icon) in Cloudinary, then to the Upload section. You could name the preset with any string you want, that name is going to go in the REACT_APP_CLOUDINARY_UPLOAD_PRESET variable.

Lastly, go to the client folder and make a copy of the .example.env file and rename it as .env, then fill out the variables:

REACT_APP_CLOUDINARY_NAME=
REACT_APP_SERVER_API=
REACT_APP_CLOUDINARY_UPLOAD_PRESET=

Notes:

• REACT_APP_CLOUDINARY_NAME is the same as the CLOUDINARY_NAME variable that your configured earlier.
• Leave in blank the REACT_APP_SERVER_API variable for the local installation because the client will grab the default localhost:5000 url set in client/package.json

💻 Local Installation

0.1. Clone the Shop-Ecommerce repository:

git clone https://github.com/jatolentino/Shop-Ecommerce

0.2. Change to the project directory:

cd Shop-Ecommerce

0.3. Move the server folder elsewhere outsite the Shop-Ecommerce folder, your structure should look like this:

└── Shop-Ecommerce/
    ├── client/
    ├── logo.svg
    └── vercel.json

1. Setting up the client

1.1. Go to the client folder, it will be your root client folder for then and on:

cd client

1.2. Install the dependencies:

npm install

You won't see any products listed, since you haven't configured the server yet :(. Let's do it in the following steps :D

2. Setting up the server

2.1. Navigate to the server folder that you moved somewhere else in your computer, hopefully not into the Recycle Bin.

cd ~/somewhere/server

2.2. Install the dependencies:

npm install

🤖 Running Locally

1. For the server

cd ~/somewhere/server
npm start

2. For the client

cd Shop-Ecommerce/client
npm start

Locally the package.json file is calling the index.js file, but when you want to deploy it, index_deploy.js while be used. Anyway, don't worry, there'll be more info about that in the next section.

After you start both the client and the server, you won't still see any products listed because you haven't uploaded any. To upload a new product, please follow the video demo.

Only in the case that you desperately want to see some products listed in your store as soon as possible and to verify that your previous config was successful, you could use my API. But please, do not delete or add any products, so that other devs can make their test with it. Go to client/.env and fill the REACT_APP_SERVER_API variable with my API link: https://shopapi-lime.vercel.app/

🌐 Web Deploy

We use Vercel because it is easy to setup and free of cost! Aside that they use AWS services too.

First of all, it's important to understand that we deploy 2 projects in Vercel, one refers to Shop-Ecommerce/client and the other is Shop-Ecommerce/server (or the location where you moved the server folder).

🖥️ Deploy the server

Once you are satisfied with the changes you've made in the project, and want to deploy it on Vercel, you can follow the steps below:

• From the server folder, rename index.js to index.js.old
• Rename index_deploy.js to index.js
• Now upload the server folder to your github as a new repository, don't include node_modules or the .env file (they should be added to your .gitignore)
• Add this project to vercel and create/fill your environment variables with the .env parameters
• If your project was successfully hosted in Vercel, you should get a url to access it, copy this url, we are going to use in the next section.

To test if your server is working, append /products to the end of your url and paste it in your browser, you should see your API listing your products :D

👨‍💻 Deploy the client

Follow the steps below:

• Go to Shop-Ecommerce/client and paste the Vercel server url that you got in the previously step in REACT_APP_SERVER_API variable of .env file
• Now to upload your client project to Vercel, follow this advice:
  • Upload the client folder to your github repo, don't include node_modules or build directories or the .env file obsviously (they should be added to your .gitignore)
  • Create a project in Vercel to add the client github repo previously added
  • The trick to add the client projec to Vercel is this: After you choose the project you want to add in Vercel by its github repo name, in the Configure Section, you should edit the Root Directory choosing the option client so that Vercel, recognizes it as a React project!
  • Proceed to fill out your environment variables with Shop-Ecommerce/client/.env
  • Lastly you can click on deploy, and you will get your Vercel client website link

🧪 Tests

npm test

---

🛣 Project Roadmap

• ℹ️ Task 1: Implement X
• ℹ️ Task 2: Implement Y
• ℹ️ ...

---

🤝 Contributing

Contributions are welcome! Here are several ways you can contribute:

• Submit Pull Requests: Review open PRs, and submit your own PRs.
• Join the Discussions: Share your insights, provide feedback, or ask questions.
• Report Issues: Submit bugs found or log feature requests for JATOLENTINO.

Contributing Guidelines

Click to expand

1. Fork the Repository: Start by forking the project repository to your GitHub account.
2. Clone Locally: Clone the forked repository to your local machine using a Git client.

   git clone <your-forked-repo-url>

3. Create a New Branch: Always work on a new branch, giving it a descriptive name.

   git checkout -b new-feature-x

4. Make Your Changes: Develop and test your changes locally.
5. Commit Your Changes: Commit with a clear and concise message describing your updates.

   git commit -m 'Implemented new feature x.'

6. Push to GitHub: Push the changes to your forked repository.

   git push origin new-feature-x

7. Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.

Once your PR is reviewed and approved, it will be merged into the main branch.

---

📄 License

This project is protected under the SELECT-A-LICENSE License. For more details, refer to the LICENSE file.

---

👏 Acknowledgments

• List any resources, contributors, inspiration, etc. here.

Return

---