krzysu / reactjs-shopping-cart

example of shopping cart implemented in react.js and redux.js

react.js shopping cart

example of shopping cart implemented in react.js and redux.js

for demo click here

getting started

install dependencies and start local dev server

npm install
npm start

details

• build with create react app. Check their page for more details.
• this example is using redux.js for application state management, to learn more about it I recommend this tutorial.
• you can look under the hood directly from your browser using redux devtools. Install extension for your browser, open demo page (link above) and see how app state changes when you interact with it.
• if you wonder why reducers, actions and selectors are all in one file inside folder called ducks, read more here.

TODO

• add reducers and selectors unit tests

---

author: Kris Urbas @krzysu
licence: MIT

reactjs-shopping-cart's Issues

Re-establishing the design

I would like to propose some changes to the project CSS, using Material UI and Tailwind CSS to re-establish the project CSS and change the design of the components.
I believe that using these frameworks will help us to improve the overall look and feel of the project, and make it more user-friendly. I am also confident that I can make these changes in a way that is compatible with the existing codebase.

Cart vulnerability

We cannot increase or decrease the number of a same item which we want to add in our cart. It is limited to only addition or deletion of a single product.

Reload browser, cart is not save

When reload or re-open browser, cart is not save

Suggesstion

@krzysu Hi ! Can I take this for some UI fixes ?

Card height can be made consistent.

For a better UI experience the card height should be consistent.
For example the Sessel Sofie card.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency react-redux to v8.1.3
• Update dependency bootstrap to v5
• Update dependency gh-pages to v6
• Update dependency react-redux to v9
• Update dependency redux to v5
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

npm

package.json

• bootstrap ^3.4.1
• prop-types ^15.8.1
• react ^18.2.0
• react-dom ^18.2.0
• react-redux ^8.0.5
• redux ^4.2.1
• gh-pages ^5.0.0
• react-scripts ^5.0.1

nvm

.nvmrc

---

• Check this box to trigger a request for Renovate to run again on this repository

Migrate from create react app to vite

I want to migrate the website from cra to vite as it is more efficient and fast. It will enhance the speed of website and make it more light weight. Please assign this issue to me.

How to force the selected products from cart component info ?

Hello ,
Trying to do some modifications to this to include a search and pagination with https://github.com/AdeleD/react-paginate
but having some problems http://recordit.co/HXqQ20roh1

If I'm adding items to the cart and start a search the products lose the .added state which I guess it's expected ?
I thought maybe to keep the state in localStorage and set the added state based on that but not sure how it would be possible?

What would be the best way to remember the added state between searches and paginated results ?