DEV Community

Cover image for Simple React Shopping Cart
Alejandro Vivas
Alejandro Vivas

Posted on

Simple React Shopping Cart

Hi all!

For those who are still learning stuff about React (just like me :P), I wanted to share a Shopping Cart example using React Hooks and Context API.

Please, know that this is just an example with basic Shopping Cart functions and not a fully "Store" boilerplate.

Any feedback is appreciated and I hope some of you find this usefull for learning!


You can follow me on Twitter to share more programming stuff.

Thank you!

Top comments (9)

dajimene profile image
Dario Jimenez

Hello Alejandro I found your shopping cart code which is functional, for this I need to change some changes your guide please

I need the products by facilityid, replace dummyProducts by service, handle errors and implement for React Native ..

angelhpascual profile image

I’m trying to migrate this project to nextjs and when I added cartcontext the error is “local storage is not defined” can you help me with this? Is urgent coz I have a test for a job. Thank you

doberman7 profile image
Ivan Rubio

Hi, i'm practicing React developing a Store, for adding the feature of the Shopping Cart I use your implementation as faithful as I could .

But in my implementation, even though my version is almost the same, the "add to cart" button doesn't differentiate between each product.

This is:
1st click affect all the buttons not only the clicked one and the other buttons change to "add more"
each posterior click only adds more products of the 1st one you clicked, ignoring if you clicked another one.

here's the deploy

how you detect that the user clicks on another product??

monfernape profile image
Usman Khalil

I really like the look of the app. It's simple and minimalistic. However, it takes very long to long probably due to images. Cart look beautiful too.

binlerdev profile image

i think you must save all item in the cart into localstore or something else. Because when i refresh page all item in the cart will be lost.

pixelagil profile image
Alejandro Vivas

I just added localstorage persistency. Thanks for comment!

antonio_pangall profile image
Antonio Pangallo

Hello Alejandro, I would sugget to have a look into: .

pixelagil profile image
Alejandro Vivas

Hi guys, thank you for comment!

Just to clarify, this is just a very basic example (or boilerplate?) to show you how to use Context API and React Hooks. It's not a fully functional Store.

moyuriakther profile image
Moyuri Akther • Edited

can i have your youtube chanel
i want to follow your react cart videos