AMAZON CLONING USING REACT AND FIREBASE

Project Report

Submitted in partial fulfilment of the requirements for the

award of Bachelor of Engineering Degree in Computer
Science and Engineering

By
ZAHIN EKBAL & PIU MAITI
(Reg. No. 38110676, 38110407)

DEPARTMENT OF COMPUTER SCIENCE AND

ENGINEERING
SCHOOL OF COMPUTING
SATHYABAMA INSTITUTE OF SCIENCE AND TECHNOLOGY
JEPPIAAR NAGAR, RAJIV GANDHI SALAI,
CHENNAI – 600119, TAMILNADU.

MARCH 2022

1
 SATHYABAMA INSTITUTE
OF SCIENCE AND TECHNOLOGY
(DEEMED TO BE UNIVERSITY)
(Established under Section 3 of UGC Act, 1956)
Jeppiaar Nagar, Rajiv Gandhi Salai, Chennai - 600119
www.sathyabamauniversity.ac.in

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

BONAFIDE CERTIFICATE

This is to certify that this Professional Training Report is the bonafide work of
ZAHIN EKBAL (Reg. No.38110676) & PIU MAITI (Reg. No.38110407) who
underwent the professional training in “AMAZON CLONING USING REACT AND
FIREBASE” under our supervision from Jan 2022 to Mar 2022.

Internal Guide
DR. A. CHRISTY, M.C.A, Ph.D.

Head of the Department

DR. LAKSHMANAN L, M.E., Ph.D.
DR. S. VIGNESHWARI, M.E., Ph.D.,

Submitted for Viva voce Examination held on _________________

Internal Examiner External Examiner

2
 DECLARATION

I, ZAHIN EKBAL (Reg. No.38110676) & PIU MAITI (Reg. No.38110407) hereby
declare that the Professional Training Report on “AMAZON CLONING USING
REACT AND FIREASE” done by me under the guidance of DR. A. CHRISTY,
M.C.A, Ph.D., at Sathyabama Institute of Science and Technology is submitted in
partial fulfilment of the requirements for the award of Bachelor of Engineering
degree in Computer Science and Engineering.

DATE:
PLACE: SIGNATURE OF THE CANDIDATE

3
 ACKNOWLEDGEMENT

I am pleased to acknowledge my sincere thanks to Board of Management of

SATHYABAMA for their kind encouragement in doing this project and for
completing it successfully. I am grateful to them.
I convey my thanks to DR. T. SASIKALA M.E., PH. D, Dean, School of
Computing, DR. Lakshmanan L,M.E., PH.D. and, DR. S. VIGNESHWARI, M.E.,
PH.D., Heads of the Department of Computer Science and Engineering for
providing me necessary support and details at the right time during the
progressive views.

I would like to express my sincere and deep sense of gratitude to my Project

Guide DR. A. CHRISTY, M.C.A., PH.D.,for his valuable guidance, suggestions and
constant encouragement paved way for the successful completion of my project
work.
I wish to express my thanks to all Teaching and Non-Teaching staff members of
the Department ofComputer Science and Engineering who were helpful in
many ways for the completion of my project.

4
 ABSTRACT

The main goal of this project is to build an e-commerce website similar to Amazon.
Our clone will allow users to register, login, add product to the cart, delete product
from the shopping cart. Our clone will permit only an authenticated user to access
the home page. IT world is changing. Evolution of cloud computing in recent past
has brought forceful change in era of IT field. Major advantage of cloud computing
is that the hardware need not to be upgraded as Cloud Services provides
everything of demand basis. Consuming electricity is the best example by which
cloud computing can be explained, just pay for whatever you used. during this
paper, we present a comparative study of leading improvidence like Amazon
Cloud Services, Rack space hopped-up by Open Stack and different open supply
Cloud suppliers. Further discussing concerning a way to implement Open Stack or
simply making an attempt out by Dev stack and Try stack only for testing purpose
and finally covering releases and up to date work occurring in Open Stack. The
aim of this paper is to point out the importance of Open Stack as a Cloud supplier
and the method to induce started with Open Stack. Neutral. Using the dataset,
these networks may be leveraged to produce task-specific outcomes. Using
Transfer Learning, we utilized our dataset on a pre-trained network. The
pre-trained network is used for both feature extraction and classification. Transfer
Learning takes features and weights from previously trained models and applies
them to subsequent models, even when there is less information on the most
recent job. We will use Firebase for user authentication. Firebase provides
developers with servers, APIs and datastore, all written so generically that
developers can modify based upon user needs. It is user friendly. We will use
firebase to store our data.

