AMAZON CLONE USING REACTJS

A mini project report submitted by

RINI GRACE BEERA (URK18CS086)

in partial fulfillment for the award of the degree

of
BACHELOR OF TECHNOLOGY
in
COMPUTER SCIENCE AND ENGINEERING
under the supervision of
Mrs. T. Mathu, Assistant Professor

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

KARUNYA INSTITUTE OF TECHNOLOGY AND SCIENCES
(Declared as Deemed-to-be-under Sec-3 of the UGC Act, 1956)
Karunya Nagar, Coimbatore - 641 114. INDIA

March 2021

1| M ini P r o j e c t 2 0 2 0 - 2 0 2 1
 DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

BONAFIDE CERTIFICATE

This is to certify that the project report entitled , “ Police Quarters Management System” is a
bonafide record of Mini Project work done during the even semester of the academic year 2020-
2021 by

RINI GRACE BEERA (Reg. No: URK18CS086)

in partial fulfillment of the requirements for the award of the degree of Bachelor of Technology
in Computer Science and Engineering of Karunya Institute of Technology and Sciences.

Submitted for the Viva Voce held on _________________

Project Coordinator Signature of the Guide

2| M ini P r o j e c t 2 0 2 0 - 2 0 2 1
 ACKNOWLEDGEMENT

First and foremost, I praise and thank ALMIGTHY GOD whose blessings have bestowed

in me the will power and confidence to carry out my project.

I am grateful to our beloved founders Late. Dr. D.G.S. Dhinakaran, C.A.I.I.B, Ph.D

and Dr. Paul Dhinakaran, M.B.A, Ph.D, for their love and always remembering us in their

prayers.

I extend my thanks to our Vice Chancellor Dr. P. Mannar Jawahar, Ph.D and our

Registrar Dr. Elijah Blessing, M.E., Ph.D, for giving me this opportunity to do the project.

I would like to thank Dr. Prince Arulraj, M.E., Ph.D., Dean, School of Engineering and

Technology for his direction and invaluable support to complete the same.

I would like to place my heart- felt thanks and gratitude to Dr. J. Immanuel John Raja,

M.E., Ph.D., Head of the Department, Computer Science and Engineering for his

encouragement and guidance.

I feel it is a pleasure to be indebted to, M r. J. Andre w, M.E, (Ph.D.), Assistant

Professor, Department of Computer Science and Engineering and Mrs. T. Mathu for their

invaluable support, advice and encouragement.

I also thank all the staff members of the Department for extending their helping hands to

make this project a successful one.

I would also like to thank all my friends and my parents who have prayed and helped me

during the project work.

3| M ini P r o j e c t 2 0 2 0 - 2 0 2 1
 CONTENTS

Acknowledgments 3
Abstract 4
1. Introduction
1.1. ReactJS 5
1.2. Firebase Authentication 6
1.3. VS code and NodeJS 7
1.4. Project overview 8
2. Components of web page
2.1. Environment setup 9
2.2. React Router 10
2.3. Header Page 11
2.4. Home page 12
2.5. React Context API 13
2.6. Basket Feature 15
2.7. Authentication with firebase 16
2.8. Checkout page 18
2.9. Deploying App 20
3. Results
3.1 . Home and Navigation Bar 21
3.2. Login Page 22
3.3. Checkout page 23
4. Conclusion 24
5. References. 25

