Amazon-clone using React, Material-ui and Firebase (Part 2)

Checkout Component

  • The products on the left, that we can remove from the basket if needed. They will be in their own checkoutProduct component on line 23. In this component, we pass in the props that we will use to render the products. In order to render out the basket, we use the useStateValue() function that we import from StateProvider.js so we can iterate through this basket on line 22 in Checkout.js. Lastly, we add a button so that we can remove an item from the basket if needed. When the user click, it calls a function called ‘removeFromBasket’ that will dispatch an action in the reducer ‘REMOVE_FROM_BASKET’ and remove the item by its id.
  • The subtotal, which will have a button to proceed to the checkout handled by ‘react-router-dom’. Note that we import CurrencyFormat from ‘react-currency-format’ that allows us to easily display money. Run the command:
npm i react-currency-format

Login Page

npm i firebase
reducer.js and App.js



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


French guy who recently moved to the United States. I am also changing career after having worked 13 years in restaurants. I will be going into coding.