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

In part 1 of creating an Amazon clone, I went over how to set up the app, create the header, home page and how to add a product to the basket.

In this blog, I’m gonna go over how to build the subtotal, remove items to the basket and create the login page.

Checkout Component

This component, as shown on the picture above, is composed of 2 main div:

npm i react-currency-format

In order to get the total amount of the items added to the basket, I created a Selector in the reducer using the reduce() function, which we will use in the Subtotal.js file on line 27 and then we pass this value as a render prop on line 16 and 19:

Login Page


Let’s take a look at the return first starting line 34. It contains the amazon logo then a container with the form. We use the useState hook to change the state of the email and password when the user enters an input. When the user clicks enter or click on the button, it triggers the signIn function or the register function.

Go to your firebase and make sure to enable the email and password sign in method like so:

Next we need to pull firebase inside or project by typing in the terminal:

npm i firebase

Update the firebase.js file:


Line 15 uses firestore() which is the real time database in firebase. Line 16 is a variable that we can use to handle all the signing in and registering.

Last step is to update the App.js file so that we dispatch an action ‘SET_USER’ to the reducer and set up to authUser that comes back from firebase.

reducer.js and App.js

Now the cool part is that we can pull the user from the state and display the page we want the users to see when they are signed in as well as using their username to greet them.


On the final part, I will go over the payment process using Stripe and deployment with firebase.