jeffersonribeiro / react-shopping-cart

🛍️ Simple ecommerce cart application built with Typescript and React

🛍️ Simple ecommerce cart application

Basic Overview - Live Demo

✈️ Follow Jeremy Akeze

This simple shopping cart prototype shows how React with Typescript, React hooks, react Context and Styled Components can be used to build a friendly user experience with instant visual updates and scaleable code in ecommerce applications.

Features

• Add and remove products from the floating cart using Context Api
• Filter products by available sizes using Context Api
• Responsive design

Build/Run

Requirements

• Node.js
• NPM

/* First, Install the needed packages */
npm install

/* Then start the React app */
npm start

/* To run the tests */
npm run test

Copyright and license

The MIT License (MIT). Please see License File for more information.

_{A little project by Jefferson Ribeiro}

react-shopping-cart's Issues

npm install fails

When i try to npm install on branch master , install fails

Environment
npm : v6.14.4
node : v14.4.9
branch : master
os : mac 11.3.1

blank page on IE 11

I can't see anything on IE 11

Error

After npm install & npm start, I am getting this error.
Error: ENOENT: no such file or directory, scandir 'D:\jeffersonRibeiro\react-shopping-cart\node_modules\node-sass\vendor'

Failed to compile

./src/index.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./src/index.scss)
Error: ENOENT: no such file or directory, scandir 'D:\jeffersonRibeiro\react-shopping-cart\node_modules\node-sass\vendor'

Cart not secure

Hello,

If payment is handled on the frontend, anyone can manipulate the total price in local storage and can make the payment flow successful.

Hello

Tutorial please sir !

User login/signup is missing

componentWillReceiveProps Alternative

I'm trying to find an alternative way to update the cart without using componentWillReceiveProps since this component lifecycle will be depreciated. I've attempted to use componentDidUpdate, but it updates the cart multiple times. I looked in getDerivedStateFromProps, but it seems to be a little too complicated for my understanding.
I found an alternative solution to update the cart from the Product Component itself when a user clicks on the product, but then I run into the issue of opening the Float Cart when the user adds a new product to the cart.

Any advice/direction would be helpful.

Thanks

Is there a way to run build with custom source path?

Hi Jeff,

Good day, I was trying to test your shopping cart, running build and deploying on a test server, but can't seem to work it, since I'm running it on a sub folder, found out that the minified index.html were sourcing assets to the root folder. Is there any chance I can run this build with a custom source path for all css, images and JS assets?

Thanks in advance.

Regards,
Juven

Is there a tutorial?

I am wondering if there is a tutorial somewhere for this. This is so cool. Thanks

Ideas

Hi,
Just a few ideas:

1. I was thinking it is best to make the X (of removing an item from the cart) White hover to Yellow, because now it's black - hover to white, and it took me a little time to see it.

2. The sizing of the shirts filter is working ok, but I'm missing a line under each item, something like: "available on: M, L, XL, XXL", because for example if I choose both L and XL in the filter (so I see that the same shirt available in both sizes, but I can't choose which size I want unless I filter only one size.

3. Shipping section in the cart? even if it's free, it would be nice to see Shippment: 0$ for example.

Get confused inside componentWillReceiveProps

componentWillReceiveProps(nextProps) {
const { filters: nextFilters, sort: nextSort } = nextProps;
const { filters } = this.props;
if (nextFilters.length !== filters.length) {
this.handleFetchProducts(nextFilters, undefined);
}

if (nextSort !== this.props.sort) {
  this.handleFetchProducts(undefined, nextSort);
}

}

Hi, inside componentWillReceiveProps, I am confused how does the coming props nextFilter and nextSort get stored in filters and sort each time, and what does this command line mean here: const { filters : nextFilters, sort: nextSort } = nextProps;

Thank you!

issue - Server fetch too many times

