Build a Shopping Cart With React JS & Stripe

  Рет қаралды 103,285

Traversy Media

Traversy Media

Күн бұрын

In this project, we will create a shopping cart using React and Stripe.
📽️ Cooper Codes KZbin Channel:
/ coopercodes
💻 Code:
github.com/coopercodes/ReactE...
💖 Show Support
Patreon: / traversymedia
PayPal: paypal.me/traversymedia
👇 Follow Traversy Media On Social Media:
Twitter: / traversymedia
Instagram: / traversymedia
Linkedin: / bradtraversy
Timestamps:
0:00 Project showcase
1:25 Create react app / installs
2:22 Navbar component
6:00 Implementing React Router
7:45 Creating pages for router
10:35 Building rows and cols for Store page
12:14 Creating products for React to use
16:50 Loading products dynamically
19:18 Creating product card component
22:45 Creating a modal for the cart
25:55 Creating our cart context (Cart functionality)
46:02 Adding CartProvider to our app
46:29 Creating add / remove product to product cards
52:05 Adding cart functionality to navbar (number of items)
54:40 Showing cart data in modal
57:00 Creating CartProduct component
1:01:00 Create Stripe account and add test products
1:03:06 Creating Express server / installs
1:05:00 Creating Stripe checkout request
1:09:30 Adding Stripe IDs to React
1:10:33 Creating checkout call from React
1:13:43 Final project / checkout demo!
1:15:06 Thank you for watching