5
 TABLE OF CONTENTS

Chapter No. Title Page No.

Abstract v
List of Figures vii
1. INTRODUCTION
1.1 Outline of the Project 1
2. LITERATURE SURVEY 2
3. Aim And Scope of The Present Investigation
3.1 Purpose of the Project 3
3.2 Project Architecture 4
4. Methods and Materials Used
4.1 Designing of the Text Editor 5
4.2 Working Explanation 6
4.2.3Primary Goals 6
4.2.3.1Set React Router 6
4.2.3.2Creating the NavBar 6
4.2.3.3React Context API 6
4.2.3.4 Firebase 7
4.2.3.5React Hooks 8
5. Results And Discussion 9
6. SUMMARY and CONCLUSION 12
7. APPENDIX
A. Source Code 13
B. Output 21
8 REFERENCES 22

LIST OF FIGURES

6
Figure No. Title Page No.

3.1 Project Stages 4

3.2 Working Of Amazon Clone Script 4
4.1 Outline of the Web Page 5
4.2 Firebase Configuration 7
5.1 Login Page 9
5.2 Sign In Page 9
5.3 Home Page 10
5.4 List Page 10
5.5 Item Page 11
5.6 Checkout Page 11
6.1 Output 21

7
 CHAPTER 1

INTRODUCTION

1.1 OUTLINE OF THE PROJECT

Amazon could be a prime example of an internet site with all the key parts
creating up a decent e-commerce website. Businesses, in any field have
tons of competition. They're constantly on the lookout for a proven because
of increase Revenue. If the business doesn’t have an e-commerce website,
they're deed money on the table. The e-commerce web site of Amazonas at
first place in conjunction with easy hypertext mark-up language, CSS &
JAVASCRIPT. Through this Project, We’ll discover the simplest way to
create a useful clone of Amazon e-commerce web site with React &
Firebase. Cloud Computing has become the essential requirement for the
IT companies. Cloud Industry is growing at a very good pace, and providing
essential services i.e. infrastructure as a service (IaaS), network as a
service (NaaS), platform as a service (PaaS) (SaaS). Because of important
cost saving several smaller and medium sized organizations are trying
forward for exploitation cloud services. The emerging demand for cloud
services is driven by continuing globalization, consumer acceptance of
technology, economic downturn and the growth of the extended enterprise.
Cloud Computing enables many organizations to limit the large capital
investment that is associated with costly data centres and for the
applications and transforming these costs into operating expenses paying
for cloud resources only as required.

CHAPTER 2

1
 LITERATURE SURVEY

In this era of internet, e-commerce is growing by leaps and bounds keeping the
development of brick-and-mortar businesses down. Individuals in the developed
world and increasing number of people in the developing world currently use
e-commerce websites on a routine for their everyday purchase. In recent times the
role of information technology within the business enterprises has emerged with
varied new levels of services, storage needs, resource management and
handiness. Amazon is a vast Internet-based enterprise that sells books, music,
movies, housewares, electronics, toys, and many other goods. In this article, we
will explore the react hooks and context API as we build the amazon clone using
the react context API for state management within our app. As the amount of data
that is available now a days is too large for a single organization to regulate and
manage therefore putting the data on cloud can act as a savoir. Cloud services are
a true ‘on-demand’ services. Cloud servers work at a far more broader scale than
even the largest non-public enterprises can work. Cloud computing is a method of
enabling a convenient and present access to a shared pool of configurable
computing resources (networks, servers, processors, storage, applications and
services) which can be rapidly accessed with less effort. Through this project, we’ll
discover a way to create a functional clone of Amazon’s e-commerce website with
React and Firebase for database storage.

