React Typescript Project Tutorial | Shopping Cart - Part 1

In this React Typescript Project tutorial, we will build a Product Display and Shopping Cart from scratch. In this first lesson, we start the project and focus on the data contexts and providers needed for both the shopping cart and the products display.

🚀 Become a full-stack web dev with Zero To Mastery Courses:

👇 Follow Me On Social Media:

React Typescript Project Tutorial | Shopping Cart - Part 1

(00:00) Intro
(00:09) Welcome
(00:34) Project Overview
(02:01) Creating the Project with Vite
(04:36) Adding Product Data
(05:12) Components & Context Overview
(06:00) Product Images
(06:39) Products Context
(14:47) Promise, Fetch, useEffect & json-server
(20:47) Cart Context Reducer
(33:36) useCartContext hook
(41:16) Create the Cart Context
(44:10) Cart Provider

📚 Suggested Pre-requisites for this Typescript course:

📚 React Hooks tutorials:

📚 Tutorial References:

⚙ Web Dev Tools:

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

#react #typescript #project

[doors]

My goodness, this series is an absolute delight Dave!!🔥
Happy New Year everybody 🎄 🎉

[ishanshishodiya]

Right when I was thinking of learning TypeScript with React after I finished up with your NodeJS course you post this. Thanks a lot!!!

[codingispower]

Dave, thank you for contunuing to provide such awesome resources for learning Web-Dev. You are changing lives for the better. I wish you many blessings for all the blessings you have given the world. <3

[demetrycode]

the more I watch your ts tuts the more confident I am of how js is simpler. Nevertheless I always watch your videos about nextjs, I've learnt a lot from them, thank you sensei

[regilearn]

Really appreciate it Dave, Eagerly waiting for this Dave and waiting for Advanced project from typescript with MERN and redux

[Accrt.]

I was just considering to start learning typescript, thank you for this. Haven't seen it yet but with how you taught react and redux, I am sure this will also be great.

[dosamuel-mb]

Thank you so much happy new year to you and your family. I hope we will get a Docker and kubernetes serie next year

[mahamadounouridinemamoudou]

Very excited to learn new coding manners with you ☺️

[javascriptexpanse]

Dave i wish you could stick with React only for important concepts like this, typescript has alot of configurations and none of us want to learn another javascript library. otherwise i love your content, you are my best teacher 2022

[federicoraulmaciasaparicio]

Thanks a lot for all of your video lessons. I am always looking forward to Tuesdays and Fridays.
Could you please also talk about Typescript on the backed with nodejs and express???

[somedevstuff]

This is a very very good video to follow

[davidandriason]

Thank you ! It's a very good ressources!

[PM-rste]

Great Video, well structured and detailed. I just would like to clarify if its best practice to put all you logic in the reducer?

[YL-plek]

waoow... what a nice good video!!!!
compliments to the chef.

[biLLie_wiLLie]

Happy New Year Dave! Wish you more views, subscribers and stay healthy. I want to see Nest js on your chanel

[Ernest-Technology]

Great tutorials, I just joined the discord 😀

[nicolasviruel]

Hi Dave !! how are you? I'm recently looking at your content and I find it AMAZING! And I wanted to congratulate you on that.
I just wanted to ask you a favor and that was if you could add the "Spanish" translation to your videos. It would be of great help to all Spanish-speakers and we would really appreciate it.🎉❤

[LuisBlancoAustin]

This video is awesome. One question, though: Shouldn't TypeScript types be defined like so (semicolon at the end of each property instead of a comma)?

type Person = {
name: string;
age: number;
};

Thanks!

[SUNYBOI]

Now it's time to add new milestones. 😎

[pokotyec]

Please link me to the authentication video. My React app redirects to login when refreshed.