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

[@javascriptmastery]

Build even more comprehensive, modern applications such as an AI-Powered Movie App and an NFT Marketplace application. Become a professional developer today - www.jsmastery.pro 🔥

[@yoonseok1223]

Hey can you please do an updated version of this tutorial?

[@wisdomelue]

please where did useStyles() come from???

[@ririyan5960]

Hiii, how can i make the shipping cost also added to the total shopping?

[@chukwuchinedu9844]

Bro, you have been always awesome, throughout your endeavor from the videos with which you give out here, more grace to your elbow bro. wishing you more success.

[@hiucd_2012]

i have some bug when using add to cart feature, it log undefined instead of listing item of cart. I strictly follow the video but i do not understand why it does not work

[@braulioandre2918]

This guy is literally the only person I've seen on KZbin 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.

[@juansesalmar]

I think the same way, this guy is helping a lot of people to engage with the Web development. Thank you!

[@bombardmusic]

I also highly recommend Sonny Sangha on KZbin! I learned a lot from both of them!

[@Sree_ShortsYT]

@@bombardmusic ,,,

[@AliBayram-b1x]

shut up

[@mihai-alexandrubujor9826]

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!

[@javascriptmastery]

Enjoy! 😊

[@LongBoy.0]

Never buy courses on this stuff unless it's like $10 on Udemy. Most of this type of content is out there, just gotta look.

[@krauser_bowser5873]

@@LongBoy.0 Yeah i did a boot camp on udemy for $25. its all there man

[@jedidiahehimah2674]

@@Felix-dh9tl he'll need more context to solve this

[@Felix-dh9tl]

@@jedidiahehimah2674 no he doesnt, it was because material ui was updated and i had to copy his json dependencies

[@pratikkumar939]

Cant believe this is free content. God bless you

[@javascriptmastery]

Thank you!

[@pratikkumar939]

@Supreme Fate yeah clearly you dont

[@kartikayjoshi3123]

@@javascriptmastery hi as i am viewing your video your video is great for beginner like me so i have a query how to add other currency sign other than dollar please tell

[@ecommerce3973]

Paying for any advice is a scam... Everything is well known to the pros and watching enough videos gives you pieces of each part. Only Scam Artists are trying to "Mentor" you.

[@kartikayjoshi3123]

@@pratikkumar939 hi i tried it still not happening

[@R221-e7t]

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!

[@R221-e7t]

This happens again during the Cart Layout. CartItem.jsx should have image={item.image.url}, not image={item.media.source}.

[@sb8091]

@@R221-e7t I LOVE YOU!!!! YOU SAVED MY LIFE. SPENT LIKE 3 HRS TRYING TO DEBUG UNTIL I SAW THIS COMMENT. Hope you get some good Karma for the rest of the day!!!! Thank you!!!!

[@R221-e7t]

@@sb8091 Haha you're welcome! I was in the same boat, it was rough

[@KazMaz18]

thank you

[@Enthe0genic]

Thanks for your helps❤

[@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!

[@beenyshsaeed4559]

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.

[@beenyshsaeed4559]

@@M.A.Kabir.K What do you need help with? Email me

[@alishmadhukar2177]

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)

[@yotsukime]

you are a God sir! thank you 🙌🏾

[@sumanthdevadiga9406]

or you can instead " npm uninstall react-router-dom " and then " npm i react-router-dom@5.2.0 " in your terminal ,

[@Diaba_dos_compiuter]

@@sumanthdevadiga9406 Thank you very much, this was the only solution that worked

[@padmalayajena3593]

@@Diaba_dos_compiuter hi there, any idea why am i facing this err "Error: Expired API Key provided: sk_test_*********************************************************************************************DRjSiY " instead of showing the confirmation msg?

[@rogelioperezmena3460]

@@sumanthdevadiga9406 thanks u are god

[@satsu0]

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)); }

[@LarsWu]

It worked, thanks!

[@codersclub4526]

Thanx man

[@yeshwanthkannegundla266]

@Lucas Satsu hey iam adding items commerce js but it was reflecting in console do u have any idea i jst want to connect you.

[@akifshah1576]

Thanks so much!!!!!!You have no idea how much I was struggling with this. I was almost planning on quitting. Really Appreciate it.

[@kipchumbarodgers7464]