I find whenever the filter/sorting changed, Axios is used to fetch the same remote JSON files, it is not a good practice, as it makes unnecessary server load.
Shall we refactor it so it is only called once?

react-scripts: command not found

PS D:\react-shopping-cart> npm install
npm WARN tar ENOENT: no such file or directory, open 'D:\react-shopping-cart\node_modules.staging\string_decoder-f6d3fcd9\lib\string_decoder.js'
npm ERR! code E404
npm ERR! 404 Not Found: [email protected]

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Wonder\AppData\Roaming\npm-cache_logs\2018-12-04T06_34_24_126Z-debug.log
PS D:\react-shopping-cart> npm run server

[email protected] server D:\react-shopping-cart
nodemon server.js

'nodemon' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] server: nodemon server.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] server script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Wonder\AppData\Roaming\npm-cache_logs\2018-12-04T06_34_45_808Z-debug.log
PS D:\react-shopping-cart> npm start

[email protected] start D:\react-shopping-cart
react-scripts start

'react-scripts' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: react-scripts start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Wonder\AppData\Roaming\npm-cache_logs\2018-12-04T06_36_30_836Z-debug.log

is there a way to remove quantity button

I want to use the react shopping cart, but I am selling a service not a quantity, so the quantity is always just one. the service choices are actually one month, 3 month, or one year, Is there a way to remove quantity or just set it to one.

getting warnings in browser console

Hi,
thank you for this sample.

my package.json i:

