CHAPTER 1: INTRODUCTION

1.1 INTRODUCTION TO JAVASCRIPT

JavaScript (js) is a light-weight object-oriented programming language which is used by several

websites for scripting the webpages. It is an interpreted, full-fledged programming language that
enables dynamic interactivity on websites when applied to an HTML document. It was introduced
in the year 1995 for adding programs to the webpages in the Netscape Navigator browser. Since
then, it has been adopted by all other graphical web browsers. With JavaScript, users can build
modern web applications to interact directly without reloading the page every time. The traditional
website uses js to provide several forms of interactivity and simplicity. Although, JavaScript has
no connectivity with Java programming language. The name was suggested and provided in the
times when Java was gaining popularity in the market. In addition to web browsers, databases such
as CouchDB and MongoDB uses JavaScript as their scripting and query language.

1.2 FEATURES OF JAVASCRIPT

There are following features of JavaScript:

1. All popular web browsers support JavaScript as they provide built-in execution
environments.

2. JavaScript follows the syntax and structure of the C programming language. Thus, it is a
structured programming language.

3. JavaScript is a weakly typed language, where certain types are implicitly cast (depending
on the operation).

4. JavaScript is an object-oriented programming language that uses prototypes rather than

using classes for inheritance.

5. It is a light-weighted and interpreted language.

6. It is a case-sensitive language.

7. JavaScript is supportable in several operating systems including, Windows, macOS, etc.

1
1.3 History of JavaScript

In 1993, Mosaic, the first popular web browser, came into existence. In the year
1994, Netscape was founded by Marc Andreessen. He realized that the web needed to become
more dynamic. Thus, a 'glue language' was believed to be provided to HTML to make web
designing easy for designers and part-time programmers. Consequently, in 1995, the company
recruited Brendan Eich intending to implement and embed Scheme programming language to the
browser. But, before Brendan could start, the company merged with Sun Microsystems for
adding Java into its Navigator so that it could compete with Microsoft over the web technologies
and platforms. Now, two languages were there: Java and the scripting language. Further, Netscape
decided to give a similar name to the scripting language as Java's. It led to 'Javascript'. Finally, in
May 1995, Marc Andreessen coined the first code of Javascript named 'Mocha'. Later, the
marketing team replaced the name with 'LiveScript'. But, due to trademark reasons and certain
other reasons, in December 1995, the language was finally renamed to 'JavaScript'. From then,
JavaScript came into existence.

1.4 Application of JavaScript

JavaScript is used to create interactive websites. It is mainly used for:

o Client-side validation,

o Dynamic drop-down menus,

o Displaying date and time,

o Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm dialog box
and prompt dialog box),
o Displaying clocks etc.

1.5 JavaScript Example

1. <script>  
2. document.write("Hello JavaScript by JavaScript");  
3. </script>  

2
1.6 REACT JS

React is one of the most widely used open-source, declarative, efficient, and component- based
JavaScript libraries that helps to build interactive UI where all the components are reusable and
can be applied for multiple projects. It was developed by Facebook's engineer and is continuously
handled and updated by Facebook and the users around the globe. React is mainly concerned with
re-rendering data of the DOM. It requires additional libraries for the management, route handling
and API interaction. React uses a declarative paradigm that makes it easier to reason about your
application and aims to be both efficient and flexible. It designs simple views for each state in
your application and React will efficiently update and render just the right component when your
data changes. The declarative view makes your code more predictable and easier to debug. The
main objective of ReactJS is to develop User Interfaces (UI) that improves the speed of the apps. It
uses virtual DOM (JavaScript object), which improves the performance of the app. The JavaScript
virtual DOM is faster than the regular DOM. We can use ReactJS on the client and server-side as
well as with other frameworks. It uses component and data patterns that improve readability and
helps to maintain larger apps. Comparing with another front-end framework i.e. Angular, React
uses views that make code more predictable and easier to debug. It also helps to update DOM
efficiently and render the right components when the data changes.

1.7 Features of React JS: -

There are unique features are available on React because that it is widely popular.

 Use JSX: It is faster than normal JavaScript as it performs optimizations while translating
to regular JavaScript. It makes it easier for us to create templates.
 Virtual DOM: Virtual DOM exists which is like a lightweight copy of the actual DOM.
So for every object that exists in the original DOM, there is an object for that in React
Virtual DOM. It is exactly the same, but it does not have the power to directly change the
layout of the document. Manipulating DOM is slow, but manipulating Virtual DOM is fast
as nothing gets drawn on the screen.
 One-Way Data Binding: This feature gives you better control over your application.
 Component: A Component is one of the core building blocks of React. In other words, we
can say that every application you will develop in React will be made up of pieces called
components. Components make the task of building UIs much easier. You can see a UI
broken down into multiple individual pieces called components and work on them
independently and merge them all in a parent component which will be your final UI.

3
 Performance: React.js uses JSX, which is faster compared to normal JavaScript and
HTML. Virtual DOM is less time taking procedure to update webpages content.

Fig: - 1. A simple React Component

The above snippet Figure 6 implement a render() method that takes input data and renders the
display. A div tag with the content of plain text "Hello, John" will appear in a DOM-element with
the id "mydiv". The above code uses an HTML like syntax called JSX which is a syntax extension
to JavaScript. Input data that is passed into the component can be accessed by render () via
this.props() (Elboim, 2017).

React components are small, reusable pieces of code. They return a React element to be rendered
to the page. It is also a normal JavaScript function that takes input or props which is mean to be
properties. Components can return other components, arrays, strings, and numbers and, can be
either functional or class-based, with or without states. Normally, functional components do not
have any states in them while stateful components can holds states and pass on properties to the
child-components. Class components can have lifecycle methods and hence they can make
changes to the UI and data. There is a rule that is applied for writing component names. The
component name should always start with a capital letter (Elboim, 2017).

1.8 REACT HOOKS

Hooks were introduced to React in version 16.8 that enable the execution of custom code in a base code.
Reacts Hooks are special functions that allow to “hook into” its core features. It provides an alternative to
write class-based components by allowing to handle state management from functional components.

4
Even though component-oriented architecture allows reusing views in the application, one of the
biggest issues a developer meets us how to use the logic located in the required component state
between other components. Where there are components with similar state logic, but no good
solutions to reuse the logic, the code in the constructor and life cycle methods can be duplicated.
To fix this developer usually use high-order components and render props (Introducing Hooks –
React, 2020).

1.9 Why the need for Hooks?

There are multiple reasons responsible for the introduction of the Hooks which may vary
depending upon the experience of developers in developing React product. Some of them are as
follows:

 Use of ‘this’ keyword: The first reason has to do more with JavaScript than with React
itself. To work with classes one needs to understand how ‘this’ keyword works in
JavaScript which is very different from how it works in other languages. It is easier to
understand the concept of props, state, and uni-directional data flow but using ‘this’
keyword might lead to struggle while implementing class components. One also needs to
bind event handlers to the class components. It is also observed by the React developers
team also observed that classes don’t concise efficiently which leads to hot reloading
being unreliable which can be solved using Hooks.

 Reusable stateful logics: This reason touches advance topics in React such as Higher-