4| M ini P r o j e c t 2 0 2 0 - 2 0 2 1
 ABSTRACT

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 In this mini project ,I have made a website similar to amazon
application using ReactJS .Through this project, we’ll discover a way to build a functional clone
of Amazon’s e-commerce website, relying on React and Firebase. ReactJS is a is an open-source,
front end, JavaScript library for building user interfaces or UI components. React makes the
things simple in creating applications. Firebase is a great tool to get started with projects quickly.
I have used visual studio code to do all the coding part. Firstly we need to install NODEJS
globally from browser. NODEJS comes along with npm scripts which helps to run our app . A
small web app that tries to imitate the desktop web version of amazon site , you can add
items to the basket, delete them, and have your user authentication feature . We need to set
up the react router , then start with the basic things like setting up navigation bar and the
banner . Add the home page ,fill it up with all the products attach add to basket functionality.
Then we set up the Context API which is a component structure provided by
the React framework, which enables us to share specific states across all levels of the
application. In our project, we’ll need to manage two states: basket (to manage the shopping
cart) and user (for managing the details of current login user). Create a subtotal component
which adds up total value in the basket.
For setting up the payments functionality, we’ll be using APIs provided by Stripe.
Handling our database and authentication needs to be supported and we ’ll be using Firebase for
the same. Basically the database will be used to store the login information for the users, but the
resource can be used for storing product information as well. Once we have Firebase setup, we
can work on the Login page of our application.Then we make the checkout page with all the
products remove from basket functionality. Successful implementation of t he above
requirements will lead to completion of the core implementation of our e-commerce solution.
In this project React and the firebase play a major . React is the best app maker
when we compare to other resources . It is so simple to understand and work with . Firebase
helps us with authentication and provides the database for the payment section. We can also
deploy our app . So , this makes the simplest amazon clone . We need to set up all the extensions
Necessary for building up this app.
5| M ini P r o j e c t 2 0 2 0 - 2 0 2 1
 1. INTRODUCTION

1.1. REACTJS

React is a front-end library developed by Facebook. It is used for handling the view layer for
web and mobile apps. ReactJS allows us to create reusable UI components. It is currently one of
the most popular JavaScript libraries and has a strong foundation and large community behind it.

If you want to work with ReactJS, you need to have solid knowledge of JavaScript,
HTML5, and CSS. Even though ReactJS doesn't use HTML, the JSX is simila r so your HTML
knowledge will be very helpful.

React Features:
 JSX − JSX is JavaScript syntax extension. It isn't necessary to use JSX in React
development, but it is recommended.

 Components − React is all about components. You need to think of everything as a

component. This will help you maintain the code when working on larger scale projects.

 Unidirectional data flow and Flux − React implements one-way data flow which makes it
easy to reason about your app. Flux is a pattern that helps keeping your data unidirectional.

 License − React is licensed under the Facebook Inc. Documentation is licensed under CC
BY 4.0.

React Advantages:
 Uses virtual DOM which is a JavaScript object. This will improve apps performance, since
JavaScript virtual DOM is faster than the regular DOM.
 Can be used on client and server side as well as with other frameworks.
 Component and data patterns improve readability, which helps to maintain larger apps.

React Limitations:
 Covers only the view layer of the app, hence you still need to choose other technologies to
get a complete tooling set for development.
 Uses inline templating and JSX, which might seem awkward to some developers.

6| M ini P r o j e c t 2 0 2 0 - 2 0 2 1
1.2.FIREBASE

Firebase is a backend platform for building Web, Android and IOS applications. It offers real
time database, different APIs, multiple authentication types and hosting platform. This is an
introductory tutorial, which covers the basics of the Firebase platform and explains how to deal
with its various components and sub-components.

Firebase Features:

 Real-time Database − Firebase supports JSON data and all users connected to it receive live
updates after every change.
 Authentication − We can use anonymous, password or different social authentications.
 Hosting − The applications can be deployed over secured connection to Firebase servers.

Firebase Advantages:

 It is simple and user friendly. No need for complicated configuration.

 The data is real-time, which means that every change will automatically update connected
clients.
 Firebase offers simple control dashboard.
 There are a number of useful services to choose.

Firebase Limitations:
 Firebase free plan is limited to 50 Connections and 100 MB of storage.

7| M ini P r o j e c t 2 0 2 0 - 2 0 2 1
1.3. VS CODE AND NODEJS

VISUAL STUDIO CODE:

Visual Studio Code is a freeware source-code editor made by Microsoft for Windows, Linux and
macOS. Features include support for debugging, syntax highlighting, intelligent code
completion, snippets, code refactoring, and embedded Git.

Visual Studio Code is a source-code editor that can be used with a variety of
programming languages, including Java, JavaScript, Go, Node.js, Python and C++.It is based on
the Electron framework, which is used to develop Node.js Web applications that run on the Blink
layout engine. Visual Studio Code allows users to set the code page in which the active
document is saved, the newline character, and the programming language of the active
document. This allows it to be used on any platform, in any locale, and for any given
programming language.

NODEJS:

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on

