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

This week, in my journey of practicing React, I decided to create an Amazon Clone. It will be fully functional from the users signing in using their email and password, adding items to the basket, checking their basket, removing items if needed and proceeding to checkout.

I created a few clones this past few weeks using so setting up the app is becoming an habit.

1. Basic set up

First make a new directory in which the project will be hosted. Run:

npx create-react-app amazon-clone

This will create the structure of the app. Clean up the code by deleting everything inside the header in src/App.js (see below), deleting all the css in src/App.css, deleting a 3 files that you won’t need (src/logo.svg, src/setupTests.js and src/App.test.js).

In src/index.css, add the following to get rid of the margin that React provides:

* {
  margin: 0;
}

src/App.js

At this point, you should be able to run ‘npm start’ in your terminal and see your <h1> printing on the top left of the screen.

2. Components

In all my projects, I like to keep my code organized. This is why I create a src/components folder that will hold all my components, and a src/css folder that will hold my css, using the BEM convention which makes the flow of coding really easy.

To understand the steps to create this app, it’s important to breakdown the components that you will need.

The home page as shown above will consist of a header, a home page with a container and a products container.

The header

The header will consist of an amazon logo, a search bar, a nav bar with 3 options and a basket icon that will direct the user to the checkout route. Note that to import the icons from material-ui, you need to run the following commands:

npm install @material-ui/core
npm install @material-ui/icons

The home page

src/components/Home.js

First you will find a banner that I got from here in its own div.

Then the products will have an image, title, price, and rating. The cool trick I learned to handle the stars was using <Array/> to map out the stars style them with some css.

In the product component, you will find an ‘add to basket’ button. When pressing on ‘add to basket’, the basket on the top right will instantly update by the number of items added. This is done by using a stateProvider which is preparing the data layer, and wrap the app and provide the data layer to every component. (see below).

src/components/StateProvider — src/index.js

Then we create an action in our reducer called ‘ADD_TO_BASKET’, that will dispatch the action into the data layer.

src/components/Product.js

src/reducer.js

Here we are returning whatever the state originally was but updating it by what is inside of the action. Next in the Product component, we create an onClick function that will call an ‘addToBasket’ function that will dispatch the ‘ADD_TO_BASKET’ action. Finally, in the Header component, we pull the state using this line of code and use the basket.length to display the number of items.

const [{basket, user}, dispatch] = useStateValue();

In another blog, I will go over how to remove items from the basket, proceed to checkout, user authentication and payment process.