How To Create An Advanced Shopping Cart With React and TypeScript

No video

How To Create An Advanced Shopping Cart With React and TypeScript

Рет қаралды 347,160

Күн бұрын

FREE React Hooks Course: courses.webdevsimplified.com/...
Learn React Today Course: courses.webdevsimplified.com/...
Shopping carts are one of the most common things you will build as a web developer, but there is a lot that goes into building a good shopping cart. In this video I will show you how to build a fully functional shopping cart using React, TypeScript, and Bootstrap. This is a great intermediate level project.
📚 Materials/References:
FREE React Hooks Course: courses.webdevsimplified.com/...
Learn React Today Course: courses.webdevsimplified.com/...
GitHub Code: github.com/WebDevSimplified/r...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:30 - Demo
01:08 - Project Setup
04:45 - Routing
08:02 - Navbar
15:35 - Store Page
30:00 - Shopping Cart Context
44:40 - Shopping Cart Component
56:45 - useLocalStorage Hook
#TypeScript #WDS #React

Пікірлер: 314

@anasalhariri5474 2 жыл бұрын

I want to thank you man, with your awesome courses and tutorials I finally got my first job. I deeply appreciate your great efforts. Huge love and respect. Stay awesome as always.

@ManojKumar-iu3zh 2 жыл бұрын

Front end developer?

@anasalhariri5474 2 жыл бұрын

@@ManojKumar-iu3zh Yes, Front-End Web Developer with ReactJS

@anweshandev 2 жыл бұрын

Congrats to you man !!

@anasalhariri5474 2 жыл бұрын

@@anweshandev thanks bro

@AnsBdran 2 жыл бұрын

Congrats, but how long does it take to get your first job?

@rvft 2 жыл бұрын

Literally one of the best channels on the platform. Always bringing stuff that we all are in need of! Thank you so much for all the effort, you can't even imagine how much you are helping us! God bless you.

@pedrolefteen 2 жыл бұрын

A huge result for an one hour duration tutorial. Thank you!

@ninanordbo 2 жыл бұрын

You make excellent content! Watched an older video on ditchin else statements last night and l am truly inspired by your way of deconstructing problem-solving. Your content is always on par so would just like to thank you for putting so much work into helping others become better developers. Brilliant!

@riyadhossain1706 Жыл бұрын

This tutorial is really helpful to those who started integrating TS with React. Thanks a lot.

@jenso413 2 жыл бұрын

your videos are so good, they show me how much more I have to learn to make truly professional sites like this. I’ve finally gotten to the point I can make full stack web apps, and I’m proud of myself for that, but my code always feels sloppy and unorganized. thanks for the inspiration!

@yoJuicy 2 жыл бұрын

Off topic, but I had been looking for a React Hooks course and didnt realize you just made one! going to complete it this week. Thank you for consistent, high quality content. you are helping thousands of developers across the globe!

@Rahulyadav-lv7dh 2 жыл бұрын

was waiting for typescript project from a long time fr. Thanks kyle ,really looking forward to building this

@tomiebayly6085 2 жыл бұрын

hey i appreciate that you show the product in the demo part which let us visualize how the project going to turn out big thanks man

@EzeJ99 2 жыл бұрын

Your content is SICK! Please do more React-TypeScript, i would love to see you coding a MERN + TypeScript project

@andgoedu Жыл бұрын

Dude your videos are freaking awesome , i usually learn from people like yourself sir , and turn these projects into a full stack project connect an api , backend and so on , on my own i just wanted to say your awesome and keep up the simplicity

@noorsh 2 жыл бұрын

Thank you for this. Great one. I've finally got a good grasp on how to use TypeScript in a real world situation. Thanks again

@johnherrera5913 Жыл бұрын

Master! One of the best tutorials I have ever watched. Thank you !!!

@VishalKumar-dv6qj 2 жыл бұрын

I know it's going to be very helpful. Thank you very much. This is all that I needed.

@Thassalocracy Жыл бұрын

Thank u SO much, the parts about handling typescript and the local storage have been extremely illuminating for me. I honestly am thinking about buying the full course😃

@brenosantin9739 Жыл бұрын

awesome, it’s hard to find react videos that uses typescript, loved the video. thanks kyle

@martinmohammed4087 2 жыл бұрын

It was a very nice tutorial. Especially because this video is so up to date (React V18, React Router Dom V6). Thanks for everything, I learned a lot.

@isaacopeyemirobert7868 2 жыл бұрын