order components (HOC) and the render props pattern. There is no particular way to
reuse stateful component logic to React. Though this problem can be solved by the use of
HOC and render props patterns it results in making the code base inefficient which
becomes hard to follow as one ends up wrapping components in several other
components to share the functionality. Hooks let us share stateful logic in a much better
and cleaner way without changing the component hierarchy.

 Simplifying complex scenarios: While creating components for complex scenarios such

as data fetching and subscribing to events it is likely that all related code is not organized
in one place are scattered among different life cycle methods. For example, actions like

5
data, fetching are usually done in componentDidMount or componentDidUpdate,
similarly, in case of event listeners, it is done in componentDidMount or
componentWillUnmount. These develop a scenario where completely different codes like
data fetching and event listeners end up in the same code-block. This also makes
impossible to break components to smaller component because of stateful logic. Hooks
solve these problems by rather than forcing a split based on life-cycle method Hooks to
let you split one component into smaller functions base on what pieces are related.

1.10 Important things to remember while using hooks:

 Hooks are available for React version 16.8 or higher.

 Hooks are completely opt-in. Use it partially for a few components or base the whole
project on it as per your needs without rewriting any existing code.
 Hooks don’t contain any breaking changes and are 100% backward-compatible.
 The react team has no plan to remove classes from React.
 Hooks can’t be used inside class components and but the app can definitely mix class-
based components and functional components with Hooks.
 Hooks doesn’t violate any existing React concepts. Instead, Hooks provide a direct API
to react concepts such as props, state, context, refs and life-cycle.

1.11 React Hooks Installation:

To use React Hooks, we need to run the following commands:

$npm install [email protected] –save

$npm install [email protected] –save

The above command will install the latest React and React-DOM alpha versions which support
React Hooks. Make sure the package.json file lists the React and React-DOM dependencies as
given below.

“react”:”^16.8.0-alpha.1”,

“react-dom”:”^16.8.0-alpha.1”,

6
Hooks are aiming to solve the issues allowing writing functional components which have access to
state, context, lifecycle methods, refs etc. without writing React Classes (Introducing Hooks –
React, 2020). An example of React Hooks can be observed in Figure below.

Fig: - 2. A Simple React Hook component.

In the above code, the class Component is replaced with a functional component, the local state is
removed and instead the new “useState” function is used. Hooks are used in functional component
to use state, useState() hook is used, while to replace life cycle methods like
componentDidMount() or componentDidUpdate(), useEffect() hook is used.

1.12 REACT PROMISES

In React, there are various ways to work with asynchronous data, but using Promises is one of the
most popular ones. A Promise is an object that represents an asynchronous operation. It stands for
a value that will be resolved in the future, in other words. Like promises in other programming
languages, React promises work similarly. An object that depicts the outcome of an asynchronous
operation is called a promise which helps in managing asynchronous actions like data fetching.
Working with Promises is simple with React because of its integrated Promise API. A promise is
in a pending condition when it is created. This indicates that the async procedure is still ongoing.
Depending on the outcome of the async operation, the promise will either be fulfilled or denied.
Upon successful completion of the async procedure, the promise will be fulfilled. The promise
will be turned down if the async procedure fails. By using promises, we can see which functions
are interdependent, making the code easier to comprehend and debug without having to go through
a long list of nested function calls.

7
1.13 How does Promises work in React.js?

React has a built-in way of working with Promises called the Promises rendering model. This
model allows you to work with async data in a declarative way. In this model, you only need to
worry about three things –

 The loading state: This is when data is being fetched from the async operation.
 The error state: This is when there was an error fetching the data.
 The data itself: This is the resolved value from the async operation.

This may seem like a lot, but Promises make it easy to handle all of these states without getting
bogged down in details. When we make a request, we do not always know when the response will
come back. With Promises, we can write code that will wait for the response to come back, and
then do something with the data. What Do promises usually look like in JavaScript? See this
example –

We give a "executor function"—a function that will be called in the future when the Promise is
called—when we create a promise. Resolve and Reject are the two parameters for the executor
function. The Promise can be resolved using the resolve function and rejected using the reject
function. The following example shows how to use a Promise with then and catch in React –

When the promise is resolved, the .then() method runs and the Promise's outcome is passed on to it
(which is the data that was loaded from the external source), thereafter runs whatever function is
inside the then() method. If the promise fails, then the .catch() method runs which catches the error
and is often used in React.js for error handling.

8
1.14 Different Ways to use Promises
There are a few different ways to use Promises in React.js like with fetch() and async/await. Both
of these methods have the same goal - to make working with asynchronous code simpler and more
efficient. When you make an API call, you usually have to wait for the server to respond before
you can do anything with the data. This can lead to issues if you're not careful, but with Promises
you can avoid these problems by waiting for the API call to finish before you try to use the data.
Another way you can use Promises is to handle errors. When you make an API call, there's always
a chance that it might fail, in that case, you can always use the .catch() method to handle the
errors.

1.15 Why use Promises?

In short, they make dealing with asynchronous code in JavaScript much easier. Async data is data
that is not available immediately. It can take a little bit of time to load. When working with
asynchronous data in React, there are often times when you need to wait for a certain condition to
be met before you can continue. This is where Promises come in. Promises are a great way to
handle asynchronous operations in React.js, and they can help you create more responsive and
scalable applications. With Promises, you can avoid the callback hell that can often occur when
working with asynchronous code.

There are a few benefits of using Promises in React.js –

 Manage asynchronous code in a more efficient and organized way.
 Avoid "callback hell" and keep your code clean and readable. Promises can also be
chained together, so you can easily create complex asynchronous interactions.
 Help you load data from multiple sources in parallel and they can make it easier to cancel
async requests.

1.16 REACT REDUX

As the data is stored in states among components in React, handling big scale application data
becomes difficult and gets complicated. These states can include server responses and data, as well
as locally created data. UI state is also increasing in complexity, so as we need to manage active

9
routes, selected tabs, spinners, pagination controls and so on. To tackle all the big complications
Redux is applied (Redux, 2020).

Redux is composed of 3 core principles; state to store necessary data, action to dispatch changes
made to the state and a reducer to make changes. When a user creates an event, actions are
dispatched to the central store. Actions are the only information that the store receives from the
user. This makes reducers fire a method on the previous state depending upon the action received
from the store. It also decides the fate of the old state. As states in redux are changing, an action is
dispatched containing the payload and reducer takes the role of making the changes to our state.
All the state in an application is stored in Redux as a single object. Reducers take an action and
decide what method to be implemented or deleted depending upon the action that is being
dispatched. This is the only way the new state gets produced every time (Redux, 2020).

Since, the data is stored as states among components in React, handling big scale application data
becomes difficult. So to tackle that ambiguity, Redux was made. Redux manages the states in
JavaScript applications. Even though React has brought their own state management tools in the
form of hooks, Redux being old practise and stable one at that, this tool was chosen for this
project. It can also be used for other javascript frameworks and libraries, like angular and vie.