CHAPTER 3

AIM AND SCOPE OF THE PRESENT INVESTIGATION

2
3.1 PURPOSE OF THE PROJECT
The goal of this project is to build an e-commerce application using React,
which is inspired by Amazon. Amazon is a vast Internet-based enterprise
that sells books, music, movies, housewares, electronics, toys, and many
other goods. In this article, we will explore the react hooks and context API
as we build the amazon clone using the react context API for state
management within our app.

Pre-requisite:

● Basic understanding of JavaScript ES6.

● Basic understanding of HTML and CSS.
● Have Node js installed on your machine.
● Have Visual Studio Code installed on your machine.

Technologies:

● React
● Firebase
● Font awesome(icons)

Project overview:

Our clone will allow users to register, login, add products to the shopping

cart, remove product from the shopping cart. Our clone will permit only an
. authenticated user to access the home page.

3.2 PROJECT ARCHITECTURE:

3
 Figure 3.1 Project Stages

Figure 3.2 Working of Amazon Clone Script

CHAPTER 4

METHODS AND MATERIALS USED

4.1 Designing of the Text Editor

4
The project will stick to the basic functionalities expected of a simple text editor –
whichincludestheabilitytowritesomethingonthenotepad,saveitandopenand modify it
whenever required. For the purpose of this tutorial we will design the Visual Studio
Code Editor with React and CSS code to create the front-end part of the webpage
and connect Firebase to the code to add the Database. We will use Stripe for
Authentication.

Figure 4.1 Outline of the Web Page

4.2 WORKING EXPLANATION:

4.2.3 Primary Goals

Create header/navigation bar to navigate between pages. Create a home page to

display products. Create a login page for user login. Add functionalities like basket,

5
payment and authentication login. Now we’ve our react project dead setup. Now
we can start making the amazon clone.

4.2.3.1 Set React Router

A very necessary factor to contemplate during a React app is that the

navigation(moving from one to another) of the users. Use this npm install
react-router-dom.

4.2.3.2 Creating the NavBar

We are going to use a package for icons, and we need Material Icons to use them.
So open your terminal and write the subsequent command. npm install
@material-ui/core.

4.2.3.3 React Context API

The Context API may be an important part of React. It helps North American
nation to form application level states and that we will get the information from
those states through any part. There are many alternatives, one among them is
revived. Setting up React API is additional of boiler plate. putting in place React
Context API is more of a boilerplate and just about same in each project.

4.2.3.4 FireBase

We use base of operations for user authentication. Firebase provides developers

with servers, APIs and data store, all written thus generically that developers will
modify it to suit most desires. It is user friendly In this article we will use the fire
store to store our data. Next you will be directed to your Firebase projects pagelike
the following:-

step1:-Add the name of your project (amazon-clone)

step2:- check enable Google Analytics for this project and click continue

step3:- select default account for Firebase. After the Firebase project is
successfully created, click on the web icon and follow the prompt to register your
app. Next Install Firebase CLI .

npm install -g Firebase-tools and continue to console. Next, click on the net icon
and choose the con-fig possibility as follow:-

6
 Figure 4.2 Firebase Configuration

Connect our projects to firebase install fire- -base in the project.

npm install firebase

4.2.3.5 React Hooks

“Hooks square measure a brand new addition in React They let you use state and
alternative React options without writing a category.”THE use State Hook The
North American nation Estate hook permits us rouse state in our purposeful
elements similar this. State school primarily based component. A use State hook
takes the initial price of our state because the solely argument, associated it
returns an array of 2 elements. the primary part is our stat variable and also the
second part may be a function within which we are able to use the update the
value of the state variable.

Let’s take a look at the following example:

import React, {useState} from "react";

function Counter()