the V8 engine and executes JavaScript code outside a web browser.
The Node.js distributed development project was previously governed by the Node.js
Foundation, and has now merged with the JS Foundation to form the OpenJS Foundation, which
is facilitated by the Linux Foundation's Collaborative Projects program.

NPM Scripts:
npm is the world's largest Software Registry. The registry contains over 800,000 code packages.
Open-source developers use npm to share software.Many organizations also use npm to manage
private development. npm is free to use. You can download all npm public software packages
without any registration or logon.

8| M ini P r o j e c t 2 0 2 0 - 2 0 2 1
1.4. 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.

Figure 1. Overview of the project

1.4.1 .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, payment and authentication.
1.4.2.Pr-requisite:
 Basic understanding of JavaScript ES6
 Basic understanding of HTML and CSS
 Have Nodejs installed on your machine
1.4.3.Technologies:
React
Firebase
Font awesome (icons)

9| M ini P r o j e c t 2 0 2 0 - 2 0 2 1
 2.COMPONETS OF WEB PAGE

2.1.ENVIRONMENT SETUP

 Firstly we need to install NODEJS and VS code.

 Open the terminal in the visual studio code this looks similar to command prompt we use
 Type the following in the terminal ,this will help you to create the app for you

Figure 2.1. Command to create react app

 npx is a part of npm (Node Package Manager) except npx runs a remote script instead of
installing it locally. This is done so that you always have the latest version of React installed
in your project.
 After that ,your terminal should look like this

Figure 2. Success-full creation of app display the above

 Now we are ready to go.Go back to the terminal and type npm start , your app will open in
browser .

Figure 3. Browser view

10 | M ini P r o j e c t 2 0 2 0 - 2 0 2 1
 Delete the 3 optional files from that folder: App.test.js, logo.svg and setupTests.js. We are
deleting these files because these are not relevant to us in any project.
 The main objective of this is to make sure that you have the required development
environment in place.

2.2. THE REACT ROUTER

React is a single page application. Which means that it doesn’t support multiple routes by
default. Routing is the ability to move between different parts of an application when a user
enters a URL or clicks an element (link, button, icon, image etc) within the application. It
enables us to transition from one view to another.
But the node packages come to our save. There’s a package named react-router-dom which
allows us to create routes for our React project. Not a lot complicated. Setting up is one time, and
then whenever you add a new page, you just need to inform the Router. Don’t worry we will
cover that in depth here!
Open your terminal and enter the following command to install react-router-dom

Figure 4. Command to install react-router-dom

When the installation completes, you should see something like this

Figure 5. react-router-dom installation

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

11 | M ini P r o j e c t 2 0 2 0 - 2 0 2 1
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 required code to your new component.

2.3. HEADER PAGE

Now that we have our development environment and the React router in place, it’s time to begin
the actual job, We’re going to start off by building the navigation bar of our web app.
 We need a couple of icons in the navigation bar, like the search icon and the basket icon.
React has a UI framework called Material- UI, which helps in building our frontend. Install
the @material-ui/core and the @material- ui/icons packages.

Figure 6. Command to install framework Material-UI

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

12 | M ini P r o j e c t 2 0 2 0 - 2 0 2 1
 Include only the Header component in the App.js and use it at Route path = "/".
 Our motive is to have Home component to be rendered on the default route that
is “/”.
 We need to wrap the entire app into the Router component, so that every
component is a part of Router and has access to the Router.
 Add the CSS file to this page so we get the desired output.

2.4.HOME PAGE

Create a Home.js and do the code what all the required things you want in the web page.Add the
navigation bar and the banner we makes it look a lot like real amazon website.
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.

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

13 | M ini P r o j e c t 2 0 2 0 - 2 0 2 1
 We are passing some props through the
component, which can be used by the
components to render. These props are —
Product ID, Title, Price, Image, Ratings.

Figure 7. Product component

 These props are usually variables and objects that are passed by parent components. We can
render props on the screen in this case because all of the props here are viewable. So, we
render the data on the screen by enclosing the variables with {} at appropriate places.
 To render the ratings, we use a bit different way here. We cr eate an array of length of the
ratings passed and loop through them and render out the star emoji the number of times the
ratings passed through the.

2.5. Setting up REACT CONTEXT API

The Context API provides a way to share data values between components without having to
pass a prop through every level of the app tree. The React Context API is a component structure
provided by the React framework. It basically solves the problem of prop drilling.

