Build a Shopping Cart With React JS & Stripe

In this project, we will create a shopping cart using React and Stripe.

📽️ Cooper Codes YouTube Channel:

💻 Code:

💖 Show Support

👇 Follow Traversy Media On Social Media:

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

[sanjaybatak]

Just when you wanted something like this, Brad drops this video. 🎉
Thank you Brad and the team. You guys are doing phenomenal work.

[paulthomas]

A fantastic tutorial. Easy to follow....no errors....a great introduction to Stripe too. Thanks

[thangtruong]

Thank you for your time to support us. Loved.

[laxmiprasanna]

This is exactly what we need. These small videos help us during actual work.

[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

[renangaldino]

This is absolutaly one of the best React tutorial avaiable in YT, Thanks a lot !!!

[gnarpow]

@30:31 hands down the best description and analogue. If you just watch this part alone you will understand how powerful react context api is. You truly don’t need state managers. BUT. You do. Excellent work amigo! ❤️

[mikeynavarro]

This is probably my favorite youtube tutorial, Cooper revisited harder concepts for clarification multiple times. he's cool for that, definitely earned a Sub

[RobButzofNorthAmerica]

Stuff like this is why I support your Patreon! Thanks so much

[aliplaysgtr]

Exactly what I needed for a graduation work. Thanks a lot! Super clear and comprehensive

[tonykharioki]

I hadn't used stripe in two years, and thanks for this. I needed this refresher

[josephngugi]

Been looking forward to learn stripe and here it is. thanks to traversy media

[maskman]

This is the best React + Stripe tutorial, thank you so much 🙏

[charugupta]

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.

[blue_berry_pie]

Very nice video explaination for each step! Thank Brad and Cooper Codes so much!

[MatthewPostrel]

This video helped me finish my first full stack project. Thank you.

[brandonespinosa]

Bravissimo, context hook is amazing. Thank you so much for showing this. Great video!

[delgorithm]

You're genuinely the boss. No cap. Thanks a lot 🤝

[mukangwakalonda]

I thanks all traversy group, it is my first time I manage the payment project God bless you all

[HeatherKonz]

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!