Пікірлер: 180
@sanjaybatak3549
@sanjaybatak3549 Жыл бұрын
Just when you wanted something like this, Brad drops this video. 🎉 Thank you Brad and the team. You guys are doing phenomenal work.
@paulthomas1052
@paulthomas1052 Жыл бұрын
A fantastic tutorial. Easy to follow....no errors....a great introduction to Stripe too. Thanks
@laxmiprasanna4092
@laxmiprasanna4092 6 ай бұрын
This is exactly what we need. These small videos help us during actual work.
@renangaldino6538
@renangaldino6538 Жыл бұрын
This is absolutaly one of the best React tutorial avaiable in YT, Thanks a lot !!!
@thangtruong1808
@thangtruong1808 8 ай бұрын
Thank you for your time to support us. Loved.
@mikeynavarro3195
@mikeynavarro3195 Жыл бұрын
This is probably my favorite youtube tutorial, Cooper revisited harder concepts for clarification multiple times. he's cool for that, definitely earned a Sub
@aliplaysgtr
@aliplaysgtr 11 ай бұрын
Exactly what I needed for a graduation work. Thanks a lot! Super clear and comprehensive
@JonBrookes
@JonBrookes Жыл бұрын
Watching this from start to finish I honestly did not know how Cooper Codes would fit all the material required to code a react app and Stripe backend with express in such a short session but he did ! Very well structured approach and excellent teaching by Cooper. If you dont know arrays in Javascript and methods for workng with them you will at the end of this. If you've never used context with React you will be fine to do so at the end of this video. If you thought integrating payments into a front end app or any other for that matter is in some way beyond reason difficult you will see how easy it can be by the end of this tutorial. Thank you Cooper and also to the venerable Brad for showcasing a new channel and content of great quality
@RobButzofNorthAmerica
@RobButzofNorthAmerica Жыл бұрын
Stuff like this is why I support your Patreon! Thanks so much
@mukangwakalonda7726
@mukangwakalonda7726 Жыл бұрын
I thanks all traversy group, it is my first time I manage the payment project God bless you all
@tonykharioki6913
@tonykharioki6913 Жыл бұрын
I hadn't used stripe in two years, and thanks for this. I needed this refresher
@maskman4821
@maskman4821 Жыл бұрын
This is the best React + Stripe tutorial, thank you so much 🙏
@user-ry8ko5fc8n
@user-ry8ko5fc8n Ай бұрын
This was an amazing tutorial! I am working on a Capstone project that is very similar to this so this was really, really helpful!! Thank you!
@josephngugi
@josephngugi Жыл бұрын
Been looking forward to learn stripe and here it is. thanks to traversy media
@user-hg9zo5gu7v
@user-hg9zo5gu7v 3 ай бұрын
This video helped me finish my first full stack project. Thank you.
@shannonbrookshire234
@shannonbrookshire234 11 ай бұрын
great tutorial. thank you so much for your efforts. I was stuck on a project for a couple of days and using the 'useContext' and 'CartContext' approach really helped. thanks
@brandonespinosa3756
@brandonespinosa3756 7 ай бұрын
Bravissimo, context hook is amazing. Thank you so much for showing this. Great video!
@tristen_grant
@tristen_grant Жыл бұрын
I give him 10/10. Easy to follow and good pacing.
@Julesarixx__my__teleqram__ID
@Julesarixx__my__teleqram__ID Жыл бұрын
👆send a direct message for support and guidance .
@pablodominguez6129
@pablodominguez6129 Жыл бұрын
awesome, simple and cut to the chase. Thanks man!
@blue_berry_pie64
@blue_berry_pie64 Жыл бұрын
Very nice video explaination for each step! Thank Brad and Cooper Codes so much!
@Julesarixx__my__teleqram__ID
@Julesarixx__my__teleqram__ID Жыл бұрын
👆send a direct message for support and guidance
@hbela1000
@hbela1000 Жыл бұрын
Your tutorial is very straightforward, thx Brad, thx Cooper.
@charugupta7103
@charugupta7103 Жыл бұрын
Heyyy traversy! Big fan here, saw your react tutorial few months ago. Came back to revise the same and found this. Thanks for the amazing contetnt.
@user-vk8kt3tp1g
@user-vk8kt3tp1g Жыл бұрын
Questions can come in⬆️
@Brazo07
@Brazo07 8 ай бұрын
Loved every single minute. Thank you so much
@250kennedy8
@250kennedy8 Жыл бұрын
@CooperCodes thank you for this amazing project.
@plaguegames3556
@plaguegames3556 Ай бұрын
Great job Cooper, thanks.
@blipblop92
@blipblop92 9 ай бұрын
Thank you Cooper. Amazing tutorial, so glad I found your channel. Wish the tutorial also showed how to deploy the code to something like heroku or netlify.
@tonghandsome1
@tonghandsome1 Жыл бұрын
Thank you very much Cooper for all the efforts you have done! Also Thank you Brad!
@Julesarixx__my__teleqram__ID
@Julesarixx__my__teleqram__ID Жыл бұрын
👆send a direct message for support and guidance .
@DavisNorde
@DavisNorde Жыл бұрын
Thank you, Cooper! And nice t-shirt, Brad :)
@perrythepalteypus2185
@perrythepalteypus2185 Жыл бұрын
Brilliant tutorial man ❤️ total blast 👌🏻
@Russ_Paul
@Russ_Paul Жыл бұрын
Excellent tutorial Cooper, you're a very good teacher. Your tutorial is very straightforward, it's to the point and makes perfect sense start to finish. One thought that is going through my mind, I don't know if this goes against the grain of React, but could it be restructured into an MVC pattern?
@getmoneycoding
@getmoneycoding Жыл бұрын
Thanks for doing this bro!
@andrewaghoghovwia1948
@andrewaghoghovwia1948 Жыл бұрын
Thanks so much guys
@aniket1008
@aniket1008 11 ай бұрын
Best tutorial on shopping cart on react
@futureverse9347
@futureverse9347 Жыл бұрын
Very good project Thank you @Cooper Codes 10/10
@thenomadengineer9260
@thenomadengineer9260 7 ай бұрын
DUDE... MEGA HELPFUL
@cosanostraytc1030
@cosanostraytc1030 Жыл бұрын
Great tutorial man. Thank you!!!
@Feciboy
@Feciboy Ай бұрын
Great tutorial! Thank you!
@shannonbrookshire234
@shannonbrookshire234 10 ай бұрын
I can't give this video enough thumbs up. Thank You
@nicolassuarez2933
@nicolassuarez2933 6 ай бұрын
Best of its kind!
@VitorGomes_
@VitorGomes_ 11 ай бұрын
Awesome work! Thank you.
@kellyncodes7421
@kellyncodes7421 Жыл бұрын
Thanks for the vdeo Brad/Copper Code
@danielowusu6163
@danielowusu6163 8 ай бұрын
Lifesaver 🎉 subscribed
@omarimoody9794
@omarimoody9794 Жыл бұрын
Excellent work, Appreciate cha!
@tarcisiosassi9379
@tarcisiosassi9379 8 ай бұрын
Really cool. Thanks for share!!
@nathanle8957
@nathanle8957 4 ай бұрын
Another tutorial hell. keep going!
@victorblanco2118
@victorblanco2118 Жыл бұрын
Thanks so much!! Really good tutorial!
@arminesmaili908
@arminesmaili908 Жыл бұрын
real good Armin liked that👍
@kamichikora6035
@kamichikora6035 Жыл бұрын
Yes!!!!! Cooper codes!!!! This guy has good stuff
@CooperCodes
@CooperCodes Жыл бұрын
Hah I appreciate it! Thanks for watching :)
@paymankhayree8552
@paymankhayree8552 3 ай бұрын
thanks. really helped me
@oyeyinkaojora
@oyeyinkaojora 4 ай бұрын
Thank you so much for this,
@oxanasf6369
@oxanasf6369 Жыл бұрын
Amazing, thank you!
@christian-schubert
@christian-schubert Жыл бұрын
Thanks for this! Love how Cooper structures this video, I really think Brad should make sure any video to be featured on this channel should meet certain criteria, i.e. demonstrating the final product before getting down to the nitty-gritty, etc.
@nathanle8957
@nathanle8957 4 ай бұрын
Thanks Cooper
@guilhermebrazmoreirafaria5126
@guilhermebrazmoreirafaria5126 Жыл бұрын
I came here just for the removeOneFromCart and it was awesome, thanks for the help. It really helped me a lot. I was in big troubblle using filter instead of map and then removing the product and then pushing it in again, but it was changing the array order, and this is not fine.
@sonamohialdin3376
@sonamohialdin3376 Жыл бұрын
This is awesome tutorial thank you
@logancabrera7824
@logancabrera7824 Жыл бұрын
Hey guys, I'm having troubles hosting this code. Do I have to change any code to make it work on the web (hosted)?
@movrew
@movrew Жыл бұрын
This is super cool
@sadique_x_
@sadique_x_ 17 күн бұрын
ohh Brad!🤟
@CodeCouture
@CodeCouture 8 ай бұрын
hi, I have a question whn building a full stack ecommerce website how to do you get the person's details Thank you
@emvoinamdinh
@emvoinamdinh Жыл бұрын
thank you sir very much !!!😍😍
@bnji6601
@bnji6601 Жыл бұрын
Amazing tutorial, I had one question on the success and cancel url in the server. I realize this works for localhost. For live deployment how would you go about setting up the routes for that.
@Julesarixx__my__teleqram__ID
@Julesarixx__my__teleqram__ID Жыл бұрын
👆send a direct message for support and guidance .
@thomasstambaugh5181
@thomasstambaugh5181 Жыл бұрын
Does the Modal (that contains the cart) hide when the user clicks outside the BROWSER? For example, if the user has this app open in a chrome browser on a desktop and clicks on "Snipping tool" to take a screenshot, will the Modal hide? I spent a few days (close to a week) trying to provide that behavior to an Material UI (v5) pane with no success. It appears that the "onHide" handler in the (Bootstrap Modal component) is somehow connected to the "focusout" and "blur" events that are flying around under the cover. I'm curious about whether this is a "hard" problem that the Modal component solves or (more likely) whether I'm just confused about how to provide the desired behavior. I do have one substantive criticism of the approach presented here -- I would have used literal object ("{}") rather than array ("[]") for the container of items. Since each item in the array must have a unique ID, then the "id" property used in each item can be its key in an object container. That makes the manipulators for the items cleaner, more robust, and more performant. I appreciate this well edited piece. I might pick some nits with specifics, but those are just nits -- this is an excellent piece.
@programmingwithnit5308
@programmingwithnit5308 Жыл бұрын
Thank you so much🙏🙏
@haroldve98
@haroldve98 Жыл бұрын
this tutorial it's absolutely god thanks
@Julesarixx__my__teleqram__ID
@Julesarixx__my__teleqram__ID Жыл бұрын
👆send a direct message for support and guidance .
@ahsanaqueel1182
@ahsanaqueel1182 Жыл бұрын
Hey @CooperCodes what if we have a lot of products how can we use stripe without creating products on stripe as it will be very difficult to upload same products on 2 different platforms (website and stripe).
@dgloria
@dgloria Жыл бұрын
Cool T-shirt!
@Hodja60
@Hodja60 Жыл бұрын
Great tutorial
@TheBelafleck
@TheBelafleck Жыл бұрын
Hey. This is awesome and very helpful. One question: How is the cart emptied after the purchase is completed?
@user-kj5ug4ok3b
@user-kj5ug4ok3b 2 ай бұрын
Hey Brad, Thanks for this video. I just having one question, Because I am not able to access array for added product in other components of my project. How can I fix this ?
@plaguegames3556
@plaguegames3556 Ай бұрын
C'mon that is a very specific request with almost none information given. Maybe if you can share the code people can help here.
@jawidz4636
@jawidz4636 10 ай бұрын
Amazing tutorial bro ! One question ! im trying to use that show cart button in some other component. tried many stuff but none worked! any suggestion for that matter ? i Appreciate any help
@emmanuelenwereji472
@emmanuelenwereji472 Ай бұрын
Thank you for this awesome video, I would really appreciate if I can get more clarifications on using local storage for this project, I am having issues, whenever I reload the page, I usually loose all my items in the cart. Thank you
@jancahlik9959
@jancahlik9959 9 ай бұрын
How does one host this project in production? Can someone explain please? Would this be under 1 domain and hosting? I am confused, because two different ports are being used.
@ankitbhatt9388
@ankitbhatt9388 11 ай бұрын
I am deploying a project like this, so in cart.jsx and server.js page in checkout function what URL should i give.
@bradwoods371
@bradwoods371 9 ай бұрын
what would be the best way to implement this into a site already built with html css javascript etc.
@ambrosebeavers
@ambrosebeavers Жыл бұрын
Hi There, thank you for this vid. How do one receive payment in a production environment using Stripe. Would it be the same procedure. How would the money get to ones bank account
@codewithahad5990
@codewithahad5990 Жыл бұрын
It;s was really great toturial best of luck
@Julesarixx__my__teleqram__ID
@Julesarixx__my__teleqram__ID Жыл бұрын
👆send a direct message for support and guidance .
@lehuynh7637
@lehuynh7637 Жыл бұрын
20:29 you can use ffc snippet Simple React Snippets extension to fast to code
@aguywithoutaname
@aguywithoutaname Жыл бұрын
Thanks man
@Seedley
@Seedley Жыл бұрын
This is a great video. If I want to make a post once I get a success url back from stripe is there a way to do that? I'm making a car listing site and would like to charge per car post.
@igwanwan_dagoat1523
@igwanwan_dagoat1523 Жыл бұрын
Can I use this for business use?
@963seeker
@963seeker Жыл бұрын
does anyone know how to set a fixed quantity for items to control the amount of supply of any given item? A user might pay for an item that the supplier (You) don't have in stock :( Any help is greatly appreciated
@iUniverse
@iUniverse Жыл бұрын
Hi Brad, if you don't mind can you make a React, Redux-Saga, React Tool Kit real world projects tutorial in your Udemy platform. Learning with you is a great help.
@iUniverse
@iUniverse Жыл бұрын
Is this Brad's Whatsapp number?
@rajatmalviya1097
@rajatmalviya1097 Жыл бұрын
I am also looking for a Redux-tool kit Course.
@Vi-kinglife
@Vi-kinglife Жыл бұрын
Great tutorial i succeeded to do this on localhost. I want to publish it to my hosting. Im new to react and run a build in the shop folder. How can i build the server along with my project and upload into the ftp.
@Julesarixx__my__teleqram__ID
@Julesarixx__my__teleqram__ID Жыл бұрын
👆send a direct message for support and guidance
@varadarajanm6954
@varadarajanm6954 Жыл бұрын
Awesome
@yuehanchen578
@yuehanchen578 6 ай бұрын
I Created my account and updated the stripe Secret key and product API but it was not working when you click the "Purchase" button
@godswillumukoro8908
@godswillumukoro8908 9 ай бұрын
Awesome tutorial I'm not sure why, it doesn't work for me unless I change the modefrom 'payment' to 'subscription'
@dannydanny477
@dannydanny477 2 ай бұрын
57:15 i have still a NaN in total what is changed ?
@puahwankoon9227
@puahwankoon9227 6 ай бұрын
Hello, i follow along the whole tutorial and all is fine till listening on port 4000, it keep throwing error "Cannot GET /", even i clone this github project and still the same error, anyone please help!!>
@iamailasama
@iamailasama Жыл бұрын
great!
@psnjathin8615
@psnjathin8615 11 ай бұрын
The best
@travisbacon5527
@travisbacon5527 8 ай бұрын
Any chance you would do a course on stripe payments for saas apps that uses pay per seat? I.e. admin pays for five seats and then invite users and then they can expand and reduce subscription based on active users.
@danimusbar
@danimusbar Жыл бұрын
Unfortunately the stripes service is not available yet for indonesia
@morokammopane3910
@morokammopane3910 20 күн бұрын
Great tutorial but what about deployment?
@yeshitgupta9554
@yeshitgupta9554 Жыл бұрын
How can we deploy it?
@ArnavSingh-im5bj
@ArnavSingh-im5bj 8 ай бұрын
You should have also covered webhook
@sridhararavamudan1801
@sridhararavamudan1801 Жыл бұрын
By any chance did you receive an email after entering your email address? I kind of tried it, but I am failing
@krunalgupta2836
@krunalgupta2836 11 ай бұрын
Where is checkout linked
@romimaximus
@romimaximus Жыл бұрын
I have a question, ..what about the customer's address, to ship the products ? ..cause i didnt see that, when customer makes the payment ?
@CooperCodes
@CooperCodes Жыл бұрын
Hey, thanks so much for watching! I Know documentation can be daunting, but check this page out: stripe.com/docs/payments/checkout/shipping . In the video we already created the stripe.checkout.sessions.create() , so you need to add some stuff to the create method that will make stripe ask the customer for their shipping information.
@romimaximus
@romimaximus Жыл бұрын
@@CooperCodes Thankx for your reply, .. by the way, i really like the way you explain things in details... i learned a lot from this video tutorial ...!! thank you very much.. 😎👍
@longsyee
@longsyee Жыл бұрын
Is a great teaching but i really hope that more stuff can be added such as multer for file upload profile page dashboard setingup mongo forgot password email api to send email websocket for live chat etc.... so many missing wait you to have a more advance video
@davisspradling5456
@davisspradling5456 Жыл бұрын
How did you get a blank JSON file at 1 hour and 4 minutes. Thanks and keep up the videos!!
@CooperCodes
@CooperCodes Жыл бұрын
Hey sorry that one was a little unclear I'm realizing. I ran the npm init --yes command in my terminal to create the package.json file.
@davisspradling5456
@davisspradling5456 Жыл бұрын
@@CooperCodes Thank you!
@davisspradling5456
@davisspradling5456 Жыл бұрын
@@CooperCodes How would you get it so when you refresh the page in the browser so the cart total does not reset? Thanks!!!
Build a Keyword Extractor: React + OpenAI API + Chakra UI
47:51
Traversy Media
Рет қаралды 47 М.
Set Up Subscription Payments with Stripe, Next.JS & Firebase! 🔥
17:57
Өнер Қырандары - Мешіт 2024
34:59
ONER KYRANDARY
Рет қаралды 703 М.
#harleyquinn #joker #dc #shorts
00:11
Anastasyia Prichinina. Actress. Cosplayer.
Рет қаралды 12 МЛН
5 Pro-Level React Do's & Don'ts
30:06
Traversy Media
Рет қаралды 171 М.
Live Coding a Shopping Cart using React
31:32
Web Dev Cody
Рет қаралды 76 М.
Are You Too Dumb To Code? A Chat About Imposter Syndrome
7:08
Traversy Media
Рет қаралды 58 М.
How To Create An Advanced Shopping Cart With React and TypeScript
1:01:38
Web Dev Simplified
Рет қаралды 321 М.
Shopping Cart | React.js Project with explanation
19:15
Code For U
Рет қаралды 65 М.
Stop Worrying About AI!
6:40
Traversy Media
Рет қаралды 44 М.
How I Create Modern E-Commerce Stores with Next.js
5:28
Josh tried coding
Рет қаралды 43 М.
React JS Crash Course
1:48:48
Traversy Media
Рет қаралды 3,4 МЛН
What’s inside my iPhone port?! 🤮
0:14
scottsreality
Рет қаралды 6 МЛН
iPhone 16 ИЗМЕНИТ ВСЕ!
1:01
ТЕХНОБЛОГ АЛИША
Рет қаралды 2,1 МЛН