Create a file StateProvider.js with the following contents:

14 | M ini P r o j e c t 2 0 2 0 - 2 0 2 1
 Figure 8.Code to set up State provider
 The reducer is a place where you declare all the application level states which can be used
later by the application.
 In initialState, we declare the states we are going to use. In this case, basket and user. We
would cover them in future sections.
 The actual reducer function takes in a state and action. The state and action is provided so
that the reducer can perform operations on the state.

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.

15 | M ini P r o j e c t 2 0 2 0 - 2 0 2 1
 Pass the reducer and initialState to the StateProvider.
Now we are able to configure React Context API, along with the reducer, so that the
components can access the basket and user info.

2.6. Basket Functionality

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

Figure 9. To import state provider

We need to use the useStateValue inorder 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.

Figure 10 .Code to be added to access the basket

So this means two things, we are using the useStateValue hook to

 Bring in a state named basket
 And we are also getting the dispatch function which allows us to dispatch actions to change
the state in the reducer.

First of all, we set an onClick on the button. Once the button is clicked, addToBasket function
will fire off.
The addToBasket function fires off the dispatch to the reducer instructing to update the state
with the provided data. Here the type is “ADD_TO_BASKET” which we will define in the
reducer in a bit. We are dispatching the action along with its data.

16 | M ini P r o j e c t 2 0 2 0 - 2 0 2 1
 We set the state, we update the basket, but here we use the spread operator (…) so that
previous state is not lost. And that’s how we add items to the basket array in our state in
reducer.

Figure 11.add_to_basket function code

 Now if you add anything to the basket it should update itself directly.

2.6 FIREBASE AUTHENTICATION

Firebase is a great service provided by Google for configuring the
backend of any web application with all the general necessities like database preparation,
authentication using various methods, etc. In this milestone, we’ll be preparing our database and
setting up authentication using email and password.

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

Figure 12. Code to install and access firebase globally

 From the right panel, select Cloud Firestore

 The Cloud Firestore is the database for Firebase.
 Click on Create Database.
 Select Start in Test Mode.
 Click Enable and wait for Google to provision you Cloud Firestore. Your database is made.

17 | M ini P r o j e c t 2 0 2 0 - 2 0 2 1
Let’s now set up authentication:
 Select Authentication from the side panel.
 Select Set up sign-in method.
 Click on the pencil icon near Email/Password

Create two new files, Login.js and Login.css

 We have two local states which keep the track of the values of the textboxes
 Whenever the value of the textboxes change, we change the value of state
Go to App.js and enter this route before the main “/” route.
The handle Authentication function checks if the user is logged in or not, if else, logs out when
the user clicks on the greeting.

 We use e.preventDefault() to prevent the page from reloading because of the form tag.
 When the login button is pressed, the value of the states of textboxes are passed to Firebase
to authenticate. Firebase does its magic, and if the authentication is successful returns a
promise or throws an error.
 Something similar happens with register. If there is another user with same deta ils, Firebase
got you covered.
 The useHistory() is a hook from react-router-dom which helps you to redirect user from the
actual code.
 Now we need to set a listener to Firebase so that our React app knows that user is
authenticated. Just add this useEffect block in App.js
 This will setup the React app if the user is Authenticated, and update the state in the reducer.

18 | M ini P r o j e c t 2 0 2 0 - 2 0 2 1
2.7 CHECKOUT PAGE

First of all we need to install a package which will make our life easier handling currency
formats.

Figure 13. Code to install Currency Format

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. We would
be passing props in so that the component is flexible and can be used anywhere.The mentioned
components should be functional as desired. Since in this component we have a new reducer
command “REMOVE_FROM_BASKET”, let’s add it in reducer.js
Here, we defined the “REMOVE_FROM_BASKET” command for the reducer. This will
remove specific product by ID from the Basket.

We use the arr.splice() method is an inbuilt method in JavaScript used to modify the contents of
an array by removing the existing elements and/or by adding new elements.

Figure 14. syntax of splice()

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.

Now the checkout page is ready to use and it includes all the functionalities
required.

19 | M ini P r o j e c t 2 0 2 0 - 2 0 2 1
2.8. DEPLOYING APP
To deploy a production version of the Amazon Clone, we need to set up
Firebase hosting. So let’s go to console and type the command.