the reason i love kyle web dev simplified is that you learn a lot in a short amount of time..

@charliesta.abc123 2 жыл бұрын

Thank you for everything you do for the community

@brilliantatosam Жыл бұрын

Exactly what I was looking for. Bless you Kyle

@asher4818 2 жыл бұрын

Dude, you are super super super good. You make me realize how far I have to go. Thank you for the great content.

@farzadmf 2 жыл бұрын

Happy to see TypeScript videos, hoping to see more

@chadcat420 7 ай бұрын

this tutorial is awesome! made me understand typescript better instead of struggling on my own

@salma_techie Жыл бұрын

Kyle I want to thank you for teaching me... actually when am searching anything I have to add your name to see if you posted anything on that topic.. thanks so so much brother.

@Karrnfr Жыл бұрын

Thanks a lot, Kyle for the tutorial. Really appreciate it

@adeleke5140 Жыл бұрын

Thank you Kyle for this amazing tutorial. Really helped me.

@Visinho4ever 10 ай бұрын

I love your style. Simple and precise. Keep it up sir!!!🥰

@bendevweb89 2 жыл бұрын

Great informative project well built, thank you Kyle

@rafaelsperati 2 жыл бұрын

Congratulations! A nice example on how to apply the useContext hook!

@Technoph1le 2 жыл бұрын

Thank you so much. Hope to see more videos like that

@camilahatakeyama7506 Жыл бұрын

Just a quick note: React-Bootstrap's documentation says that "You should import individual components like: react-bootstrap/Button rather than the entire library. Doing so pulls in only the specific components that you use, which can significantly reduce the amount of code you end up sending to the client." So in this video's case, the import ideally would be 'import NavbarBs from 'react-bootstrap/Navbar''

@kybkap8686 Жыл бұрын

i thought no difference because you imported 'bootstrap/dist/css/bootstrap.min.css' in the index.js anyway or not?

@camilahatakeyama7506 Жыл бұрын

@@kybkap8686 The import I mentioned is only related to the react-bootstrap JavaScript library and not the bootstrap css that you talked about.

@adeleke5140 Жыл бұрын

Good advice, you might need to import it as a named import though to be able to rename it properly.

@LuisReyes-zs4uk 2 жыл бұрын

wow, dude, just wow. you're an absolute beast and I want to be as good as you. thanks for the awesome tutorial.

@niklassoderberg2168 2 жыл бұрын

This video is one of your best ones!

@theisoj 2 жыл бұрын

Thanks Kyle for this tutorial!

@tamlselvan9072 2 жыл бұрын

I expected you would do in typescript in future but it happens now wow

@samintahmidislam 2 жыл бұрын

Your videos are amazing! I'm learning a lot from you. Keep going my man!

@luisbraga3394 9 ай бұрын

Excellent video! Thanks for sharing your knowledge!

@duvu9760 Жыл бұрын

really helpful man, thanks so much

@ilan117 Жыл бұрын

Kyle … Thank you for everything you do a gazillion times over. ❤️

@piotrekjazz1287 Жыл бұрын

Kyle, that one with TS trully helps, thank you so much, one day I will buy you a big coffee, promise

@jamalkheirbeik 2 жыл бұрын

Good stuff as always kyle

@omnimathic 11 ай бұрын

Very smooth brother. Amazing video

@johntimothygarcia 11 ай бұрын

I like the way you explain every detail sir, it helps me alot to understand every functions and details in this Typescript tutorial. Thank you sir.

@physcript2436 2 жыл бұрын

after watching this i finally subscribe for 2 years watching your video's sorry and thank you this is gold

@vladmob Жыл бұрын

Awesome video!❤ Thanks a lot!

@anrikopaliani5551 Жыл бұрын

nice video! I hope u will upload more react projects with typescript in the future.

@ziadx3 11 ай бұрын

this video is incredibly useful!

@FaisalAmin001 2 жыл бұрын

Thanks you, please also make a video on React testing , Jest etc

@mpowereer6992 2 жыл бұрын

great tutorial!! more typescript!!!!

@tejasnikam3287 Жыл бұрын

Awesome as always

@user-of9uy9bf6e 10 ай бұрын

You're a gem in this man

@cwirus99 2 жыл бұрын

No way! 🤩 I am just about to build a shopping cart for my project and was wondering if there was any comprehensive guide for it. And bam! A notification from WDS! Great video, thanks a lot!

@uthmanabdullahi4590 5 ай бұрын