today... you are my hero

[@jmg5219]

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!

[@debajyotipila982]

I rechecked the keys but still getting data invalid error😢.. Do you think anything else is the problem? Thank you 😊

[@YogeshKumar-cu7li]

@@debajyotipila982 hey i am also facing the same problem... do u got any solution for that?

[@Old_SDC]

I did this, it worked but I’m getting memory leak issues on the “setShippingOptions” section of code

[@patrik3403]

For anyone still struggling - The problem is in creating the product in commerce js itself. When you create a new product, you of course name it, price it, maybe upload an image, but below that are some options (Require shipping address, require billing address, require full name). If you uncheck "require billing address" the code is gonna work just fine. Hope it helps :)

[@thinkfast9110]

@@patrik3403 tried to do that but when adding shipping details to the products it automatically checks the "Require shipping address", and it cant be unchecked. Any ideea on how to make it work?

[@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 !!

[@relaxationandpositivevibes8362]

hi , where can i get such jobs

[@javascriptmastery]

Hi there, I love your comment so much. I want to use your comment as a testimonial for my upcoming course platform, is that all right with you? :)

[@zendr0]

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

[@krzysztofabram4883]

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

[@javascriptmastery]

Woah.. That's interesting to hear.

[@lo9arithm]

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

[@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.

[@javascriptmastery]

Wow, thanks!

[@thatoneguy7218]

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

[@javascriptmastery]

Appreciate it Jacob!

[@gauravshinde8767]

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.

[@reyalvarez1617]

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.

[@javascriptmastery]

I'm planning on doing so!

[@reyalvarez1617]

@@javascriptmastery Thanks!

[@jerryl.7286]

Ha, I do like your spirit to say it loud! Alternatively, you can have this kzbin.info/www/bejne/pGLQlXSGe9ZlhdU as another option! Hope it would help.

[@ericcapiz6516]

for those that have issues with payment options when going from on country and then US, i deleted the domestic shipping info that was done by default and recreated it myself. I also added a domestic shipping fee as well and once i saved and refreshed the app, it works.

[@TheEsokoletsky]

I was just stuck on that and it works, thanks! How did you figure that out? lol

[@ericcapiz6516]

@@TheEsokoletsky I digged down waaaaaaayyyy deep in the comments and saw someone else mention it.. so I tried it myself and it worked and then posted the same instructions so new users who go thru the tutorial can see it without searching deep into comments lol

[@kashnigahbaruda]

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

[@javascriptmastery]

Thank you man!

[@LongBoy.0]

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!

[@javascriptmastery]

Thank you! This comment means a lot to me as this was exactly what I was trying to achieve. Do more in less time while still keeping all the functionality and good design.

[@LongBoy.0]

@@M.A.Kabir.K what is your issue

[@tripl9111]

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

[@javascriptmastery]

Welcome aboard!

[@duccdefgab]

your channel deserves a million subscribes, I've learned so much in just 1 video

[@javascriptmastery]

Thank you!

[@katesaychaleun6322]

1:59:11 There have been a few updates with react-hook-form, so in case anyone else was having trouble making the form or seeing the labels, here's my code to fix it: } control={control} name={name} /> BEST WISHES

[@PereJumbo]

I noticed it also, I fix it.

[@katesaychaleun6322]

@@PereJumbo by the way, have you gotten to the Payment Integration part yet? 😔 I've been stuck for a while now... so it would be appreciated if you could provide some tips

[@PereJumbo]

@@katesaychaleun6322 Hey, I didn't use stripe for payment, I use a difference method, but I could help with it

[@katesaychaleun6322]

@@PereJumbo that would be great! Thank you so much :) How can I share my code with you? And may I ask what other method you were using?

[@PereJumbo]

@@katesaychaleun6322 share the code with me on github www.github.com/jumbopere or chat me on Twitter twitter.com/jumbo_pere

[@richardmarin2538]

Boy, this is dense for sure. I didn't notice at first cos you talk in a very relaxed, soothing way, but there's actually a lot going on. Had to pause almost constantly to follow along, I'm guessing this would be about twice in length if it went like, "step, explain, step, explain" like other tutorials. I really like it, it's real demanding for sure. Thanks!

[@WanderingNasi]