7
const [counter, setCounter] = useState(0);

Here, counter is our state variable and its initial price is zero whereas set Counter
may be a function that we are able to use to update the value of count. The use
Context HOOK. This hook essentially permits North American nation to consume
the worth of a context. It accepts a context object(the price returned from create
Context and returns the current context price for that context.

CHAPTER 5

RESULTS AND DISCUSSION

Login Page:

8
 Figure 5.1 Login page of the web page

Figure 5.2 Sign In

Home Page:

9
 Figure 5.3 Home Page of the Amazon website

List Page:

Figure 5.4 List of Products connected through Firebase

Item Page:

10
 Figure 5.5 Item Page showing details of the item

Checkout Page:

Figure 5.6 Checkout Page

CHAPTER 6

11
 SUMMARY AND CONCLUSION

Open Stack is designed to allow researchers and administrators to deploy Iaas

infrastructure and supply tools for making and managing virtual machines on high
of existing resources. This work aims to illustrate that the system Open-stack has
stuffed an important niche within the style area of cloud computing by providing a
simple to deploy over the prevailing resources, and most importantly forms open
supply and provides powerful options whereas following rising open standards.
Currently, we have a tendency to deployed the entire system. this technique are
going to be utilized in future works to check and appraise it performances in
dynamic reconfiguration in IaaS Cloud Computing. So it’s clear the one reason
that stood bent to manoeuvrer several enterprises to point out towards the
Amazon clone script is, “The massive finish of Amazon Marketplace”.To satisfy the
requirements and desires of such e-commerce business seekers. We at we have a
tendency tobnexs, variety multimovement e-Commerce script supplier offer
feature-rich and high-performing Amazon clone to kick-start their multi-vendor
market place web site virtually like Amazon with our greatest Amazon multi-vendor
Clone script. Our development experts square measure nice at coming up with
implementing, and developing Amazon clones as per your business necessities
with all must-to have functionalities.

That’s it! We have succeeded in building our Amazon clone using the Context API
for state management ad firebase for user authentication in the process, we have
learned.

● What the Context API is and the problem it solves;

● When to use the Context API

● Creating Context and consuming it functional components.

● What React Hook is

● How to setup firebase authentication.

APPENDIX

12
SOURCE CODE:

App.js:

import React from'react';

import'./App.css';
import Header from'./Header';
import Home from'./Home';
import Checkout from'./Checkout';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from"react-router-dom";

function App() {
return (
<Router>
<divclassName="App">
<Switch>

<Routepath="/checkout">
<Header/>
<Checkout/>
</Route>

<Routepath="/">
<Header/>
<Home/>
</Route>

</Switch>
</div>
</Router>
);
}

exportdefault App;

App.css:

.App {

text-align: center;
}

13
.App-logo {
height: 40vmin;
pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {

.App-logo {
animation: App-logo-spin infinite20slinear;
}
}

.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}

.App-link {
color: #61dafb;
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

Header.js:

import React from"react";

import"./Header.css";
import SearchIcon from"@material-ui/icons/Search";
import ShoppingBasketIcon from"@material-ui/icons/ShoppingBasket";
import { Link } from"react-router-dom";

function Header() {
return (
<divclassName="header">
<Linkto="/"><img
14
 className="header__logo"
src="http://pngimg.com/uploads/amazon/amazon_PNG11.png"
/>
</Link>

<divclassName="header__search">
<inputclassName="header__searchInput"type="text"/>
<SearchIconclassName="header__searchIcon"/>
</div>

<divclassName="header__nav">

<divclassName="header__option">
<spanclassName="header__optionLineOne">Hello Guest</span>
<spanclassName="header__optionLineTwo">Sign In</span>
</div>

<divclassName="header__option">
<spanclassName="header__optionLineOne">Returns</span>
<spanclassName="header__optionLineTwo">& Orders</span>
</div>

<divclassName="header__option">
<spanclassName="header__optionLineOne">Your</span>
<spanclassName="header__optionLineTwo">Prime</span>
</div>

<Linkto="/checkout">
<divclassName="header__optionBasket">
<ShoppingBasketIcon/>
<spanclassName="header__optionLineTwo header__basketCount">
0
</span>
</div>
</Link>

</div>
</div>
);
}

exportdefault Header;

15
Header.css:
.header {
height: 60px;
display: flex;
align-items: center;
background-color: #131921;
position: sticky;
top: 0;
z-index: 100;
}

.header__logo {
width: 100px;
object-fit: contain;
margin: 020px;
margin-top: 18px;
}

.header__search {
display: flex;
flex: 1;
align-items: center;
border-radius: 24px;
}

.header__searchInput {
height: 12px;
padding: 10px;
border: none;
width: 100%;
}

.header__searchIcon {
padding: 5px;
height: 22px!important;
background-color: #cd9042;
}

.header__optionLineOne {
font-size: 10px;
}

.header__optionLineTwo {
font-size: 13px;
font-weight: 800;
}

16
 .header__optionBasket {
display: flex;
align-items: center;
color: white;
}

.header__basketCount {
margin-left: 10px;
margin-right: 10px;
}

.header__nav {
display: flex;
justify-content: space-evenly;
}

.header__option {
display: flex;
flex-direction: column;
margin-left: 10px;
margin-right: 10px;
color: white;
}

Home.js:
import React from"react";
import"./Home.css";
import Product from"./Product";

function Home() {
return (
<divclassName="home">
<divclassName="home__container">
<img
className="home__image"

src="https://images-eu.ssl-images-amazon.com/images/G/02/digital/video/merch2
016/Hero/Covid19/Generic/GWBleedingHero_ENG_COVIDUPDATE__XSite_1500
x600_PV_en-GB._CB428684220_.jpg"
alt=""
/>

<divclassName="home__row">
<Product
id="12321341"

17
 title="The Lean Startup: How Constant Innovation Creates Radically
Successful Businesses Paperback"
price={11.96}
rating={5}

image="https://images-na.ssl-images-amazon.com/images/I/51Zymoq7UnL._SX3
25_BO1,204,203,200_.jpg"
/>
<Product
id="49538094"
title="Kenwood kMix Stand Mixer for Baking, Stylish Kitchen Mixer with
K-beater, Dough Hook and Whisk, 5 Litre Glass Bowl"
price={239.0}
rating={4}

image="https://images-na.ssl-images-amazon.com/images/I/81O%2BGNdkzKL._A
C_SX450_.jpg"
/>
</div>

<divclassName="home__row">
<Product
id="4903850"
title="Samsung LC49RG90SSUXEN 49' Curved LED Gaming Monitor"
price={199.99}
rating={3}

image="https://images-na.ssl-images-amazon.com/images/I/71Swqqe7XAL._AC_
SX466_.jpg"
/>
<Product
id="23445930"
title="Amazon Echo (3rd generation) | Smart speaker with Alexa, Charcoal
Fabric"
price={98.99}
rating={5}

image="https://media.very.co.uk/i/very/P6LTG_SQ1_0000000071_CHARCOAL_S
Lf?$300x400_retinamobilex2$"
/>
<Product
id="3254354345"
title="New Apple iPad Pro (12.9-inch, Wi-Fi, 128GB) - Silver (4th
Generation)"
price={598.99}
rating={4}

18
image="https://images-na.ssl-images-amazon.com/images/I/816ctt5WV5L._AC_S
X385_.jpg"
/>
</div>

<divclassName="home__row">
<Product
id="90829332"
title="Samsung LC49RG90SSUXEN 49' Curved LED Gaming Monitor -
Super Ultra Wide Dual WQHD 5120 x 1440"
price={1094.98}
rating={4}

image="https://images-na.ssl-images-amazon.com/images/I/6125mFrzr6L._AC_S
X355_.jpg"
/>
</div>
</div>
</div>
);
}

exportdefault Home;

Home.css:
.home {
display: flex;
justify-content: center;
margin-left: auto;
margin-right: auto;
max-width: 1500px;
}
.home__image {
width: 100%;
z-index: -1;
margin-bottom: -150px;
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}
.home__row {
display: flex;
z-index: 1;
margin-left: 5px;
margin-right: 5px;
}

Checkout.js:
19
import React from'react'
import"./Checkout.css"
import {useStateValue } from'./StateProvider'
import Subtotal from "./Subtotal"

function Checkout() {

return (
<divclassName="checkout">
<divclassName="checkout__left">

<imgclassName="checkout__ad"src="https://images-na.ssl-images-amazon.com/i
mages/G/02/UK_CCMP/TM/OCC_Amazon1._CB423592668_.jpg"alt=""/>
<div>
<h2className="checkout__title"> Your shopping basket</h2>
</div>
</div>
<divclassName="checkout__right">
<Subtotal/>
</div>
</div>
)
}

exportdefault Checkout

Checkout.css:
.checkout {
display: flex;
padding: 20px;
background-color: white;
height: max-content;
}

.checkout__ad{
width: 100%;
margin-bottom: 10px;
}

.checkout__title {
margin-right: 10px;
padding: 10px;
border-bottom: 1pxsolidlightgray;
}

20
firebase.js
const firebaseConfig = {
apiKey: "AIzaSyDVLtxnEdxA3LUsqOllQAif_kF4M8PeVTo",
authDomain: "e-clone-3fd32.firebaseapp.com",
projectId: "e-clone-3fd32",
storageBucket: "e-clone-3fd32.appspot.com",
messagingSenderId: "162589427345",
appId: "1:162589427345:web:f704f82887a6761893e130",
measurementId: "G-K5M00RBN77"
};

StateProvider.js:
import React, { createContext, useContext, useReducer } from"react";

// Prepares the dataLayer

exportconst StateContext = createContext();

// Wrap our app and provide the Data layer

exportconst StateProvider = ({ reducer, initialState, children }) => (
<StateContext.Providervalue={useReducer(reducer, initialState)}>
{children}
</StateContext.Provider>
);

// Pull information from the data layer

exportconst useStateValue = () => useContext(StateContext);

ServiceWorker.js:
const serviceWorker = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};

