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:

Checkout.js

• 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.

CheckoutProduct.js

reducer.js

• 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

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

Login.js

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:

firebase.com

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

npm i firebase

Update the firebase.js file:

firebase.js

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.

Header.js

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