React Typescript Project Tutorial | Shopping Cart – Part 2

Web Dev Roadmap for Beginners (Free!):

In this React Typescript Project tutorial, we will continue building a Product Display and Shopping Cart from scratch. For the final lesson, we complete the project by creating components for both the shopping cart and the products display.

πŸš€ Become a full-stack web dev with Zero To Mastery Courses:
– The Complete Web Developer:
– Master the Coding Interview:
– Junior to Senior Dev Roadmap:

🚩 Subscribe ➜

πŸ“¬ Course Updates ➜

❓ Questions – Please post them to my Discord ➜

β˜• Buy Me A Coffee ➜

πŸ‘‡ Follow Me On Social Media:

πŸ”— All Resources for this Typescript Course:

πŸ”— Playlist for this Typescript Course:

React Typescript Project Tutorial | Shopping Cart – Part 2

(00:00:00) Intro
(00:00:10) Welcome
(00:00:36) Project Overview
(00:01:30) Initial Components
(00:03:08) App component
(00:06:18) Header & Nav components
(00:12:48) useCart Custom Hook
(00:15:43) Footer component
(00:18:54) Progress Preview
(00:19:45) Products Data
(00:20:54) useProducts Custom Hook
(00:22:17) ProductList component
(00:28:27) Product component Pt. 1
(00:30:59) Dynamic Images with Vite & React
(00:34:28) Product component Pt. 2
(00:39:34) Products Provider & Cart Provider
(00:41:04) Progress Preview
(00:41:43) Cart component
(00:49:02) CartLineItem component
(01:03:58) Completed Project
(01:05:37) Optimizing Cart Line Items
(01:10:29) Optimizing Products

πŸ“š Suggested Pre-requisites for this Typescript course:
πŸ”—JavaScript for Beginners full course:

πŸ“š React Hooks tutorials:
πŸ”— useState:
πŸ”— useEffect:
πŸ”— useCallback:
πŸ”— useMemo:
πŸ”— useRef:
πŸ”— useReducer:
πŸ”— useContext:

πŸ“š Tutorial References:
πŸ”— TypeScript + React Cheatsheet:
πŸ”— React Official Website:
πŸ”— Typescript Official Website:
πŸ”— Anders Hejlsberg, Creator of Typescript and C# Interview:
πŸ”— Stackoverflow Survey Results:
πŸ”— MDN – Static Typing:
πŸ”— MDN – Dynamic Typing:
πŸ”— MDN – Type Coercion:
πŸ”— TS Type Assertions:

βš™ Web Dev Tools:
πŸ”— Vite:
πŸ”— Chrome Browser:
πŸ”— Visual Studio Code (VS Code):
πŸ”— Node.js & npm:
πŸ”— Live Server VS Code Extension:

Was this React Typescript Project tutorial helpful? If so, please share. Let me know your thoughts in the comments.

#react #typescript #project