It is itself extremely lightweight at memory size 2KB with all the dependencies, so it doesn’t quite
increase the total applications asset size. It was inspired by Facebook’s Flux and Elm to simplify
the MVC structure, specifically the Model and View relationship when the application size is
scaled higher.

It is modelled on functional programming concept. Redux allows us to store all the states in one
store and components can fetch them when required. Like other frameworks, React comes with
internal state management system as well. It is not fully stable during the creating of this project as
well as it is also good at only handling smaller scale application with smaller amount of states
across smaller components.

With larger applications state management is better with Redux. When an app has components that
share states or data, a separate handler or store for state to live in would be a great idea. Hence
Redux implements that logic in providing states among components without linearly depending on
the hierarchy. Generally, state has to live in the parent component in React for children to fetch, so
ideally sibling components can’t access the states among them. From parents to child it has to be

10
passed on as props while Redux allows direct access to the central store, from where you can fetch
all the current states.

Fig:- 3. Redux State Management

1.17 Reducers in Redux

In redux, the reducers are the pure functions that contain the logic and calculation that needed
to be performed on the state. These functions accept the initial state of the state being used and
the action type. It updates the state and responds with the new state. This updated state is sent
back to the view components of the react to make the necessary changes. Basically, In short, we
can say that Reducer’s work is to return the updated state and to also describe how the state
changes. Reducers govern how the state of an application is changed upon an action is dispatched
containing a payload. All the application state is stored in Redux as a single object. Reducers takes
an action and decide what method is to be fired depending upon the action that was dispatched.
Hence a new state is produced every time. Just like array.reduce in javascript, reducers take one
object and one call back and return one object or array at the end, hence its called reducer. Same
object or state passed through reducers callback yields the same new state every time because no
additional callback is applied since they are usually passed as action conditions. Instead of
mutating the old state a new state is created by the reducers plain functions.

11
1.18 Redux Store

A store is an immutable object tree in Redux. A store is a state container which holds the
application's state. Redux can have only a single store in your application. Whenever a store is
created in Redux, you need to specify the reducer. Let us see how we can create a store using the
createStore method from Redux. One need to import the createStore package from the Redux
library that supports the store creation process as shown below −

A createStore function can have three arguments. The following is the syntax –

A reducer is a function that returns the next state of app. A preloadedState is an optional argument
and is the initial state of your app. An enhancer is also an optional argument. It will help you
enhance store with third-party capabilities.

A store has three important methods as given below-

1.getState:
It helps you retrieve the current state of your Redux store. The syntax for getState is as follows −
Store.getState()
2.dispatch:
It allows you to dispatch an action to change a state in your application.The syntax for dispatch is
as follows-
Store.dispatch({type:’ITEMS_REQUEST’})
3.subscribe:
It helps you register a callback that Redux store will call when an action has been dispatched. As
soon as the Redux state has been updated, the view will re-render automatically. The syntax for
subscribe is as follows-
Store.subscribe(()=>{console.log(store.getState());})

12
Note that subscribe function returns a function for unsubscribing the listener. To unsubscribe the
listener, we can use the below code-
Const unsubscribe = store.subscribe(()=>{console.log(store.getState());});
unsubscribe();
The Redux store is the equivalent of a state tree. The only way the state tree is updated is by
dispatching an Action which passes an object to the Reducer and returns a new state. By ensuring
data is manipulated in this fashion, the logic of the application becomes easier to manage and
reason with especially when a large number of UI elements are changing (often the case in large
web application). Furthermore, the application is more predictable and debugging is a matter of
logging the state tree which is considered the single source of truth in a unidirectional data flow
architecture. If the application is not behaving the way it is expected to behave, the logged state
tree most likely will be incorrect (can be caused by an erorr in the Reducer logic).

1.19 REACT AXIOS

In ReactJS, Axios is a library that serves to create HTTP requests that are present externally. It is
evident from the fact that we may sometimes in React applications need to get data from the
external source. It is quite difficult to fetch such data so that they can be normally shown on the
website. Thus, it helps in retrieving the data thereby adding it to the state to facilitate the
application whenever the requirement arises.
Additionally, react Axios is very easy to modify and is quite lightweight. It also works great with
many other frameworks present today. The main purpose of using Axios is to get support for
request and response interception, conversion of data into JSON format, and transform it. It also
helps you in protecting XSRF forgery by default while you request cross-site access.
Axios is promise-based, which gives you the ability to take advantage of JavaScript’s async and
await for more readable asynchronous code.
It lets you make use of asynchronous readable code present in Javascript. It can be easily used to
cancel or intercept requests with the help of the in-built feature of client-side protection of forgery
across the cross-site request.

13
Fig:- 4. A simple Axios Component

In the above figure Axios library is used. Axios is a very popular JavaScript library you can use to perform
HTTP requests, that works in both Browser and Node. js platforms. It supports all modern browsers,
including support for IE8 and higher. It is promise-based, and this lets us write async/await code to perform
XHR requests very easily. The link passed by the user will update automatically the user will not need to
refresh the page again and again.

Axios is a famous JS library that allows performing HTTP requests in both computers via NodeJS and
directly on browsers. It is supported by majority of browsers and is a better alternative for reacts own Fetch
API. Axios is promise based library which enables performing asynchronous XHR requests.

Axios over nativer Fetch API comes with a lot of perks, some are listed below-

1. Axios supports older browsers without the need of polyfill unlike fetch.
2. It has a way to abort a request as well set response timeout.
3. Has a in-built CSRF protection and includes upload progress.
4. Allows JSON data transformation and most importantly works with node.

1.20 Application Programming Interface (API)

The term API stands for application programming interface, a concept that applies everywhere

from command-line tools to enterprise code, microsevices, and cloud-native architecture. An API
is an interface that software developers use to programmatically interact with software
components or resources outside of their own code. An even simpler definition is that an API is

14
the part of a software component that is accessible to other components. Unless you write every
line of code from scratch, you will interact with external software components, and each of these
will have its own API. Even if you do write all of your code from scratch, a well-designed
application should have internal APIs to help organize the code and make its components more
reusable. The API is a key concept in software development, from simple programs to the most
advanced design and architectural considerations.

An API is the part of a software program that is accessible to other programs. It is the external area
of a software component. For this reason, you might see a reference to the API surface area of a
program. The API surface area is the outside layer of the program or component, like the wall of a
cell, as shown in figure below.

Fig:-5. An App component with its API

When one program is used by another program, we call the first program the provider and the
second one the client. The part of the provider that is accessible to clients is the API. This
arrangement is found in software applications and systems of almost every type. What is
consistent is that the API is a way for clients to make calls to the provider. The API defines a
known range of allowable inputs and associated outputs to the component. Therefore, the API
defines the protocol for communicating with a component. All but the most trivial software uses
capabilities provided by other components. A software program calls a component's API to access

