Full Stack Complete Ecommerce Web Shop By Using Commerce.js, React.js, Stripe.js and Material-UI
In this tutorial, you learn how to build a real e-commerce web application without using your bank account for your business or portfolio, it will allow you to add the flowing:
1- Create a Commerce.js account
2- adding products to your merchant store.
3- adding shipping countries
4- Handling shipping subdivision and options
5- Real Payment system to allow a customer to purchase a product of a list of products.
6- having a user-friendly UI application
7- Build a responsive web application working on mobile, tablet, laptop and desktop.
We will use React.js, Material-UI, Commerce.js and Stripe.js to build this project.
I will explain all steps in a clear and obvious way.
It includes medium and advanced React.js and JavaScript but no worries it created with enough details and all information you need besides I am happy to help, just leave your comment down of this video and I will answer it as soon as possible.
If you have any question leave it on the comment down, enjoy watching.
Demo: https://dwinatech-shop.netlify.app/
Source code: https://github.com/DwinaTech/DwinaTec...
Create Single Product View: • Build a Single Product View By Using Reatc...
How to create react app: • How to create React APP 2021? | React Hook...
Do not forget to press the Subscribe button and enable the bell if you are new on my channel.
Flow me on Facebook: / dwinatech
#Ecommerce #EcommerceWebsite #complelteECommerceWebsite
Recommended E-commerce Tutorials:
1 - Build a Single Product View UI & Functionalities: • Build a Single Product View By Using Reatc...
2 - List Products By Category: • List E-commerce Products By Category, With...
3 - Add Shipping cost to the total order price: • Add Shipping cost to total order price | F...
4- Create E-commorce Shop Search Feature: • Build an E-commerce Shop Search By Using R...
5 - Deploy React App to Heroku: • Deploy React App to Heroku | Add Environme...
Timestamp:
00:00:00 Introduction + Demo
00:03:03 Create & Add Products to commerce.js & stripe.js account
00:11:21 Create React App & install required packages
00:17:31 Add commerce.js library, add React Router & create Products component
00:32:55 Create Product component & Material-UI use Grid system
00:43:55 Create NavBar component
00:50:38 Create Banner component
00:57:44 Create Footer component & body and Products styling improvements
01:04:00 Add a Product to basket & create Basket component
01:24:23 Create basket Banner, Spinner components & show total cost on the navbar
01:38:38 Create Checkout & CheckoutForm components
02:26:15 Create OrderDetails component
02:39:21 Create Payment component
02:58:57 Create Confirmation, CustmCard components and progress bar.