YoVDO

Build a Shopping Cart With React JS and Stripe

Offered By: Traversy Media via YouTube

Tags

React Courses Web Development Courses React Router Courses Stripe Courses

Course Description

Overview

Learn to build a fully functional shopping cart application using React JS and Stripe in this comprehensive tutorial video. Explore the step-by-step process of creating a dynamic e-commerce store, from setting up the React environment to implementing Stripe for secure payments. Master essential concepts such as component creation, React Router implementation, state management with context, and integrating third-party APIs. Follow along as the instructor guides you through building the user interface, managing product data, handling cart functionality, and setting up an Express server for Stripe integration. By the end of this hands-on tutorial, you'll have the skills to create a professional-grade shopping cart system with React and Stripe.

Syllabus

Project showcase
Create react app / installs
Navbar component
Implementing React Router
Creating pages for router
Building rows and cols for Store page
Creating products for React to use
Loading products dynamically
Creating product card component
Creating a modal for the cart
Creating our cart context Cart functionality
Adding CartProvider to our app
Creating add / remove product to product cards
Adding cart functionality to navbar number of items
Showing cart data in modal
Creating CartProduct component
Create Stripe account and add test products
Creating Express server / installs
Creating Stripe checkout request
Adding Stripe IDs to React
Creating checkout call from React
Final project / checkout demo!
Thank you for watching


Taught by

Traversy Media

Related Courses

Software as a Service
University of California, Berkeley via Coursera
Intro to Computer Science
University of Virginia via Udacity
Web Development
Udacity
Software Engineering for SaaS
University of California, Berkeley via Coursera
CS50's Introduction to Computer Science
Harvard University via edX