15
its capabilities. In addition to using other components, most software is used as a component by
other programs, as shown in Figure below.

Fig:- 6. Multiple components interacting via their APIs

You might notice some similarities between APIs and user interfaces, or UIs. This makes sense
because both are interfaces. An interface is a means of interacting with a system's
internals. Generally, the interface’s job is to simplify and concentrate internal capabilities into a
form that is useful for the client. What is different about APIs and UIs is that they interface with
different types of clients. On a laptop, the UI consists of input devices such as a keyboard and
mouse and output devices such as a monitor and keyboard. The client is the person using the
laptop. In addition to the operating system, many of the programs running on the laptop also
present a UI, which the user can interact with via the laptop's input and output devices. For
example, the web browser presents a set of visual elements on the screen that can be controlled
with the mouse and keyboard.

1.20 The browser API

Now, let's think about that web browser. We know that a browser is used to open a variety of web
pages. Most web pages load JavaScript as part of their makeup. The browser runs the JavaScript to
help display the page. In order to work, the JavaScript program requires access to the browser's
capabilities. In this case, the JavaScript program is the API client and the browser is the API
provider. The browser is a provider that offers web browsing capabilities that the JavaScript

16
program accesses via a programming interface, the browser's API. For example, if you
type F12 right now and open a JavaScript console, you can type in a small JavaScript program to
interact with your browser’s API. If you enter the code in Listing 1 into the console, you’ll begin
to see output.
Listing 1. Tracking mouse in browser console
window.onmousemove = function(e){console.log(“mouse cursor:”,e.clientX, e.clientY)}
Note that after you start seeing console output, you can unset this settings by entering:
Window.onmousemove = null

The point of this example is that the window object is a part of the browser’s API. Also,
the onmousemove function (or method) is a member of the window object. In turn, it is part of the
window object’s API. So, once you are in the code, you can start to see that APIs are
everywhere. If you want to use a component's functionality, you can access it through the
component's API.

Another observation is that APIs exist at different levels of a program and contain each other. The
window API is in a sense nested inside the browser API. Let’s think a bit more about how the
browser does its job. This will help us get a feel for a couple of other kinds of API. For one thing,
how does the browser know the mouse's position? It registers with the operating system via an
API. The operating system then loads a mouse driver, which offers a standardized API to provide
streaming information about what the mouse is doing. (The driver itself, if you keep digging,
ultimately relies on low-level hardware and software interfaces—a third kind of interface along
with UI and API.)

1.21 APIs in libraries, packages, and modules

The browser console is a specialized context in that all the libraries are preloaded by the runtime
environment. It's more common for libraries to be explicitly loaded by the programmer. How the
loading happens varies by programming language, but whenever you see import, include, or
require in  your output, it means the current program is pulling in another program's API.

All but the most trivial programs consist of language-level expressions and constructs (like ifs,
loops, and operators) used in conjunction with calls to the APIs found in other packages. In turn,
each program is also a component that can potentially be included and used by other programs.

17
Modules, packages, and libraries are all the same notion, broadly speaking: they are collections of
code that can be included. The sum of their publicly visible parts—classes, objects, methods,
functions, variables, and so on—is the surface area of the API in that collection. At the highest
level, we could divide APIs into two types: local and remote. Remote APIs are useful in that they
don’t require updates to the code on client devices, they can be scaled independently, and they
present a standardized API form that any client can call provided that it is authorized. In general,
we could say that remote APIs (also known as services) are strongly decoupled and offer
a standard protocol (HTTP/S over TCP) that works regardless of the implementation stack behind
them.

A microservices architecture essentially uses remote APIs for activities that were traditionally
done by local API. A microservices architecture decomposes an application into components that
are remotely available. The concept of an API gateway is specific to the microservices
architecture. In an API gateway, a single point of contact is defined on the network for
orchestrating routes to specific services. This allows for certain benefits (like authentication and
rate limiting across services), and as such operates as a kind of interface of interfaces. The internet
is basically a universe of interacting remote APIs. Everything that runs on a device is a local
API. Servers are collections of local APIs that conspire to provide a remote API. Clients are
collections of local APIs that work together to consume remote APIs. Middleware is a collection
of local APIs that both conspire to provide a remote API and work together to consume other
remote APIs. Across all platforms and languages, there are different ways to control what is
visible and how it is used by client code. API design pays much attention to the idea
of information hiding, which is the linchpin of maintainable software. Good software design
depends on it. The idea is to write software components that do everything required of them with
the smallest possible point of contact. As developers, we want to provide only the most essential
information about a component's internal workings. This concept applies to everything from a tiny
function—whose signature is an API writ small—to powerful remote services. Good APIs are the
opposite of spaghetti code. In spaghetti code, the flow of execution and dependency is very hard to
follow, which makes code hard to maintain and debug. In good API design, software components
behave much like mechanical components. They perform a particular job behind a well-
understood interface. You can deal with the component as a single entity. The alternator on an
automobile does one thing: it creates a charge. If it fails, the mechanic can isolate that part. Just as

18
important, the rest of the car only needs to know the belt is going around the alternator pulley. In
this analogy, the pulley and the alternator's electrical terminals would be the alternator's API.

1.22 NODE.JS
Node.js is the currently most popular open-source web server environment that allows JavaScript
code to be able to run outside of web browsers. It creates a dynamic web page by helping
JavaScript to write command-line tools and server-side scripting before the page is sent to the
user's web browser (Express/Node introduction, 2020). Node.js is suitable for the foundation of a
web library or framework because it has an HTTP a first-class citizen in Node.js, designed with
streaming and low latency. It uses a Google Chromes v8 engine to execute the JavaScript. NodeJS,
in general, makes developing cross-platform, server-side and networking applications much easier
(Chettri, 2016).

Node has earned a good reputation in the tech industry in a short period. It plays a big role in the
technology stack of high-profile companies who depend on its unique benefits. Microsoft Azure
users are provided with end-to-end JavaScript experience for the development of a whole new
class of real-time applications. The locking and concurrency issues of eBay were freed by Node’s
multi-threaded asynchronous I/O. The entire mobile software of LinkedIn is completely built-in
Node (Martonca, 2015). PayPal after shifting to Node from Java for their existing projects saw
significant improvements over Java. The re-written app using Node was delivered in half the time
with less manpower and fewer lines of code. Hence, PayPal saw their development and product
performance increase dramatically after switching to Node from Java (Anderson, 2014). One great
advantage of NodeJS is the event-driven architecture which allows program code to be executed
asynchronously. The most common tasks for servers include answering queries, storing data in a
database, reading files from hard drive, and establishing connections to other network components.
All these actions are grouped together under the category I/O. In a programming language like C
and Java, I/O is executed synchronously. This means that tasks are performed one at a time and
moves to the next task after completion of the first task. However, Node uses an asynchronous I/O,
with which read and write operations can be delegated directly to the operating system or
database. This makes possible for many I/O tasks to be carried out parallel to one another, without
any blockage.