This is really helpful

@wyneeoo Жыл бұрын

you're awesome as always : ) Thanks a lot.

@abdulazeezolanrewaju843 2 жыл бұрын

More of this is needed!! Thanks Kyle! Please try to use something like chakraUi next time sir!

@yugeshkk3062 Жыл бұрын

Thank you very much Kyle...

@YondeCode 6 ай бұрын

Thank you for this super course ! I am just wondering the last part with the custom hook where we use a generic type T

@user-ie7md3mm6x 2 жыл бұрын

thank you man!

@valeriousmonk654 2 жыл бұрын

More videos like this. Thank you

@edisvelicanin8854 2 жыл бұрын

Great work. Super nice. Everyone who watched this, should try to build an admin area, where you can add and remove items.

@appuser 2 жыл бұрын

I might just do that! Always good to have some unguided homework!

@wallyssonlima2705 2 жыл бұрын

You’re amazing!! 👏🏻

@patitorodri Жыл бұрын

awesome man, thanks

@vaswna14 Жыл бұрын

You are amazing !!! Thank you for your tutorial Videos...!!! 🥰

@ventsislavstoimenov4404 2 жыл бұрын

Thank you!

@saurabhshukla2605 2 жыл бұрын

That was awesome.

@taroserigano6546 2 жыл бұрын

i was waiting for your Typescript App!!!!

@sonamohialdin3376 Жыл бұрын

Amazing tutorial

@victorromeo949 2 жыл бұрын

Spent the whole day doing this, my confidence is going up at the speed of light. 26th June 2022

@raghavmittal5492 2 жыл бұрын

This is sick 🔥🔥

@jadeyu6761 2 жыл бұрын

Thank You!!

@smitagravat1063 Жыл бұрын

I just want to say thank you ❤

@Nanashi-rq7lk 11 ай бұрын

This video is so clear

@jousufjacob8251 Жыл бұрын

Good tutorial over all.

@petalx3682 2 жыл бұрын

thanks man, very nice project +

@Aditya-zl4qz Жыл бұрын

Thanks Man ❤

@LalaYamazaki Жыл бұрын

Great video. Followed step by step and completed the whole project! Thank you! If possible, upload more of these!

@bboydarknesz 2 жыл бұрын

this is sick bro! love it! maybe just need a little optimization of how to get the data, because it has so much looping in data. I don't know, maybe we do it because we works in local data json?

@NatkaRack Жыл бұрын

Thanks fpr the video!

@balachalla9049 2 жыл бұрын

I like it and implemented successfully

@UC_ganja 2 жыл бұрын

Although I don't need it but it sure is good to know about it in case I need it so thanks for the info

@elvinqurbanov6669 8 ай бұрын

Thank you for perfect video

@brawnie3969 Жыл бұрын

Thank you for this videos

@ucandoitkkk Жыл бұрын

thank you !!

@solnone Жыл бұрын

Thanks!

@kybkap8686 Жыл бұрын

thank you kayle very nice tutorial. I wish if you made an express server connected to mongo db and put items there and maybe login route as seller (who will post items to db ) and a login as customer. but i will try to do these )

@hwj8640 2 жыл бұрын

You are amazing!

@RavindraSingh-lp9pl 4 ай бұрын

Superb awesome tutorial

@chathukarunasena8378 Ай бұрын

Thanks 🎉

@marcuspowers9455 10 ай бұрын

Could you make a video on all the keyboard shortcuts you use?

@mekansahatvaliyev724 Жыл бұрын

your videos are amazing

@MSEIN2303 7 ай бұрын

The training was excellent but very fast❤❤😍

@ryanwoods3333 Жыл бұрын

more React and TypeScript content please!

@berkaycirak Жыл бұрын

Thanks for sharing man, I have a question to you. Should we use "Decorators" while working on a React project

@salma_techie Жыл бұрын

my best trick of learning is by putting the video at a speed of 0.75 then putting youtube on one side of my window and on the other side my code editor.. even thou the code exists on github, I practice bit by bit until the end of the video. Hope it helps some of you guys. Goodluck :)

@kmilo901001 Жыл бұрын

Rewriting code is a good method of getting better at coding.

@AbdulBasetWangde 9 ай бұрын

I do the same and I think almost everyone should that as that really helps in learning and grasping the concepts which you can never learn just by watching:)

@user-zv6bv7eu8k 9 ай бұрын

I thought this was implied to be honest, idk why else someone would wanna watch this lmao