Skip to main content
CF

Build a Shopping Cart App

1h 41m 52s
English
Paid

Gain expert skills to build and deploy an amazing React app. This epic training course provides you with the entire process to create and launch your own top-tier e-commerce web app, utilizing React, Node, and Stripe.

Why Build with React?

Unlock the potential of React with efficiency and simplicity. You don't need weeks or months to create something impressive. In just one afternoon, learn the techniques required to build remarkable projects.

Not only will you complete a fantastic project, but you'll also develop a comprehensive set of powerful skills that empower you to create incredible applications on your own.

Project Overview: Shopping Cart App

We will build a shopping cart app that performs and appears as any top-tier app should.

Features of the Shopping Cart App

  • A comprehensive product gallery for user selection
  • An attractive, responsive, mobile-first design suitable for all devices
  • Dedicated product pages with multiple user actions
  • User capability to add or remove multiple products from the cart
  • A live status display of the quantity and items in the cart
  • A cart screen for managing selected products
  • Instant checkout access via buttons
  • A secure credit-card checkout process through the popular Stripe Checkout
  • A "thank you" screen summarizing customer purchases

Course Audience

This course is designed for ambitious developers who seek to:

  • Expand their React skills and rapidly enhance their developer value.
  • Discover where to obtain the expertise to build outstanding React apps.
  • Learn React thoroughly to launch their businesses, online stores, and app ideas.
  • Apply their knowledge of HTML, CSS, and JS to a truly exciting challenge.
  • Advance from previous React app experiences to independently build apps like this one.

About the Author: Reed Barger

Reed Barger thumbnail

Reed Barger is a US developer and educator focused on the React / Next.js stack, publishing both on his independent platform and through partnerships with other course platforms. His material favours project-based long-form courses where students build complete applications.

His CourseFlix listing carries two Reed Barger courses: Next40 — Master Next.js 14 in 40 days of epic projects and Build a Shopping Cart App (React + Node.js). Material is paid and aimed at developers learning by shipping real applications.

Watch Online 20 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 20 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: 1. Create Project
All Course Lessons (20)
#Lesson TitleDurationAccess
1
1. Create Project Demo
01:44
2
2. Add Routes to React Client
02:48
3
3. Make :products endpoint for API
03:32
4
4. Make HTTP Requests to Node API with React
05:42
5
5. Intro to React Query
07:11
6
6. Format prices from Stripe values
03:24
7
7. Make :product endpoint for API
04:50
8
8. Handle 404 Errors with Product
06:10
9
9. Display Product Details
02:29
10
10. Integrate Stripe with Node and React
05:07
11
11. Add products to cart
07:24
12
12. Remove products from cart
03:44
13
13. Show cart summary to users
04:37
14
14. Add modal to show cart details
04:58
15
15. Display all cart items in modal
03:41
16
16. Set item quantity with cart modal
03:05
17
17. Create custom useCheckout hook
06:29
18
18. Purchase cart with Stripe Checkout
08:42
19
19. Show payment summary to user
10:43
20
20. Deploy app to Heroku
05:32
Unlock unlimited learning

Get instant access to all 19 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Course content

20 lessons · 1h 41m 52s
Show all 20 lessons
  1. 1 1. Create Project 01:44
  2. 2 2. Add Routes to React Client 02:48
  3. 3 3. Make :products endpoint for API 03:32
  4. 4 4. Make HTTP Requests to Node API with React 05:42
  5. 5 5. Intro to React Query 07:11
  6. 6 6. Format prices from Stripe values 03:24
  7. 7 7. Make :product endpoint for API 04:50
  8. 8 8. Handle 404 Errors with Product 06:10
  9. 9 9. Display Product Details 02:29
  10. 10 10. Integrate Stripe with Node and React 05:07
  11. 11 11. Add products to cart 07:24
  12. 12 12. Remove products from cart 03:44
  13. 13 13. Show cart summary to users 04:37
  14. 14 14. Add modal to show cart details 04:58
  15. 15 15. Display all cart items in modal 03:41
  16. 16 16. Set item quantity with cart modal 03:05
  17. 17 17. Create custom useCheckout hook 06:29
  18. 18 18. Purchase cart with Stripe Checkout 08:42
  19. 19 19. Show payment summary to user 10:43
  20. 20 20. Deploy app to Heroku 05:32

Related courses

  • React Hooks thumbnailUpdated 2y ago

    React Hooks

    By: UI.dev (Tyler McGinnis)
    If you never develop a convincing answer for both of those questions, you won t have a solid enough foundation to build upon when you dive into the specifics.
    3 hours 47 minutes 48 seconds
  • Stripe Payments JavaScript Course thumbnailUpdated 2y ago

    Stripe Payments JavaScript Course

    By: Fireship
    Learn how to build safe Stripe payments with JavaScript. You use Node and React to create a web app that handles charges, customers, and subscriptions.
    1 hour 29 minutes 26 seconds
  • React Data Fetching: Beyond the Basics thumbnailUpdated 1y ago

    React Data Fetching: Beyond the Basics

    By: Fullstack.io
    This course will teach you how to efficiently load data in React without using third-party libraries or the useEffect hook. We will create our own library for..
    2 hours 40 minutes 15 seconds

Frequently asked questions

What is Build a Shopping Cart App about?
Gain expert skills to build and deploy an amazing React app. This epic training course provides you with the entire process to create and launch your own top-tier e-commerce web app, utilizing React, Node, and Stripe. Why Build with React?…
Who teaches Build a Shopping Cart App?
Build a Shopping Cart App is taught by Reed Barger. You can find more courses by this instructor on the corresponding source page.
How long is Build a Shopping Cart App?
Build a Shopping Cart App contains 20 lessons with a total runtime of 1 hour 41 minutes. All lessons are available to watch online at your own pace.
Is Build a Shopping Cart App free to watch?
Build a Shopping Cart App is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Build a Shopping Cart App online?
Build a Shopping Cart App is available to watch online on CourseFlix at https://courseflix.net/course/build-a-shopping-cart-app. The page hosts every lesson with the integrated video player; no download is required.