Update as of 4/26/2021: Controller now requires a render prop for react-hook-form. update your controller in the CustomTextField.jsx to: import React from "react"; import { TextField, Grid } from "@material-ui/core"; import { useFormContext, Controller } from "react-hook-form"; const FormInput = ({ name, label, required }) => { const { control } = useFormContext(); return ( ( )} /> ); }; export default FormInput;

[@SUNYBOI]

Hey I have added my real account details to stripe and when I am putting my real card details and clicking pay.....it throws an error saying....your payment method requires further verification......how to fix this

[@alishmadhukar2177]

thanx.....that helped.....🙌🙏👍

[@maatte7093]

@@SUNYBOI did you find a fix ? pls

[@rayahmed2202]

Hey. Just in the midst of completing this project. I wanted to mention how nice it is you walked your audience through .env process. Even though I know how to do it now, I would have appreciated some of the other tutorials taking the extra few minutes like you did to have explained it. Would have saved me some headache. Great job so far I'm enjoying this. Thanks.

[@EnamoradademiDios]

So in-depth, detailed and helpful! Thank you you've created an amazing resource

[@Alex-hi2vy]

Man , you are a GOD. I'm really surprised about, how much knowledge you are sharing in this tutorial .Thank you very much !

[@javascriptmastery]

Wow, thanks!

[@tonywest9146]

@@javascriptmastery PLEASE help me , I am getting error while connecting react to commerce.js "Invalid public key given to commerce.js ciient

[@yogeshyewale478]

Even a single minute i didn't find it bore . such an amazing tutorial

[@severinvitalie1049]

Even if I do not plain to watch this tutorial very soon, came here to only drop a like and a comment for KZbin algorithms. Respect your work tho !

[@javascriptmastery]

Thank you, appreciate it!

[@raviraj-zm4zb]

Please continue this series. Add sign up and sign in features and different carts for different users. Thank you very much for the amazing contents u are creating. Respect++;

[@lexicon8506]

@@M.A.Kabir.K Same here. i'm also having error installing dependencies

[@emilysfam7297]

@@lexicon8506 try to write same command with --force at the end

[@kanig5256]

Appreciate this video. I was looking for the next project to add to my portfolio and this will help me diversify it and also apply advanced concepts and showcase those. Thanks man

[@javascriptmastery]

Thanks!

[@Dipstick67]

First of all thank you so much for the video. I have a soloution to the 422 error, this is where some debugging works well. First thing is bring up the console, next see what the response is from the server. This will tell you whats its missing or needed. In my case i had to expand the orderData object, I needed to add a billing object in, this is easy just copy the shipping object and paste that in. Of course in a live application you can set a diffrent shipping page as another step if need be. The other issue i had was a spelling mistake on the subdivision, once again if you check what is being returned by the object by console.log(orderData) once you have added your data this will populate and give you the information you need!

[@javascriptmastery]

Feel free to ask the Commerce.js team on Slack - chec-commercejs-community.herokuapp.com/

[@VS257]

I did all this. i Checked with console.log(orderData). I added billing object in. Still doesnt work. It still gives me 422 Error.

[@Dipstick67]

@@VS257 you need to see what the 422 error is giving you

[@VS257]

@@Dipstick67 I did. It says "Error: Requested quantity is not available." .... I checked my request object and the line_items object is obviously there. I dont know maybe Commerce.js is just not working

[@Dipstick67]

@@VS257 you have not set the quantity required in commerce js.

[@asjadahmedkhan9661]

Ohhh Man!!! This channel is revolutionary. Why didn't I find it earlier????

[@salvadorcabello2891]

For anyone having the new Controller version problem and still getting an error, you should change the controller as stated by other users before me: return ( } /> ); ...AND change the control state as a useForm (instead of useFormContext): const { control } = useForm(); That's how I solved it and I hope to have helped anyone else having the same issue.

[@djeudy]

YOU SAVE MY LIFE BROOOOOOO!!!! THANK YOUUUU!!!!!!!!!!!!!!!

[@gabrielcampos9948]

Thanks!!

[@pjguitar15]

Thank you for using functional component and no the class one

[@thembamodikwane5863]

May God bless you and keep you. This is gold. Thank you so much for taking the time to do this. I can't tell you how much ive learnt from this video.

[@TradersAnimosity]

