/react-redux-materialUI-ecommerce

Online Store boilerplate for react redux with Material UI design

Primary LanguageJavaScript

Documentation

#Installation:

  1. You need to install node.js first on your machine
  2. You need to install git cli first on your machine
  3. yarn or npm install
  4. yarn start or npm start

#How to use the application: (Mobile-Friendly UI (make sure when you immediately change the view of the browser into mobile view, you should refresh first to make the menu icon worked to open the drawer/panel/sidebar ))

#USE GOOGLE CHROME FOR BETTER PERFORMANCE

  1. In Desktop view, the drawer/sidebar will be shown permanently. In Mobile view, the drawer will automatically closed and changed to be docked drawer with its overlay
  2. Inside Home page:
  • Click 'Add To Cart' Button to Add the items into the cart/bag (Deciding many items to purchase)
  • Click the 'Details' button to see the details of it (you could also click photos and title to see the details)
  • When you clicked 'Add To Cart', you will see the Grocery cart icon in upper right corner of your screen will shown a badge of the many items added into our cart in Number format and you could add more items more than one by clicking the button more than one untill the button disabled
  • When you clicked 'Details Button'(same like through clicking photos or titles), you will redirected into detail's page in each items selected
  • If you clicked the grocery cart icon, you will be shown a popover of the purchased items with the brands, quantities, and prices of the items. By clicking the popover items, you will redirected into your cart page (Purchase History)
  • Sorted By selection input, for sorting the items based on low-high and vice-versa, by default the items will be sorted to the newest items
  1. Inside Details page:
  • You could add the items into the cart, to add more items you should click the button more than one until the button disabled
  • You could see the overall details by clicking the 'KeyArrowDown' icon
  1. Inside Cart page:
  • You could set the quantity of your purchased items by clicking the select input inside the card items then choose how much items you want to purchase and delete the items by clicking the 'Delete Icon' on upper right corner of the card
  • You could Checkout when you're ready and you will be shown a dialog with the summary of the transaction inlcude the total prices

Feedbacks will be appreciated