Simple React Shopping Cart

#react #javascript #hooks

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!

GIT: https://github.com/AlexSegen/react-shopping-cart
DEMO: https://react-shooping-cart.netlify.app

You can follow me on Twitter to share more programming stuff.
https://twitter.com/pixelagil/

Thank you!

Top comments (9)

Dario Jimenez • Jul 13 '20

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 • Dec 30 '20

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

Ivan Rubio • Jan 1 '21

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

tienda-de-garage.herokuapp.com/

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

Usman Khalil • May 14 '20

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.

Binler • May 14 '20

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.

Alejandro Vivas • May 14 '20

I just added localstorage persistency. Thanks for comment!

Antonio Pangallo • Dec 10 '20

Hello Alejandro, I would sugget to have a look into: dev.to/antonio_pangall/creating-a-... .

Alejandro Vivas • May 14 '20

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.