Can't believe that this is a 3 hour course for free this is insane. Best in deph guide I have ever seen, because of people like you others don't need to struggle thanks man

[@snippets1012]

This is the best, I repeat best ever tutorial I have ever encountered, things are simple and easy to understand and , the way you approach complexity with subtleness is soothing to my mind 💖💖

[@Shakeel714]

Thank you Adrian. In every minute of the video, there is something to learn new for newbie like me. Really appreciate your efforts and cool way of teaching.

[@javascriptmastery]

Thank you!

[@harshmalviya4831]

But being a newbie even after completing the project, still I'm blank. It feels like a typing course for a newbie like me.

[@talhabinkhalilmuhmmad4159]

JS mastery ! You are a king of ReactJs

[@javascriptmastery]

Thank you!

[@sohailsaha7427]

One of the simplest, to the point tutorials out there, that gets the job done! Thanks for this, and introducing me to Commerce.js.

[@atulpatil2289]

Hey Sohail bro, I have completed the project, Im starting it today, But bit skeptical as the video is year old, so it will cause many problems for beginner like me to install same packages, What you think I should do this project or not? please reply

[@_maizon]

This tutorial is so enlighten, typically this tutorials are also bored for me but this one I could't stop seeing it man thanks for this

[@jorgeduran1886]

Hey man, I just see the demo and It looks so good - thanks for sharing this

[@javascriptmastery]

Glad you like it Jorge!

[@journey_to_100]

JSMastery Rocks, People Shocks!😎

[@javascriptmastery]

Haha thanks! 😉

[@mandihaase2744]

What an amazing tutorial! I absolutely LOVED doing this project. Thank you so much for the amazing content and please keep making videos - you are a wonderful instructor!!

[@noname89636]

God bless you for this. You taught me concepts about coding and files that you don't even know.

[@umarikanav1352]

Simply you are amazing. I were struggling to create an online shop. It is best. Thank you for everything..

[@AnthonyCandaele]

you can fix the issue with undefined cart at 1:13 like this: const isEmpty = !cart.line_items?.length; No need to remove that code.

[@javascriptmastery]

You're right, I've thought of that, but there was no real need to even have a variable in this case.

[@ithelp5893]

Thank you very much for this comment.

[@albertmunteanu9098]

i still get the same error here on this line even if i type: const isEmpty = !cart.line_items?.length i get: Error: EmptyCart(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. Can somebody offer me a solution for this error please ?

[@EdwardElric-uf3rr]

@@erniejohnson7636 @AlbertMunteanu line 32 at 1:13:10 on line 32 you need to have if(!cart) return 'loading' and !cart.list_items.length needs to be in the ternary and when you pass it just make sure on app.jsx it is

[@felixchen6109]

@@EdwardElric-uf3rr I am having the same error, I check my if(!cart) and condition for rendering filledCart, yet it still giving me an error of nothing was returned from render

[@nafiurannand7942]

I will just say thanks for the youtube algorithm. You are doing a really great job.

[@javascriptmastery]

I'm glad you've found me 🙌

[@abdullahanis5761]

Plss take this project to another level by integrating it to backend like Node js and Express js, this will be my first Ecommerce website..

[@javascriptmastery]

There is another MERN Project on my KZbin

[@PremKumar-uy4jd]

Thanks for explaining it so fully, without any major skips especially i liked the debugging part on how you did

[@AbdulRehman-zi1vq]

OMG! Why I have wasted my so much time .........Dude! What a Tutorial! Wao 😊 My First Ever Tutorial I just have to watch it completely!!!!!!!!! Nice Explanation with Practical Work............ Keep it UP............DUDE

[@javascriptmastery]

Thank you!!

[@maatte7093]

dude you just watched the tutorial and dont even tried, the tutorial doesn't work just check the common github error

[@cuestafrancisco]

Hey Adrian I looked into what you suggested and was able to figure it out, the error at line 54 of the addressForm "props spreading is forbidden react/jsx-props-no-spreading" I replaced the spread with Awesome sauce!!!! thanks again!!!

[@javascriptmastery]

Awesome!

[@codingwithbasir]

great tutorial. I like your way of teaching. keep going, bro.

[@javascriptmastery]

Thank you so much, appreciate it!

[@CoolScratcher]

You're great at everything! Editing, Recording, Narration, Teaching, Design, EVERYTHING! Keep being awesome!! - A 12-year-old kid who is AMAZING at coding for his age but okay overall

[@javascriptmastery]

Thank you! Keep learning and you're going to be great! 👌

[@Drenwickification]

Thank you so much for your videos man. I was in a career I hated and so I decided to switch at 29 to become a coder. I just did a full-stack coding BootCamp and now I'm improving my skills on my own, and going through videos like this really helps me to understand react a lot more and helps with my portfolio a lot. You're amazing!

[@Drenwickification]

@@M.A.Kabir.K it might help if you say what error you are getting

[@AkaSmathy]

​@@Drenwickification I have an error on the cart.total_item at 1:00:12 it say that it's undefined, can you help ?

[@kvya1000]

One of the best content maker of js ... By the way at 1:14:11 time we can use optional chaining and fix like const isEmpty = !cart.line_items?.length;

[@javascriptmastery]

Yes, we can :)

