Adding features to a React shopping cart app | LIVE CODING

  Рет қаралды 7,097

Web Dev Cody

Web Dev Cody

Күн бұрын

In this react live code video, I add 4 new features to the previous react shopping cart app I uploaded a couple of days ago. I recommend you clone your repo and try to implement these yourself before you watch this video, but the choice is yours!
Chapters
00:00 Introduction
00:45 Add a "Clear cart" button to remove all items from shopping cart
05:35 Add something so the user can view the total cost of all products in cart
11:50 Add the ability to set a quantity for the items desired
24:30 Add the ability to filter products via their category
30:27 Refactoring by increasing cohesion
------------
For those who don't know, I'm a full stack web developer who has been in the industry for over 5 years now. There is a lot of things I have learned along the way and I'd like to share that knowledge with anyone wanting to learn!
like this video if you found it useful and would like to see more videos of the same content.
subscribe to my channel if you are trying to improve your abilities as a web developer, software engineer, or even if you are just learning to code.
Don't forget to turn on those bell notifications!
Book mark these links!
Twitter / codylseibert
Discord / discord
GitHub github.com/codyseibert/youtube
I give credit to:
Toptal Subtle Patterns - for the thumbnail background patterns

Пікірлер: 23
@horacinis
@horacinis 2 жыл бұрын
Just what I was looking for, you deserver more viewers. Great content man. Thank you very much! :)
@AmitSingh-tf5yu
@AmitSingh-tf5yu Жыл бұрын
Hi, this is a fantastic tutorial!! learned a lot from it. plz add payment option and wishlist and compare products methods thank you
@kenansari
@kenansari 3 жыл бұрын
Thank you, Cody. I found the info bar is so useful.
@WebDevCody
@WebDevCody 3 жыл бұрын
Yeah i might start doing it for now on. You mean the video chapters right?
@kenansari
@kenansari 3 жыл бұрын
@@WebDevCody yes indeed i meant the video chapters
@codito7388
@codito7388 3 жыл бұрын
Nice. I believe the only thing that it wants in order to be complete is arrow up-down in each item for increasing -decresing the price. It is good. I hope we we see an ecommerce project with redux.
@ayoolaniyi4594
@ayoolaniyi4594 3 жыл бұрын
Hi, this is a fantastic tutorial!! learned a lot from it. I don't know if you can maybe show how to keep cart details after page refresh using localstorage or any other method,, it would reaaaly be helpful.
@SeibertSwirl
@SeibertSwirl 3 жыл бұрын
Good job babe!
@am6utoi97
@am6utoi97 3 жыл бұрын
Thank you for the tutorial! With the quantity increment logic added to the `addToCart` function, how would we go about decrementing the quantity value of the item in the cart?
@mahendranath2504
@mahendranath2504 3 жыл бұрын
Nice thank 👍🏼🙏
@tylerrussell6160
@tylerrussell6160 3 жыл бұрын
Hey Sir, can you add options (size/color) to products? Thank you !!
@aravindkumar8145
@aravindkumar8145 3 жыл бұрын
superb video
@WebDevCody
@WebDevCody 3 жыл бұрын
Thank you so much 😀
@preethi9759
@preethi9759 3 жыл бұрын
Hi sir.. This video is awesome.. I am your new subscriber.. Can you please tell me how to use like routing for navigating to other pages on this code example
@soltiscd
@soltiscd 3 жыл бұрын
Nice work with the numbers bug... good note for future; Total cost toFixed(2)? To get two decimals only if I recall correctly.
@WebDevCody
@WebDevCody 3 жыл бұрын
Great point!
@alexanderson1193
@alexanderson1193 2 жыл бұрын
how do you add an 'All' category so products can be viewed?
@eurusplays1507
@eurusplays1507 3 жыл бұрын
I am creating a e-commerce website for uni and I was wondering if you can use Links to go to the cart page and if it is possible to make a video showing it
@WebDevCody
@WebDevCody 3 жыл бұрын
Like react router?
@eurusplays1507
@eurusplays1507 3 жыл бұрын
@@WebDevCody Yes
Coding an Accordion component using React
16:59
Web Dev Cody
Рет қаралды 3,5 М.
The most important React concepts to learn first (as a beginner)
21:19
Useful Gadget for Smart Parents 🌟
00:29
Meow-some! Reacts
Рет қаралды 9 МЛН
НЕОБЫЧНЫЙ ЛЕДЕНЕЦ
00:49
Sveta Sollar
Рет қаралды 6 МЛН
Beginner React.js Coding Interview (ft. Clément Mihailescu)
36:31
Ben Awad
Рет қаралды 2,1 МЛН
Live Coding a Shopping Cart using React
31:32
Web Dev Cody
Рет қаралды 76 М.
NEW GPT-4o: My Mind is Blown.
6:28
Joshua Chang
Рет қаралды 80 М.
OpenAI SHOCKED Everyone! Voice, Vision, & Free?!
8:58
Theoretically Media
Рет қаралды 26 М.
How to Organize Your Solo Dev Project Like a Pro
7:42
CreaDev Labs
Рет қаралды 10 М.
Useful Gadget for Smart Parents 🌟
00:29
Meow-some! Reacts
Рет қаралды 9 МЛН