Install Node.js on your machine.

Install and set up a React application.

Start the development server to verify prior installation.

Like any typical application, the source code should be in a src folder. Delete the 3 optional files from that folder: App.test.js, logo.svg and setupTests.js. You’ll not be needing them.

Remove all the content of the App.css file.

Remove the unnecessary code from the App() function of App.js and add the below code to the App() function.

return <div className="app">Hello World!</div>;

Add the following code to index.css.

*{
    margin: 0;
    padding: 0;
}

It helps in tackling various formatting issues.

Install React Router.

Make a new component called “Home”. Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions but work in isolation and return HTML via a render function. Traditionally, every component has a .js file and a .css file. Follow the BEM (Block Element Modifier) convention when naming your components. We’ll be working on functional components throughout this project. In simple words, functional components are javascript functions. By writing a javascript function, we can create a functional component in React Apps.

Add the following code to your new component:

return <div className="home">Hello World Again!!</div>;

To use the above component in our App.js, we need to set up the React Router. For doing so, first import the required dependencies.

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

Then, import the Home component and use it at Route path = "/".

• Add the amazon logo to the navigation bar.
• Add a search bar. The search bar should also have a search icon. It need not be functional at the moment.
• Create the navigation section of the header. Add the following sections:
  • Login
  • Returns & Orders
  • Amazon Prime
  • Shopping Basket
• Add the necessary code in the .css file of the component so that it looks similar to the one of Amazon.

Go to your Home.js, i.e., you Home component, and do the following:

• Similar to the image shown below, add an image to be displayed at the top of the landing page. You need to add this image in your home component.

  

• If you observe the given image properly, you’ll notice that there’s a gradient style applied to the landing page image, which continues to turn into a greyish shade. You need to apply a similar gradient to the image you added. Go to Amazon.com or observe the image given below to get an idea about what we’re expecting.

  

  As you can see, since the products have a white background, it's easy to spot the contrast between the background of the rectangular components for ‘Gaming Accessories’, ‘Computers & Accessories’, etc., and the surrounding greyish shade.

• Create a Product component. As mentioned before, you’ll need two files: Product.js and Product.css. To attain reusability, pass parameters (referred to as props in React.js) like id, title, image, price and rating to your functional component (we’ll be discussing functional components throughout this project, but you are free to explore other alternatives).

• Utilize the Product component in your Home component to render out a few sample products. Use proper flex CSS styles where required to get the desired (similar to Amazon.com products) result. You can refer to the image below to get an idea about how your component should look like on rendering.

  

  [Note: We are not expecting you to integrate database features to your application yet, such that it can access the product information from a database. We’ll be discussing that in the optional milestones.]

Create a file StateProvider.js with the following contents:

import React, { createContext, useContext, useReducer } from "react";

// Prepare the dataLayer
export const StateContext = createContext();

// Wrap our app and provide the Data layer
export const StateProvider = ({ reducer, initialState, children }) => (
  <StateContext.Provider value={useReducer(reducer, initialState)}>
    {children}
  </StateContext.Provider>
);

// Pull information from the data layer
export const useStateValue = () => useContext(StateContext);

Create a file reducer.js which fulfills the following criteria:

• Declare all application level states which are to be used later by the application. (You’ll need at least 2 states, namely basket, to contain shopping basket details of logged in user, and user, to contain details of the logged in user).
• Create a function which can calculate the total amount of the items in the shopping basket.
• Export the reducer.

Do the following in index.js:

• Import the reducer and initialState from reducer.js and StateProvider component from StateProvider.js.
• Enclose the App component with StateProvider so that the children components can get access to the states too.
• Pass the reducer and initialState to the StateProvider.

In your Product.js, import the useStateValue hook from the StateProvider.

You need to use the useStateValue hook to bring in a state named basket (for example) and also get a dispatch function which allows you to dispatch actions to change the state in the reducer.

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

You need to dispatch the item information to the data layer. Your code should look similar to the code block shown below:

 const addToBasket = () => {
    dispatch({
      type: "ADD_TO_BASKET",
      item: {
        id: id,
        title: title,
        image: image,
        price: price,
        rating: rating,
      },
    });
  };

Also, you need a onClick function for executing the above dispatch code.

<button onClick={addToBasket}>Add to Basket</button>

In the reducer.js you need to add something similar to this to the switch (action.type) block:

   case "ADD_TO_BASKET":
      return {
        ...state,
        basket: [...state.basket, action.item],
      };

Import the useStateProvider to your Header component and make use of the basket information to show the number of items in the basket.

Create a project on Firebase.

Setup the database and setup sign-in method using Email/Password.

Register your application and set up Firebase hosting.

Install necessary Firebase dependencies in your local setup.

npm install -g firebase-tools && npm install firebase && firebase login

Open the Firebase SDK snippet section in your Firebase project and copy paste the necessary configuration in a file named firebase.js.

In this file, utilize the below code to make use of Firebase authentication and database.

const firebaseApp = firebase.initializeApp(firebaseConfig);

const db = firebaseApp.firestore();
const auth = firebase.auth();

export { db, auth };

Create a new component named Login. Style the component so that it looks similar to the one shown below.

[Note: Feel free to check out Amazon.com for reference.]

Configure the Firebase authentication with the Login component.

Create a Checkout component on the Checkout page. The Checkout component renders this page and will use two more components. Let’s name them CheckoutProduct and SubTotal for example.

As you can see in the above image, we need the components styled as shown. [Note: You are free to refer to Amazon.com too.]

The mentioned components should be functional as desired. The SubTotal component should be able to calculate the total price and display the same and the Remove From Basket button of the CheckoutProduct component should be functional such that on clicking the button, the product is removed from the basket and the price is deducted from the SubTotal component.

Build your React application.

npm run build

Setup Firebase hosting and deploy!

firebase deploy