[@theonewheeler]

@@javascriptmastery wahoo this fixed it for me!!!! thank you @rahul Arora, can you explain why we put the ? in and what it does? thank you for any advice in advance

[@raymondmasupha9757]

I can start a software company buy just watching this guys videos😂😂

[@djobverse2140]

I want this channel to be my little secret.. But I also wish for him to grow so bad

[@javascriptmastery]

Haha thank you!

[@willfredphetole7052]

😂 😂 6 months later I found the little secret and loving this

[@ayushmukhopadhyay7470]

I really like your work I have learned so much from your projects. A small request can you add Login and registration to your existing project and a bit of re-design to it ❤

[@javascriptmastery]

Great idea! 👌🔥

[@87wxdiaz]

its things like this that show humanity is not hopeless

[@parthsharma5187]

cant believe this content is totally free.. u r great man..

[@caki_kate]

1:59:11 There have been a few updates to react-hook-form, so in case anyone else was having trouble making the form or seeing the labels, here's my code to fix it: } control={control} name={name} /> references to my solution: (I was going to paste the links to give more info, but KZbin isn't allowing me to :/) BEST WISHES

[@vadapow]

Saved the day mate ❤

[@joangavelan]

The props fullWidth and required must go in the TextField component in order to work, not in the controller anymore

[@1bbarritt]

Alternatively, can uninstall react-hook-form and install V6

[@caki_kate]

@@joangavelan Thank you for that, I will update the code above right away :)

[@caki_kate]

@@1bbarritt V6 seems new to me, would you recommend using it over react-hook-form?

[@shyattoun6963]

anybody encountering errors around 02:48:00 with "line_items" on REVIEW component just make sure you delete "live" before line_items and subtotal,that worked for me.

[@lostsoul6987]

Still getting error here though

[@shyattoun6963]

@@lostsoul6987 make sure you use sandbox api. In what stage the app crashes?

[@Felix-dh9tl]

Hi it seems that the old code works without errors: const handleRemoveFromCart = async (productId) => { const item = await commerce.cart.remove(productId); setCart(item); }; but when he changed code to this, the app crashes when you add product to cart or remove them etc... weird... same goes with handleAddToCart, handleUpdateCartQty etc. const handleRemoveFromCart = async (productId) => { const { cart } = await commerce.cart.remove(productId); setCart(cart); };

[@cosmicechoes42]

FUCK I DID IT!!!!!! THANK YOU SO MUCH!! THANK YOU SO MUHCC

[@cosmicechoes42]

@@Felix-dh9tl I found the solution here :)

[@jahangirakbar4524]

Exactly the video I needed. Thank you for Uploading. Love from Pakistan 😍🇵🇰 Subscribed

[@javascriptmastery]

Glad you like it! 😊

[@rahadulhaq6387]

I love ur very first two words ............" Hello Everyone " May ALLAH bless you and keep you safe

[@NERO-ez1mn]

this 1 is the BEST of all the content from dream to WEB. make more please like a social media

[@javascriptmastery]

Thank you!

[@jengkhaw15]

This is amazing! Love your quality content!

[@javascriptmastery]

Thank you!

[@eduard7746]

Amazing ... I'm speechless with this great content.

[@javascriptmastery]

Thank you so much! 👌

