ECommerce Web Shop - Build & Deploy an Amazing App | React.js, Commerce.js, Stripe

While building it you're going to learn many advanced React & JavaScript topics, as well as how to use Stripe for card transactions. On top of that, at the end of the video, you will have this unique and complex webshop app that you will be able to add to your portfolio. And trust me, e-commerce applications are impressive.

✅ A special YOUTUBE discount code is automatically applied!

📚 Materials/References:

Use the code JAVASCRIPTMASTERY to save up to 91% on all yearly hosting plans.

🌎 Find Me Here:

Time Stamps 👇
00:00 Intro
04:12 Setup
09:20 Mock Products
25:07 Navbar
35:01 Commerce Products
52:50 Add to Cart
01:01:24 Cart Layout
01:21:17 React Router
01:29:11 Cart Buttons
01:38:01 Checkout
01:49:56 Address Form
02:04:48 Fetch Countries
02:23:00 Fetch Subdivisions
02:42:33 Review
02:49:38 Payment Form & Stripe
03:08:49 Integration
03:18:40 Mobile Responsiveness
03:20:23 Bug Fixes
03:21:36 No Credit Card Fix
03:25:45 Deployment

#ecommerce #react #webdev

[braulioandre]

This guy is literally the only person I've seen on YouTube do this fully developed apps for free, others just do basic stuff and put the most complex ones for sale. I really appreciate what you do for the community, you're one in a million.

[pratikkumar]

Cant believe this is free content. God bless you

[mihai-alexandrubujor]

The fact that you show how to build all these amazing projects for free is just amazing.
As a high school student, I don't afford to buy courses on the topic.
Keep doing what you do, you are great!

[wzusegv]

For anyone stuck on getting your actual products to display, Commercejs updated their image link. In Feb 22, Product.jsx should have image={product.image.url} instead of what's in the tutorial. Hope that helps anyone!

Awesome tutorial btw, thank you!

[adam-user]

This was THE best tutorial for React I have seen so far, and it's 2023 already. Not too fast, not too slow, straight to the point, with very clear explanations for every step. Thanks man!

[satsu]

For those having problem with "undefined" when creating Add to Cart here's a solution:

const hanleAddToCart = async (productId, quantity) => {
setCart(await commece.cart.add(productId, quantity));
}

[beenyshsaeed]

I am really in awe at the amount of time you have spent explaining it so thoroughly, coming to a beginner's level. Appreciate your effort. Grateful that a teacher like you exists.

[zendr]

"They give us this nice setup guide but we are not gonna use that, cause I m gonna teach you everything"....😊Respect+++

[loarithm]

Seriously, where have you been ?!!!
The number one Youtube video in 2020/2021 no kidding.
Thank you!

[krzysztofabram]

I was at Web development bootcamp for more or less 4 000 $ some time ago. The whole course knowledge is used in this tutorial

[gauravshinde]

You are a legend man. This was my first experience of creating a web application and you made it so comfortable. Extra thanks for explaining things while coding, you are clearly an awesome teacher.

[hamzahmd_]

First of all, that's the best e-commerce tutorial, totally free and highly updated with advanced tech skills. Secondly, this guy has taught so fantastically that even a novice can build his own store easily.

[thatoneguy]

This is the best stripe/react tutorial I have come across. He could easily break this up into a course and charge for it.

[LongBoy.]

This is superior to some of the other e-commerce tutorials I’ve seen as this one has many of the same features including strip integration but at a more compact time-allotment and better design/aesthetics. Can’t wait to fully dive into this!

[jmg]

Thank you for the tutorial, this was excellent! Just wanted to help out those of you that may be facing the HTTP 422, invalid data error after you enter the test credit card number. Reference 3:09:00 in the video and follow the steps to add Stripe as your payment gateway. Remember to use the sandbox/test keys. Once you add Stripe in addition to your test gateway under Settings>Payment Gateways, retry the checkout process. You will now see orders going through, and the Thank you for your purchase... being rendered. I did search through all the comments and found several had come across this error. One approach even took the entire code from the repo and changed keys and still faced the error. This led me to the conclusion that this error is not code based but dashboard based (Chec/Stripe). Therefore, if you are facing HTTP 422 errors, verify your Chec/Stripe dashboard setup! Hope this helps!

[alishmadhukar]

1:21:27 switch is not supported anymore. Do the following instead:
1) Replace Switch with Routes:
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
2) <Routes>

<Route path='/' element={<Products products = {products} onAddToCart = {handleAddToCart}/>} />
<Route path='/cart' element={<Cart cart={cart} />} />


</Routes>

[reyalvarez]

We would really appreciate it if you made part 3 of the MERN app. You do have a lot of your followers liking your videos. Thanks, I'm learning so much.

[tripl]

Bruh, you deserve so much more sub. You're the best! I stop watching Traversy after I've discovered your channel.

[lemun_ad]

I just got a freelance job about making an e-commerce website and holy cow you are a life saver !
Thank you so damn much for putting this here for free !!

[kashnigahbaruda]

The best React e-commerce tutorial on YouTube. Good tempo. No bullshit.