19
In some cases, this can prove to be a great advantage when it comes to the speed of the NodeJS
and JavaScript-based applications.

1.23 Prerequisites
 Ensure that Node.js is installed on your development machine. This tutorial uses Node.js
version 10.19.0.
 The Node.js platform supports creating web servers out of the box. To get started, be sure
you’re familiar with the basics of Node.js.

1.24 Why to use NodeJS?

There are many reasons for which we prefer using NodeJs for the server side of our application,
some of them are discussed in the following:

 NodeJs is built on Google Chrome’s V8 engine, and for this reason its execution time is
very fast and it runs very quickly.
 There are more than 50,000 bundles available in the Node Package Manager and for that
reason developers can import any of the packages any time according to their needed
functionality for which a lot of time is saved.
 As NodeJs do not need to wait for an API to return data , so for building real time and data
intensive web applications, it is very useful. It is totally asynchronous in nature that means
it is totally non-blocking.
 The loading time for an audio or video is reduced by NodeJs because there is better
synchronization of the code between the client and server for having the same code base.
 As NodeJs is open-source and it is nothing but a JavaScript framework, so for the
developers who are already used to JavaScript, for them starting developing their projects
with NodeJs is very easy.

1.25 Features of NodeJS

 Asynchronous in Nature and Event driven: The servers made with the NodeJs never waits for
the from an API. Without waiting for the data from the API, it directly moves to the next API.
So all the APIs of NodeJS are totally non-blocking in nature. In order to receive and track all

20
the responses of the previous API requests, it follows an event driven mechanism. Hence we
can say that all the NodeJs API are non-blocking in nature.
 Single Threaded Architecture: With event looping, a single threaded architecture is followed
by NodeJs and for this architecture makes NodeJs more scalable. In contrast to other servers,
limited threads are created by them for processing the requests. Whereas for the event driven
mechanism, the NodeJS servers reply in a non-blocking or an asynchronous manner and for
this reason NodeJS becomes more scalable. If we compare NodeJs with other traditional
servers like Apache HTTP servers, then we can say NodeJs handles a larger number of
requests. A single threaded program is followed by NodeJS and this allows NodeJs to process
a huge amount of requests.
 Scalable: Nowadays, scalable software is demanded by most of the companies. One of the
most pressing concerns in Software Development is addressed by NodeJs and that is
scalability. Concurrent requests can be handled very efficiently using NodeJs. A cluster
module is used by NodeJs for managing the load balancing for all the active CPU cores. The
most appealing feature of NodeJs is that it can partition the applications horizontally and this
partition procedure is mainly achieved by it due to the use of child processes. Using this
feature, the distinct app versions are provided to the different target audiences and also for
customization it allows them for catering to the client preferences.
 Quick Execution time for code: V8 JavaScript runtime motor is used by NodeJs and this is
also used by Google chrome. A wrapper is provided for the JavaScript by the hub and for that
reason the runtime motor becomes faster and for this reason inside NodeJs, the preposition
process of the requests also become faster.
 Compatibility on the cross platforms: Different types of systems like Windows, UNIX,
LINUX, MacOS and other mobile devices can use NodeJs. For generating a self-sufficient
execution, it can be paired with any appropriate package.
 Uses JavaScript: From an engineer's perspective, it is a very important aspect of NodeJs that
this framework uses JavaScript Most of the developers are familiar with JavaScript, so for
them it becomes very easier to grab NodeJs.
 Fast Data Streaming: The processing time of the data that have been transmitted to different
streams takes a long time. Whereas for processing the data, NodeJs takes a very short amount
of time and it does it at a very fast rate. NodeJs saves a lot of time because the files are
processed and uploaded simultaneously by NodeJs. So as a result, the overall speed of data
and video streaming is improved by NodeJs.

21
 No Buffering : The data is never buffered in NodeJs application.

1.26 Node.JS Architecture

Now that we established what is Node, let’s dig into its architecture. Node.js operates on a single-
thread, allowing it to handle thousands of simultaneous event loops. Here’s a diagram that
illustrates Node.js architecture.

Fig:- 7. Node.Js Architecture

1.26 Parts of Node.JS

22
Fig:- 8. Parts of Node.js

Now let’s go through each part of Node.js to get a better understanding of the server-side platform
as a whole.
1. Modules:- Modules are like JavaScript libraries that can be used in a Node.js application to
include a set of functions. In order to include a module in a Node.js application, use
the require() function with the parenthesis containing the name of the module. Node.js has many
modules that provide basic functionality needed for a web application. Some of them are
mentioned in this table.

Table No:- 1. Node.js modules table

2. Console:- The console is a module that provides a method for debugging that is similar to the basic
JavaScript console provided by internet browsers. It prints messages to stdout and stderr.
3. Cluster:- Node.js is built-on on the concept of single-threaded programming. Cluster is a module
that allows multi-threading by creating child processes that share the same server port and run
simultaneously.
4. Global: Global objects in Node.js are available in all modules. These objects are functions,
modules, strings, etc. Some Node.js global objects are mentioned in the table below:

23
Table No:- 2. Global objects table

5. Error Handling:- Node.js applications experience four types of errors.

Fig No:- 9. Node.js errors

Errors in Node.js are handles through exceptions.
6. Streaming:- Streams are the objects that let you read data or write data continuously. There are four types
of streams:
1. Readable: These are the types of streams from which data can be read
2. Writable: These are the types of streams to which data can be written
3. Duplex: These are both readable and writable streams
4. Transform: Streams that can manipulate the data while it is being read or written
7. Buffer:- Buffer is a module that allows the handling of streams that contain only binary data.
An empty buffer of length '10' can be created by this method:
Var buf = Buffer.alloc(10);

8. Domain:- The domain module intercepts errors that remain unhandled. Two methods are used
for intercepting these errors:
1. Internal Binding: Error emitter executes its code inside the run method
2. External Binding: Error emitter is explicitly added to a domain via its add method

24
9. DNS:- DNS module is used to connect to a DNS server and perform name resolution by using
the following method:
dns.resolve();

DNS module is also used to performing name resolution without a network communication by
using the following method:
Dns.lookup();
10. Debugger:- Node.js includes a debugging utility that can be accessed by a built-in debugging
client. Node.js debugger is not feature-packed but supports the simple inspection of code. The
debugger can be used in the terminal by using the 'inspect' keyword before the name of the
JavaScript file. In order to inspect a file—myscript.js, for example—you can follow this
method:
$ node inspect myscript.js

1.27 INTRODUCTION TO FIREBASE

In the era of rapid prototyping, we can get bright ideas, but sometimes they are not applicable if
they take too much work. Often, the back-end is the limiting factor - many considerations never
apply to server-side coding due to lack of knowledge or time.

Firebase is a Backend-as-a-Service(BaaS) which started as a YC11 startup. It grew up into a next-

generation app-development platform on Google Cloud Platform. Firebase (a NoSQLjSON
database) is a real-time database that allows storing a list of objects in the form of a tree. We can
synchronize data between different devices.

25
Fig .10 firebase working.

