Build a Shopping Cart with React and TypeScript – Tutorial

Wordpress sites

Learn the fundamentals and how to build a ReactJS shopping cart with Typescript, Material UI, Styled Components and React-Query.

This tutorial uses a free open API for dummy data to the items in the shop. React-Query hooks is used for fetching the data from the API.

Styled Components is used in combination with Material UI to customize the styles.

πŸ’» Code:

✏️ Course created by Thomas Weibenfalk. Check out his channel:

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

22 thoughts on “Build a Shopping Cart with React and TypeScript – Tutorial”

  1. Hey Thomas. You are always great with these videos. Thanks for creating amazing content and keep up the awesome work. To everyone else, wishing you all the best in 2021.

  2. Manoj Satyanarayana

    4.8/5 stars for this video. Awesome. Can you please extend this using Context API and useReducer Hooks please ?

  3. Nelson Marmolejos

    Excellent video. Thank you for sharing this practical example with the community. Well done!

  4. Rishad Omar (AUX)

    A very handy tip that I only discovered a few months ago and I’ve been a Linux bash user for > 15 years. Instead of using the command “clear” in bash try CTRL-l (that’s a lowercase L for lemon)

  5. wonderful tutorial! it would be also beneficial for the update of this to add handling variants (e.g size variant selection – S,M,L,XL) & discount rules for the cart ( e.g buy 1 get 1 free, 2 for 3)

  6. sangeet shrivatri

    It was amazing and very best for react with typescript. Can you upload more videos on both technologies. Thanks

  7. Thank you for this video! very helpful. Would help if you wrote the styling as you showed what it does on the page too. Otherwise it just feels like a line of code whose purpose is unknown

  8. Manoj Karmocha

    Good one, would be nice to see if you could use other Array method in handleAddToCart and handleRemoveFromCart. Also, a follow up session with use of contextAPI, useReducers and persisting data. As currently the badge loses the data as we refresh the browser

  9. Alexander Khudyakov

    the awesome tutorial! I started to understand how to use interfaces and types. All thanks to you!

  10. Great tutorial. Only one suggestion, the item.amount which you used might be often refers to the price in some cases. To avoid the confusion you could use the term quantity. For a moment, i thought why amount & price is used together in the cart. It is supposed to be quantity.

  11. Thanks for this tutorial, I loved it! Although you could provide more details about how you do some stuff regarding types, like why you use type instead of interface or the ‘as’ keyword. But all in all it was good, I liked how you explained the reduce method (:

Comments are closed.