arwalokhandwala / react-shopping-cart-prpl Goto Github PK

This simple shopping cart prototype shows how React components and Redux can be used to build a friendly user experience with instant visual updates and scaleable code in ecommerce applications.

• Add and remove products from the floating cart
• Sort products by highest to lowest and lowest to highest price
• Filter products by available sizes
• Products persist in floating cart even after page reloads
• Responsive design for desktop, tablets and mobile
• Product stoppers for free shipping
• Unit tests, integration tests and e2e testing

• React
  • Redux - state management
• Nodejs
  • Express CORS Middleware (Node and React run in different port)
  • Nodemon - for a better development experience
  • Concurrently - To run multiple tasks at once
• Axios - for promise HTTP requests
• CSS
  • BEM methodology
  • SASS
• Moxios - to stub http request
• Enzyme - to mount, shallow, render and query the DOM tree of React components
• Webdriverio - to do automated tests in a real browser environment
• Native local storage - to persist products in cart even after page reload

You can play with the code on CodeSandbox :)

• Node.js
• NPM

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

/* Then start both Node and React */
npm start

/* To run the tests */
npm run test

/* Running e2e tests */
npm run wdio

• Unit tests
  • All components have at least a basic smoke test
• Integration tests
  • Fetch product and add to cart properly
• e2e
  • Webdriverio - Add and remove product from cart

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

_{A little project by Jefferson Ribeiro}