1.28 History of Firebase

Firebase evolved from Envolve. Envolve is a prior startup founded by James

Tamplin and Andrew Lee in 2011. Envolve provided developers an API which allowed the
integration of online chat functionality into their websites. After releasing the chat service, it found
that the envlove was being used to pass application data, which were not chat messages.
Developers used Envolve to sync application to separate the real-time architecture and the chat
system which powered it. In September 2011, Tamplin and Lee founded firebase as a separate
company. It was lastly launched to the public in April 2012.

Firebase Real-time Database was the first product of firebase. It is an API which syncs application
data across Android, iOS, and Web devices. It gets stored on Firebase's cloud. Then the firebase
real-time database helps the developers to build real-time, collaborative applications.

o In May 2012, after launching the beta, Firebase raised $1.1M in seed funding from Greylock
Partners, venture capitalists Flybridge Capital Partners, New Enterprise Associates, and Founder
Collective.

o In June 2013, the company again raised $5.6M in Series A funding from Flybridge Capital
Partnersandventure capitalists Union Square Ventures.

o Firebase launched two products in 2014, i.e., Firebase Hosting and Firebase Authentication. It
positioned the company as a mobile backend as a service.

o Firebase was acquired by Google in October 2014.

26
o Google promoted Divshot to merge it with the Firebase team in October 2015.

o In May 2016, Firebase expanded its services to become a unified platform for mobile developers.
Now it has integrated with various other Google services, including AdMob, Google Cloud
Platform, and Google Ads, to offer broader products and scale it for developers.
o Google acquired Fabric and Crashlytics from Twitter in January 2017 to add Fabric and Crashlytics
services to Firebase.
o Firebase launched Cloud Firestore in October 2017. It is a realtime document database as the
successor product for the original Firebase Realtime Database.

1.29 Why use Firebase?

o Firebase manages real-time data in the database. So, it easily and quickly exchanges the data to and
from the database. Hence, for developing mobile apps such as live streaming, chat messaging, etc.,
we can use Firebase.
o Firebase allows syncing real-time data across all devices - iOS, Android, and Web - without
refreshing the screen.
o Firebase provides integration to Google Advertising, AdMob, Data Studio, BigQuery DoubleClick,
Play Store, and Slack to develop our apps with efficient and accurate management and
maintenance.

o Everything from databases, analytics to crash reports are included in Firebase. So, the app
development team can stay focused on improving the user experience.

o Firebase applications can be deployed over a secured connection to the firebase server.

o Firebase offers a simple control dashboard.

o It offers a number of useful services to choose from.

1.30 Pros and Cons of Firebase

Firebase has a lot of pros or advantages. Apart from the advantages, it has disadvantages too. Let's
take a look at these advantages and disadvantages:

Pros
 Firebase is a real-time database.
 It has massive storage size potential.
 Firebase is serverless.
 It is highly secure.

27
 It is the most advanced hosted BaaS solution.
 It has minimal setup.
 It provides three-way data binding via angular fire.
 It provides simple serialization of app state.
 We can easily access data, files, auth, and more.
 There is no server infrastructure required to power apps with data.
 It has JSON storage, which means no barrier between data and objects.

Cons
 Firebase is not widely used, or battle-tested for enterprises.
 It has very limited querying and indexing.
 It provides no aggregation.
 It has no map-reduce functionality.
 It cannot query or list users or stored files.

Features of Firebase

Firebase has several features that make this platform essential. These features include unlimited
reporting, cloud messaging, authentication and hosting, etc. Let's take a look at these features to
understand how these features make Firebase essential:

28
Fig 11. Features of firebase

CHAPTER 2

PROJECT PLANNING

29
Netflix-clone Is a software-based application which provide movie watching functionality to the
user by subscription plans.

i. This project aims at serving the user by giving them all latest movies, web-series and tv
shows.
ii. It mainly focuses on providing service of movie rental service where user can watch all
kind of movie and shows with one time subscription.

2.1. Introducing Netflix

Before discusing the theoretical framework, let’s first introduce Netflix itself. Netflix is a video-on
demand streaming service. What makes the company notable is the way it produces and presents
its audio-visual content. An example of this is that it encourages its audience to stay and watch the
next episode. It does this by automatically playing the next episode in a series, or suggesting other
films based on earlier viewing behaviour. By comparison to the streaming companies Hulu and
Amazon Prime, Netflix presents a unique viewing experience. Both Hulu and Amazon Prime have
a similar target audience, and −like Netflix− released original content between 2011 and 2013
(Sharma 2016, 12-14).

2.2 A Background and History of Netflix

Netflix was created in 1997 in Scott’s Valley, California by Marc Randolph and Reed Hastings.
The two had previously worked together at a company called Pure Software. Randolph was
co-founder of Micro Warehouse, a computer mail order company, and later worked As vice
president of marketing at Borland International. Hastings founded Pure Software, Which he had
recently sold for $700 million, and he invested $2.5 million in Netflix for start-up cash.
Hastings thought of the idea for Netflix when he forgot to return a movie by its due date and
Ended up having to pay $40 in late fees. The website launched on April 14, 1998 with a more
Traditional pay-per-rental method. Netflix introduced the monthly subscription method in
September 1998. Since then, Netflix has built its reputation for flat-fee unlimited rentals without
Complications such as due dates, late fees, or shipping and handling fees.
By 2005, Netflix had 35,000 different film titles available, and shipped out 1 million DVDs per
day. In February 2007, the company delivered its one billionth DVD, but still began to move away
from its original core business model of mailing DVDs and introduced video- on-demand via the

30
Internet, Live streaming. Netflix has even licensed and distributed independent films through a
division Called Red Envelope Entertainment.

2.3 Preamble

I, the owners of my project, respect all customers and make them happy with our service. The
main aim of our project is to satisfy customer by providing them business of booking cab online,
maintaining records, and allowing the customer to view his/her records and permitting them to
update their details. The firm handles all the work manually, which is very tedious and
mismatched.

The objectives of our project are as follows:

 To provide the user to watch movies using aur application.

 To provider keep the information of Customer favorite movies list.
 To keep the information of users liked and disliked movies.

2.4 Problem Statement

In today generation people are interest more in OTT platform rather than theaters so we introduce
the Netflix clone. In this project, as this project opens and loads on web page, therefore the web
page consists of buttons for performing features of Netflix Clone, Netflix clone app exhibits the
ability to upload chunk of audio and video content in bulk, concurrently transcoding, the entire
content in an automated fashion! Now within a few taps, you can track, sort, and organize the
content at its totality uncomplicatedly.
Showcase the ideology of the entire video content in a single image with the capacity to create
customized thumbnails. Now come up with terrifically personalized themes photos, thumbnails,
actualized by this stunning feature. Eliminate the nagging occurring of video buffering while
streaming live videos, as our first- rate transcoding services establish pristine video and audio
streaming capabilities. Experience the magic of automated adjustments to compression levels
and quality. To transport streaming live content to media servers, to which are subsequently
transcode into HTTP for seamless streaming across devices and platforms.

