Uploaded October 2022 | Updated September 2026, 2 weeks ago
In this project, we will create a shopping cart using React and Stripe.
📽️ Cooper Codes YouTube Channel:
youtube.com/c/CooperCodes
💻 Code:
github.com/coopercodes/ReactEcommerceStoreWithStripeAPI
💖 Show Support
Patreon: patreon.com/traversymedia
PayPal: paypal.me/traversymedia
👇 Follow Traversy Media On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: linkedin.com/in/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
In this project, we will create a shopping cart using React and Stripe.
📽️ Cooper Codes YouTube Channel:
youtube.com/c/CooperCodes
💻 Code:
github.com/coopercodes/ReactEcommerceStoreWithStripeAPI
💖 Show Support
Patreon: patreon.com/traversymedia
PayPal: paypal.me/traversymedia
👇 Follow Traversy Media On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: linkedin.com/in/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




Hiring without Whiteboards - https://github.com/poteto/hiring-without-whiteboards
Interview Patterns - [https://twitter.com/LDLockhartJr/status/1561251161134473217?s=20&t=Sb2aRdbdmveSWt1-JVsBUw](https://twitter.com/LDLockhartJr/status/1561251161134473217?s=20&t=Sb2aRdbdmveSWt1-JVsBUw)
JavaScript Algorithms and Data Structures Masterclass - [https://www.udemy.com/course/js-algorithms-and-data-structures-masterclass/](https://www.udemy.com/course/js-algorithms-and-data-structures-masterclass/)
👇 Follow Traversy Media On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy Do You Need To Learn Data Structures & Algorithms As A Developer?](https://i.ytimg.com/vi/b_4ZchFAYRs/mqdefault.jpg)