{ "name": "clientapp", "version": "0.1.0", "private": true, "dependencies": { "axios": "^0.19.0", "babel-polyfill": "^6.26.0", "bootstrap": "^4.3.1", "concurrently": "^4.1.2", "connected-react-router": "^6.5.2", "cors": "^2.8.5", "express": "^4.17.1", "history": "^4.9.0", "react": "^16.9.0", "react-dom": "^16.9.0", "react-redux": "^7.1.0", "react-router": "^5.0.1", "react-router-dom": "^5.0.1", "react-scripts": "3.1.1", "reactstrap": "^8.0.1", "redux": "^4.0.4", "redux-thunk": "^2.3.0" }, "scripts": { "start": "concurrently \"npm run server\" \"react-scripts start\"", "server": "nodemon server/app", "wdio": "wdio", "build": "react-scripts build", "test": "react-scripts test", "test:coverage": "npm run test -- --coverage", "format": "prettier --write \"**/*.+(js|json|css)\"", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "jest": { "collectCoverageFrom": [ "src/**/*.{js,jsx}", "!/node_modules/", "!src/index.js", "!src/Root.js" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "moxios": "^0.4.0", "chai": "^4.2.0", "enzyme": "^3.7.0", "enzyme-adapter-react-16": "^1.7.0", "enzyme-to-json": "^3.3.4", "fetch-mock": "^7.2.5", "firebase-tools": "^6.2.2", "node-sass": "^4.10.0", "nodemon": "^1.18.6", "prop-types": "^15.6.2", "react-test-renderer": "^16.6.3", "redux-mock-store": "^1.5.3", "sinon": "^7.1.1", "wdio-mocha-framework": "^0.6.4", "wdio-selenium-standalone-service": "0.0.12", "wdio-spec-reporter": "^0.1.5", "webdriverio": "^4.14.1" }, "keywords": [], "description": "Shopping cart" }

i am getting these warnings in my browser console.

react-dom.development.js:12029 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

• Move data fetching code or side effects to componentDidUpdate.
• If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
• Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: FloatCart, Shelf
printWarning @ react-dom.development.js:12029
webpackHotDevClient.js:120 ./node_modules/process/browser.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:

• z:\react-shopping-cart\ShoppingCart\ShoppingCart\clientapp\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!z:\react-shopping-cart\ShoppingCart\ShoppingCart\ClientApp\node_modules\process\browser.js
  Used by 1 module(s), i. e.
  z:\react-shopping-cart\ShoppingCart\ShoppingCart\clientapp\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!z:\react-shopping-cart\ShoppingCart\ShoppingCart\ClientApp\node_modules\axios\lib\defaults.js
• z:\react-shopping-cart\ShoppingCart\ShoppingCart\clientapp\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!z:\react-shopping-cart\ShoppingCart\ShoppingCart\clientapp\node_modules\process\browser.js
  Used by 3 module(s), i. e.
  z:\react-shopping-cart\ShoppingCart\ShoppingCart\clientapp\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!z:\react-shopping-cart\ShoppingCart\ShoppingCart\clientapp\node_modules\chalk\index.js
  printWarnings @ webpackHotDevClient.js:120
  webpackHotDevClient.js:120 ./node_modules/webpack/buildin/global.js
  There are multiple modules with names that only differ in casing.
  This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
  Use equal casing. Compare these module identifiers:
• z:\react-shopping-cart\ShoppingCart\ShoppingCart\clientapp\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!z:\react-shopping-cart\ShoppingCart\ShoppingCart\ClientApp\node_modules\webpack\buildin\global.js
  Used by 2 module(s), i. e.
  z:\react-shopping-cart\ShoppingCart\ShoppingCart\clientapp\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!z:\react-shopping-cart\ShoppingCart\ShoppingCart\ClientApp\node_modules\babel-polyfill\lib\index.js
• z:\react-shopping-cart\ShoppingCart\ShoppingCart\clientapp\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!z:\react-shopping-cart\ShoppingCart\ShoppingCart\clientapp\node_modules\webpack\buildin\global.js
  Used by 22 module(s), i. e.
  z:\react-shopping-cart\ShoppingCart\ShoppingCart\clientapp\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!z:\react-shopping-cart\ShoppingCart\ShoppingCart\clientapp\node_modules\sockjs-client\lib\entry.js

blank page on IE 11

I can't see anything on IE 11

redundant mapStateToProps in Filter component

I think this part is redundant as you did not use filters props in the component

const mapStateToProps = state => ({
  filters: state.filters.items
});

export default connect(
  mapStateToProps,
  { updateFilters }
)(Filter);

I think the first argument of connect should be null, or you may have an explanation for this!!

What's the port for the client?

Hi,
I am running the app using npm start. I try to access http://localhost:3000 and it fails.

What's the actual URL:PORT for the client app?

react-scripts: command not found

[email protected] start /Users/krish/Desktop/react-shopping-cart-master

react-scripts start

sh: react-scripts: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] start: react-scripts start
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/krish/.npm/_logs/2018-12-04T06_03_15_555Z-debug.log
krishs-MacBook-Pro:react-shopping-cart-master krish$

npm -v
6.4.1
node -v
v10.14.1

How to get product from firebase

I need to integrate the shopping cart with firebase datastore, but don't know how to because this project still lack document and hard to develop or maintain.

How to reset redux store after checkout ?

How to reset redux store after checkout ?

Comparing two arrays in componentWillReceiveProps??

I am confused about that part

componentWillReceiveProps(nextProps) {
    const { filters: nextFilters, sort: nextSort } = nextProps;

    if (nextFilters !== this.props.filters) {
      this.handleFetchProducts(nextFilters, undefined);
    }
  }

You are comparing two arrays which always will return false and this would make your condition always true
[1, 2] === [1, 2] // false

Don't you think that it's a bad behaviour in your code???

Add and enable sort for category and color

How to add category and color option for items. Also need sorting for category.

Increment and Decrement product quantity

How can I show a product quantity counter on the "Add to Cart" button?
Also, is there a good way to implement Increment and Decrement of product quantity just beside the Add To Cart button?

P.S Loved your work. It helped me a lot understanding Redux and also helped me learn a good project structure. Keep up the Good Work 👍

Implement filters with URL params using react-routers

I would like to change the url params to reflect the actual filters.

If you know how to implement that using react-router, feel free to send a PR.