CHAPTER 3

31
ANALYSIS AND SYSTEM REQUIREMENT

3.1 Existing and Proposed System

In this project, as this project opens up and loads on web page, therefore the web page consists of
buttons for performing features of Netflix Clone , Netflix clone app exhibits the ability to upload
chunk of audio and video content in bulk, concurrently transcoding, the entire content in an
automated fashion! Now within a few taps, you can track, sort, and organize the content at its
totality uncomplicatedly. Showcase the ideology of the entire video content in a single image with
the capacity to create customized thumbnails. Now come up with terrifically personalized themes
photos, thumbnails, actualized by this stunning feature. Eliminate the nagging occurring of video
buffering while streaming live videos, as our first- rate transcoding services establish pristine
video and audio streaming capabilities. Experience the magic of automated adjustments to
compression levels and quality. To transport streaming live content to media servers, to which
are subsequently transcode into HTTP for seamless streaming across devices and platforms.

3.2 Software & Hardware Requirements

Hardware Requirements:

 Hardware Specification: -Processor Intel Pentium V or higher

 Clock Speed: -1.7 GHz or more
 System Bus: -64 bits
 RAM: -4 GB
 Monitor: -LCD Monitor
 Keyboard: -Standard keyboard
 Mouse: -Compatible mouse

Software Requirements:

 Operating System: -Windows 7 or above

 Front End: -React js
 Back End: -firebase

CHAPTER 4

32
SYSTEM DESIGN AND MODELLING

4.1 Preliminary Design

System design is an abstract representation of a system component and their relationship and
which describe the aggregated functionally and performance of the system. It is also the plan or
blueprint for how to obtain answer to the question being asked. The design specifies various type
of approach.

Database design is one of the most important factors to keep in mind if you are concerned with
application performance management. By designing your database to be efficient in each call it
makes and to effectively create rows of data in the database, you can reduce the amount of CPU
needed by the server to complete your request, thereby ensuring a faster application.

4.2 UML Diagram

The UML stands for Unified modelling language, is a standardized general-purpose visual
modelling language in the field of Software Engineering. It is used for specifying, visualizing,
constructing, and documenting the primary artifacts of the software system. It helps in designing
and characterizing, especially those software systems that incorporate the concept of Object
orientation. It describes the working of both the software and hardware systems.

The UML was developed in 1994-95 by Grady Booch, Ivar Jacobson, and James Rumbaugh at the
Rational Software. In 1997, it got adopted as a standard by the Object Management Group
(OMG).

33
Class Diagram

Fig.13 Netflix class diagram

34
USE CASE DIAGRAM

35
Fig 14. Use case diagram.
4.3 Schema Diagram

Database schema is described as database connections and constraints. It contains attributes. Every
database has a state instances represent current set of databases with values. There are different
types of keys in a database schema. A primary key is a table column that can be used to uniquely
identify every row of the table. Any column that has this property, these columns are called
candidate key. A composite primary key is a primary key consisting of more than one column. A
foreign is a column or combination of columns that contains values that are found in the primary
key of some table. All the attributes of each table are interconnected by foreign key which is
primary key in another column and composite key. Primary key cannot be null. The fact that many
foreign key values repeat simply reflects the fact that its one- to-many relationship. In one-to-
many relationship, the primary key has the one value and foreign key has many values.

Login
User email id Username Password

Customer
User email id Username Password

Fig. 14- Schema Design

36
CHAPTER 5

IMPLEMENTATION

5.1 Implementation of operations

Creating users Account: Here User can create his on account using its Email id and password.

Login: user can login to the platform with same credentials which is used during the registration
process.

Watch Movie: Here The platform is design to facilitate the user with his choices of movies and
shows.

5.2 Algorithm of implementation

Explanation of Algorithm or pseudocode of system:

User Log In:

 Start system
 Enter login name and password
 On clicking the login button
 Connect to database
 Query database to know whether user credentials are correct
 If not, deny access and return login page with an error message
 If correct, check if credentials for administrator
 If yes, allow login
 Set admin session, re-direct administrator to admin login page
 If no, allow login set user session
 Re-direct user to user home page

New user :

 Tap on Get stared

 Enter your email id and password.
 If both email and password are of valid syntax

37
CHAPTER 6

METHODOLOGY & RESULT ANALYSIS

I have built this project using the following tools & techniques:

 React.JS
 React Router.
 React Forms.
 React Hooks.
 use State.
 useContext.
 useEffect.
 useHistory.
 useState.
 Compound Components.
 JSX.
 CSS Modules.
 Firebase.
 VSCode.
 StyleLint.
 EsLint.
 Operating System : windows 7, 10 or latest .
 Memory: 4 and 8GB of RAM

1. To be able to use this react app locally in a development environment you will need the following:
2. You will need Node.js installed on your computer.

3. You will need an account on Firebase and you should create a project on your firebase account
dedicated to this Netflix project.
4. You will need the "./seed.js" file (which I added in this repo) to seed your firebase backend with
movies information. OR you can use your seed file with your information if you want.

38
6.1 CODING

6.1.1 Sign Up page

import React from "react";

import {createUserWithEmailAndPassword, onAuthStateChanged} from "firebase/auth";
import { useState } from "react";
import styled from "styled-components";
import BackgroundImage from "../components/BackgroundImage";
import Header from "../components/Header";
import { firebaseAuth } from "../utils/firebase.config";
import { useNavigate } from "react-router-dom";
export default function Signup() {
const [showPassword, setShowPassword] = useState(false);
const navigate = useNavigate();
const [formValues, setFormValues] = useState({
email: "",
password: "",
});
const handleSignIn= async()=>{
try {
const {email,password}=formValues;
await createUserWithEmailAndPassword(firebaseAuth,email,password)
} catch (err) {
console.log(err)
}
};
onAuthStateChanged(firebaseAuth,(currentUser)=>{
if(currentUser) navigate("/")
})

39
return (
<Container showPassword={showPassword}>
<BackgroundImage />
<div className="content">
<Header login />
<div className="body flex column a-center j -center">
<div className="text flex column">
<h1>Unlimited movies TV shows and more</h1>
<h4>Watch anywhere. Cancel anytime.</h4>
<h6>
Ready to watch? Enter your email to create or restart membership
</h6>
</div>
<div className="form">
<input
type="email"
placeholder="Email address"
onChange={(e) =>
setFormValues({
...formValues,
[e.target.name]: e.target.value,
})
}
name="email"
value={formValues.email}
/>
{showPassword && (
<input
type="password"

40
placeholder="Password"
onChange={(e) =>
setFormValues({
...formValues,
[e.target.name]: e.target.value,
})
}
name="password"
value={formValues.password}
/>
)}
{!showPassword && (
<button onClick={() => setShowPassword(true)}>Get Started</button>
)}
</div>
{showPassword && <button onClick={handleSignIn}>Sign Up</button>}
</div>
</div>
</Container>
);
}
const Container = styled.div`
position: relative;
.content {
position: absolute;
top: 0;
left: 0;

background-color: rgba(0, 0, 0, 0.5);

41
hieght: 100vh;
width: 100vw;
display: grid;
grid-template-rows: 15vh 85vh;
.body{
gap:1rem;
.text {
gap: 1rem;
text-align: center;
font-size: 2rem;
h1 {
padding: 0 25rem;
}
}
.form {
display: grid;
grid-template-columns: ${({ showPassword }) =>
showPassword ? "1fr 1fr" : "2fr 1fr"};
width: 60%;
input {
color: black;
border: none;
padding: 1.5rem;
font-size: 1.2rem;
border: 1px solid black;
&:focus {
outline: none;
}
}

42
button {
padding: 0.5rem 1rem;
background-color: #e50914;
border: none;
cursor: pointer;
color: white;
font-weight: bolder;
font-size: 1.05rem;
}
}
button {
padding: 0.5rem 1rem;
background-color: #e50914;
border: none;
cursor: pointer;
color: white;
border-radius: 0.2rem;
font-weight: bolder;
font-size: 1.05rem;
}
}
}
}
`;