Figure 15 .Command to login into firebase in terminal

 Select to use an existing project

 Type in the public directory to be “build”
 Allow to rewrite all URLs to index.html
Run this in console:

Figure 16.Command to build your app

This will basically ask React to build your app so that you can run this in production. After the
build has completed, type this command to finally deploy the application on the internet.
Next , run this

Figure 17 .Command to get the URL

After completion completed this, you should get an URL at the end of the process. This is the
URL where your app is hosted online.

20 | M ini P r o j e c t 2 0 2 0 - 2 0 2 1
 3.RESULTS
3.1 . HOME PAGE AND NAV BAR

HOME PAGE:
In this home page we have the navigation bar,banner and the product components with add to
basket functionality.Here we can display as many products as we want .When we click on the
amazon icon it redirects to the same page.

Figure 18. Home Page

NAVIGATION BAR:
This one contains the main basket icon and tracks the login and logout functionality.Basket icon
pulls the elements from this page and store them in checkout page

Figure 19.Navigation Bar

21 | M ini P r o j e c t 2 0 2 0 - 2 0 2 1
3.2 . LOGINPAGE

In this page when we click on amazon icon we will be redirected back to the home page .Login
functionality is authenticated by firebase ,if we give the wrong email alert message will show up
.If give the correct one we can either create the account or existing user means we can just sign
in this proceeds to the amazon home page with your email address beside hello and the sign in is
changed into sign out option.

Figure 20. Login Page

After login :

Figure 18. After login the email appears beside hello

22 | M ini P r o j e c t 2 0 2 0 - 2 0 2 1
 3.2 . CHECKOUT PAGE

So ,this the checkout page looks like, the product components are attached with
remove from basket functionality.The total of all the products is available .

Figure 21. Checkout Page

When we click proceed to checkout this will open

Figure 22. Proceed to checkout Page

23 | M ini P r o j e c t 2 0 2 0 - 2 0 2 1
4. Conclusions

We have succeeded in building our Amazon clone using the Context API for state
management and 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

So, in this project we will learn ReactJS completely,this simple projects helps you
to boost up your energy and makes you good at coding.The technologies we have
used are absolutely so simple to understand and also to work with.Definitely this
will be a road map to lot of other projects in future.

24 | M ini P r o j e c t 2 0 2 0 - 2 0 2 1
5. RFERENCES

1. Cory Gackenheimer, Introduction to React, Apress, Berkeley, CA, 978-1-4842- 1246-2, 2015

2. React. (2019). ReactDOMServer. [online] Available at https://reactjs.org/docs/react-

domserver.html .Accessed February, 2021

3. React. (2019). ReactJS definition. [online] Available at

https://www.w3schools.com/REACT/default.asp .Accessed February, 2021

4. React. (2019). Components and Props. [online] Available at

https://reactjs.org/docs/components-and-props.html.Accessed February, 2021

5. Medium. (2019). Which node package manager should I use. [online] Available at
https://medium.com/@timothy.kaing/which-node-package- manager-should- i-use-2019-
ac3d324a83e5 .Accessed February, 2021

6. Medium(2020) .Amazon Clone using ReactJS — The Ultimate Guide [online] Available at
https://medium.com/cleverprogrammer/amazon-clone- using-react-the-ultimate-guide-
fba2b36f3458.Accessed February, 2021

7. Node.js docs. [Online]; Available at https://nodejs.org/en/docs/ . Accessed February, 2021

8. F. Shahzad, T. R. Sheltami, E. M. Shakshuki, and O. Shaikh. A review of latest web tools and
libraries for state-of-the-art visualization. Procedia Computer Science, 98:100–106, 2016

9. React: A JavaScript library for building user interfaces website. [Online]. Available at
https://reactjs.org/docs/getting-started.html Accessed February, 2021

10. Y. Xing, J. Huang, and Y. Lai. Research and analysis of the front-end frameworks and
libraries in e-business development. pages 68–72, 2019.

11. . Kristi Castro. Why do we need a database. [Online]; Available at

https://www.tutorialspoint.com/ Why-do-we-need-a-Database. Accessed February, 2021

25 | M ini P r o j e c t 2 0 2 0 - 2 0 2 1