[@dannyman2200]

if this dude took a little more time with explaining things, then this channel would be EPIC!, still good though

[@javascriptmastery]

Thanks for the feedback Danny!

[@ingyukoh]

Great lecture showing how to debug (2hr 14mins) through chrome debug tools. I learn a lot. Thanks.

[@lathryx]

Not sure if this really matters, but I'm just gonna say that the phrase "how does it look like" is a little off. It would be more colloquial to say "what it looks like" or even "how it looks". Again, not that big of a deal, just thought I'd point it out! :) Great video, by the way! This was very helpful for me learning how to use Stripe and Commerce.js! Thank you so much!!

[@riyazm9518]

Hey man. Fantastic tutorials. Awesome work to be honest. A true blessing for so many confused react devs out there. I'd just like to know two things: 1. Is there a way to include actual account information so past purchases are saved along with the payment transactions? 2. How secure is the app when it comes to saving personal data? What would you need to add to make it more secure if needed? For example, saving critical credit card info for subsequent purchases.

[@karlguzman9775]

Hi Adrian, Awesome content again. Thanks for all these project code-along! One thing I noticed, if the cart.line_items.length is not available yet when Cart.jsx gets rendered, the site will throw an error of 'cart.line_items.length' undefined. One fix I found is to change the const isEmpty logic to const isEmpty = !cart?.line_items.length

[@karlguzman9775]

Okay nevermind. Just saw the fix for that in the video :D spoke too soon lol

[@theonewheeler]

this doesn't work for me, did you find any other fixes?

[@kevin5523]

why does no1 ever adds testing in these type of videos. Would be so useful.

[@mohammadyunus2156]

do you QA testing?

[@kevin5523]

@@mohammadyunus2156 No I just want to learn how to test react components using integration tests

[@orlandog1979]

@@kevin5523 search it bro.

[@kevin5523]

@@orlandog1979 I searched, but I want to see real world examples in real projects, and those are really hard to find.

[@orlandog1979]

@@kevin5523 Yes but I think that the tools that you have. You can build it...I'm a jr dev and I'm learning. I made my portfolio using React js with Firebase and CSS. And I'm making my projects with these tools that I can get in these tutorials...

[@sammbende2]

I usually get off with long videos. Yours got me hooked from the start till the end. Awesome.

[@collinstanki8231]

One of my best tutorials thanks so much. Love from Kenya 👍

[@javascriptmastery]

You're so welcome!

[@rosemwangi5635]

For anyone struggling to display the shipping address form use this code in FormInput import { TextField, Grid } from "@material-ui/core"; import { useFormContext, Controller } from "react-hook-form"; const FormInput = ({ name, label, required }) => { const { control } = useFormContext(); return ( } /> ); }; export default FormInput;

[@MaxProgramming]

Ecommerce! Wow. So excited! A question, why were you importing React from 'react'? we now have JSX transform by which we don't need to import it in React 17

[@javascriptmastery]

It's just a matter of habit, thanks for mentioning! 😊

[@eternalcalm8080]

You bring so much value content like this, I am learning so much from you!

[@javascriptmastery]

I'm glad you're learnin! 😊

[@muhammadshoaib5755]

Very appealing and highly recommended tutorial .thankyou for such content , i have a question how can we add search module into this so that incase of multiple products we can search and sort them ??

[@johndoe-cq3de]

Awesome content.. But one drawback for those who don't provide credit card details for stripe is that though they mock the payment by showing spinner the items in the cart would still remain the same without being removed.. The solution is to just use the same commerce function for emptying the cart after clicking the payment button.

[@javascriptmastery]

Thanks for the solution!

[@johndoe-cq3de]

@@javascriptmastery ❤️ I have used redux instead of prop drilling.. I know its a bit more code but I thought it would be a good practice

[@javascriptmastery]

That's great, feel free to share the repo :)

[@johndoe-cq3de]

@@javascriptmasterygithub.com/suseendharlal96/react-commerce Also after filling the address form and proceeding to payment and if u go back step, all the form data would not be lost, I have handled that scenario as well :)

[@dennyage4791]

Wow! This is amazing I would like to recommend to everyone who has started learning react !!

[@SUNYBOI]

I have used live APIs and not the sandbox but while making payment it shows that the payment method requires further verification, how to fix this