exportdefault serviceWorker;

Output:

21
 Figure 6.1 Output

References

● Amazon URL: http://aws.amazon.com/

● Open Stack URL : http://www.openstack.org/
● Cloud Stack URL: http://www.cloudstack.apache.org/
● Open Nebula URL : http://opennebula.org/
● Eucalyptus URL : http://www.eucalyptus.com/
● Rack space URL : http://www.rackspace.com/
● Cloud Wekepedia : -Link:http://.en.wikipedia.org/wiki/Cloud_computing
● M. Armbrust A. Fox, A. Joseph, R. Katz, R. Griffith, A. Konwinski, G. Lee, A.
Rabkin, D. Patterson, , I. Stoica etal., “A view of Cloud Computing”
Communications of ACM, volume 53, no.4, pp 50-58, 2010.
● H. Jin, H. Cao , S. Ibrahim, T. Bell, L. Qi, X. Shi, S. Wu. Tools and
Technologies for building clouds. Cloud Computing : Principles, Systems
and Applications. Springer (2010) 3-20.
● Vaquero LM, Rodero-Merino L, Morn D (2011) Locking the sky: a survey on
IaaS cloud security
● M Mahjoub, Jmaiel M ,Mdhaffar A, Halima R.B. “Comparative study of
Current cloud computing Technologies and offers in 2011”.

22
● Nurmi, D., Wolski, R., Soman, S., Grzegorczyk, C., Obertelli, G., Youseff, L.
et al. (2009) The Eucalyptus Open-Source Cloud Computing System. In
IEEE/ACM International Symposium on Cluster Computing and Grid,
Shandghai, China 2009. [13] Devstack URL : http://devstack.org/
● https://medium.com/swlh/how-to-deploy-a-react-app-with-firebase-hosting-9
8063c5bf425

23