43
6.1.2 Home page code

import React, { useEffect, useState } from "react";

import styled from "styled-components";
import backgroundImage from "../assets/home.jpg";
import MovieLogo from "../assets/homeTitle.webp";
import { onAuthStateChanged } from "firebase/auth";
import { firebaseAuth } from "../utils/firebase.config";
import { useNavigate } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { FaPlay } from "react-icons/fa";
import { AiOutlineInfoCircle } from "react-icons/ai";

function Netflix() {
const navigate = useNavigate();
const
return (
<Container>
<div className="hero">
<img
src={backgroundImage}
alt="background"
className="background-image"
/>
<div className="container">
<div className="logo">
<img src={MovieLogo} alt="Movie Logo" />
</div>
<div className="buttons flex">
<button

44
onClick={() => navigate("/player")}
className="flex j-center a-center"
>
<FaPlay />
Play
</button>
<button className="flex j-center a-center">
<AiOutlineInfoCircle />
More Info
</button>
</div>
</div>
</div>

</Container>
);
}

45
6.2 SNAPSHOTS

Home page

Fig 15. Home page

Sign Up

Fig. 16 - login page

46
The Home Page consists of 5 main sections:

Header, which includes:

Logo: it redirects you to the home page when you click on it. Sign-in button: it redirects you
to the sign-in page.Feature title & subtitle: It shows the main sentences of the website.

Optform: It's a text input field and a button, It redirects you to the sign-up page once you
click on the button.

The Sign-in Page consists of 3 main sections:

Header, which includes:

 Logo: it redirects you to the home page when you click on it.

2) Sign-in Form, which includes:

 Sign-in Button: It has a validation option, if any field in the form is empty it will be
disabled. If the form fields have any data it will be active and will send the data to the
firebase database in the backend for authentication. It has also an error handling
function.

 Link to Sign-up Page: it redirects you to the sign-up page.

Sign-up Page

Fig.17: Sign Up page.

47
Browser Page

Fig 18. Browse page

Fig 19. Browse page

48
The Browse Page consists of 5 main sections:
1) Header, which includes:
 Logo: it redirects you to the home page whenever you click it.
 Categories Links: It shows the movies of a specific category when you click on it, for
example, if you click on the films link it will be active and the browse page will show
only the films. And if you click on the series link it will be active and the browse page
will show only the series.

 Featured Movie Title & Description: It shows the title and description of the featured
movie.
 Play Button: it shows the video player to play the movie.

2) Movies Slides: It's a slide show the movies based on their genre. The genres and all
movie information had been retrieved from the Firebase database.

3) Movie Card: It's an image represent the movie, when you hover over it became bigger and
it will show its card feature if you click on it.

4) Card Feature: it's another section that appears under the movie slide if you click on any
movie card, it contains more information about the movie like title, description, a special
background represent the movie, and play button. when you click on the play button it shows
the video player to play the movie. and you can close the card feature by clicking on the close
icon in the top right corner of the card feature.

5) Video Player: it's a video player that has full controls, appears in the middle of the screen
when you click on any play button, and you have to click on the play icon in the video player
after it show up because it doesn't have an auto play option currently. And when the video
player show up the whole screen became an overlay, and only the video appears in the middle,
and when you scroll up and down the video player moves with you. The video player should
show the video of this movie which you clicked on it, but for this project purpose, it shows only
one video as a sample for all movies.

49
CHAPTER 7
CONCLUSION
This is a clone of Netflix website built using React.JS as a Front-end & Firebase as Back-end. It's
not a replica, and it doesn't have all the features of Netflix website. it's a similar version of
Netflix with my own design touch, showing my abilities in React.JS to build something advanced
like Netflix. It contains the home page, sign-in page, sign-up page, browse page, and movie
player.
Netflix has a unique way of presenting its content to their audience. There are four things that set
Netflix apart from most streaming services. It collects data on audience watching behaviours, has
a global market, orders most content by seasons and for its income relies on paid-subscriptions.
These are the elements that influence the content Netflix makes and deliver a unique viewing
experience. Another element discusses at length in this thesis is the environment Netflix
produces its content for.
Netflix -Clone is good with all the excellent and overwhelming apps because it prioritizes the
needs of subscribers. Regular transformation is bringing innovations and making all its
subscribers more comfortable. That makes clients glued to this platform.
I am quite satisfied with the outcome that I ended up with. I plan to focus on improving the
overall performance of the Netflix clone.

50
CHAPTER 8

FUTURE SCOPE AND LIMITATION

8.1 SOFTWARE SCOPE

 Extensibility: This software is extendable in ways that its original developers may not
expect. The following principles enhances extensibility like hide data structure, avoid
traversing multiple.
 Links or methods avoid case statements on object type and distinguish public and private
operations.
 Reusability: Reusability is possible as and when require in this application. We can
update it next version. Reusable software reduces design, coding and testing cost by
amortizing effort Over several designs. Reducing the amount of code also simplifies
understanding, which increases the likelihood that the code is correct. We follow up both
types of reusability:
 Sharing of newly written code within a project and reuse of previously written code on
new projects.
 Understand ability: A method is understandable if someone other than the creator of the
method can understand the code (as well as the creator after a time lapse). We use the
method, which small and coherent helps to accomplish this.
 Cost-effectiveness: Its cost is under the budget and make within given time period. It is
desirable to aim for a system with a minimum cost subject to the condition that it must
satisfy the entire requirement.
 Scope of this document is to put down the requirements, clearly identifying the
information needed by the user, the source of the information and outputs expected from
the system.

2 LIMITATIONS

 This application does not support payment method and subscription option yet.
 This application works slow.

51
CHAPTER 9
REFRENCES

1. Netflix India – Watch TV Shows Online, Watch Movies Online

2. Netflix - Wikipedia

3. Node.js - Wikipedia

4. architecture of Netflix - Bing images

5. Google

6. http://in.youtube.com

52