[@SUNYBOI]

I am using my real card details

[@andrewcarrigan2205]

when implementing stripe card elements with commerce onSubmit i keep getting back 422 error the given data was invalid, using a stripe test card number wondering if anyone may have any insight

[@joshuaicenogle1283]

I got the same thing and it was because it expected a billing address so what fixed it for me was going into my product settings and unchecking the "Require billing address".

[@Praveenkumar-sj8pe]

@@joshuaicenogle1283 could explain a bit detail

[@aogunnaike]

How if I want to add an admin panel? How do I go about it with this structure

[@TheCodingOdyssey]

Who else loveees this channel! Hands up!

[@javascriptmastery]

Hehe 🙌

[@leandroteixeira2868]

Thank you for this man!! i was building an ecommerce website with full stack development but i missed i few keys to properly do that, so this video helped me alottttttttttt, once again, Thank You!

[@Ahmaddev_web3]

I really Like this Project is my dream work. just to give you a hint i click the star button in github. But please can you add a search button. with some other additional improvements? Thanks

[@javascriptmastery]

Great idea!

[@Ahmaddev_web3]

@JavaScript Mastery I notice that when you reach payment method, the shipping price has not been added together with total amount of money to be paid kin the button click. Pls can you check that? thanks

[@TikTokProductionsaurav]

Can i use this project to edit and sell to the client

[@javascriptmastery]

Sure :)

[@somsubhra97]

Bro, you are the next Brad Traversy on KZbin. Love from India !!! Absolutely loved this video, thanx a ton !!! Please create a video on Vue 3 with its major feautures.

[@javascriptmastery]

Thank you, means a lot! 😊

[@natures-e9m]

Thank you for such a detailed video. I am starting this project today and I am excited to finish it

[@danlitofficial4632]

Please help! i am getting an error at checkout/pay saying "The given data was invalid" even though i've properly entered required billing information. I really need help, considering this will help with my business.

[@javascriptmastery]

Commerce.js team has an amazin Slack channel where they help with bugs: chec-commercejs-community.herokuapp.com/

[@seanknowles5309]

Why react? most would use Nextjs for the SEO benefits. Nextjs would have been a much better fit for E-commerce.

[@diogoluis6179]

Next is the perfect framework for ecommerce

[@javascriptmastery]

I agree! Commerce.js have full working NextJS store example on their website, for that reason I chose to do just React. I might do a NextJS Web Shop in the future! 😊

[@aymofficial]

I believe this is not different with nextJs... I'm also planning to use this inside next - did you try and have errors?

[@diogoluis6179]

@@javascriptmastery That would be so cool, I'm currently building a ecommerce with next and graphql and id like to see other people approach. Even if built with rest architecture.

[@diogoluis6179]

@@aymofficial next works as a multi page framework, so it doesn't use react router but a built in next router. Also the way you fetch data is different, you can choose between getting an fetch api call on page loading (server side rendering) or getting an api call on build time (static site generation). The cool stuff on nextjs is that you can mix the best of both worlds. Ecommerce should be as static as possible, and have server side rendering for user custom area. Also it has built in image optimization, automatic code splitting and a very intuitive way of organizing the web app pages.

[@Aborichinal]

Everything is working fine for me until i switch the country. I get an error with the fetchShippingOptions(options) polrtion of the address form...need help

[@iLoveToLearn247]

Thank you Adrian. This is a great tutorial. Very comprehensive

[@codeclover3167]

Finally youtube recommended a gem

[@md.sayeedrahman2553]

is commerce js pagination possible. like how many product will be displayed per screen. i see this feature is not available currently. any alternative. can i do it with axios

[@TrendSpree1]

i'm getting "TypeError: Cannot read property 'map' of undefined" when compiling after removing mockup products and testing, can you help ??

[@casiimir]

Check that the product list is filled, this error tell us that it's empty. Place a debugger or a console log (actually I'm trying to find this error...)

[@mattoattacko]

I have the exact same problem, but with 'name'.

[@vojtechkrupa8449]

@@mattoattacko same, Did you figure out how to fix it?

[@contenidoeningles64]

look at 'index.js' if you imported correctly the Cart component *from "./Cart/Cart"*

[@mauroandressosa1342]

Me pasa lo mismo