IT Practical File Session 2019-23

A
Project Report
On
Netflix Clone Website
Submitted In Partial Fulfilment of the requirements for the award of degree of
Bachelor of Technology
In
Information Technology
From

Engineering College Bikaner

Affiliated to

Bikaner Technical University, Bikaner

(Session:2019-2023)
Submitted by : Rais Ahmed Khokhar Mohd Afjal
Submitted to
University Roll No : 19EEBIT029 19EEBIT021 Mr Ajay Choudhary
rd Year , 8 h
Year : 4 Sem Assistant Professor
Department of IT

1
 Candidate’s Delaration

I hereby declare that the work, which is being presented in the Major Project, entitled "Blogging site
using Django Framework" in partial fulfilment for the award of Degree of "Bachelor of Technology"
in Department of Computer Science & Engineering and submitted to the Department of Computer
Science & Engineering. Engineering college of Bikaner, Bikaner Technical University is a record of my
own investigations carried under the Guidance of Mr. Pratap Singh Barth, Department of Computer
Science & Engineering, Engineering college of Bikaner.

I have not submitted the matter presented in this report anywhere for the award of
any other Degree.

Name & Signature of the Guide

Name: Mohd Afjal

Roll.no : 19EEBIT021

Name: Rais Ahmed Khokhar

Roll.no : 19EEBIT029
 CERTIFICATE

This is to certify that the project titled “ NETFLIX CLONE ” is the bonafide
work carried out by
Mohd Afjal Roll no 19EEBIT021, Rais Ahmed Khokhar Roll no 19EEBIT029
student of 8th semester Information Technology in
Engineering College Bikaner, Bikaner, affiliated to BTU
Bikaner Technical University (India) during the academic session 2023.

Date:

Name & Signature Name & Signature Name & Signature

(H.O.D) (Project Co-Ordinator) (Supervisor)

 ABSTRACT
The purpose of the project entitled as “ Netflix Clone ” is an on-demand
video streaming app
solution that helps to launch your own-demand OTT platform like Netflix,
where you can
watch unlimited movies and TV shows for one low month to month cost.
Netflix Clone
broadcasts movies and TV shows over the Internet to new locations with
enormous audiences.
Netflix Clone Script’s multi-lingual ability also allows the broadcasting of
movies and programs
in regional languages.
The entertainment industry is the largest online service business in the market.
Netflix Clone is
packaged with fascinating features that are of the essence for a flourishing
online streaming
website. It allows users to watch TV shows, movies online offering different
types of shows like
drama, thriller, action, murder/mystery, comedy, documentaries and enjoy
watching it on HD
anytime, anywhere they want.
 CONTENTS

Introduction
4

Hardware Specification 10

Software and Technologies used 14

Code 19

Outputs/Results 26

References 29

Conclusion 30
INTRODUCTION
Netflix Clone is an on-demand video streaming app solution that helps to
launch your own ondemand
OTT platform like Netflix, where you can watch unlimited movies & TV shows
for one
low month to month cost. Netflix Clone broadcasts movies and TV shows over
the Internet to
new locations with enormous audiences. Netflix Clone Script’s multi-lingual
ability also allows
the broadcasting of movies and programs in regional languages.
The entertainment industry is the largest online service business in the market.
Netflix Clone is
packaged with fascinating features that are of the essence for a flourishing
online streaming
website. It allows users to watch TV shows, movies online offering different
types of shows like
drama, thriller, action, murder/mystery, comedy, documentaries and enjoy
watching it on HD
anytime, anywhere they want.

Features:
1. Looks similar to Netflix.
2. Dynamic site run on Node.js server.
3. Dedicated Dynamic Movies Info page.
4. Has movie trailers, and recommendations.
5. Has smooth card slid

1. History of Netflix

Netflix was first founded in August of 1997 by two serial entrepreneurs,

Marc Randolph, and
Reed Hastings. The company began out in Scotts Valley, California, and
has grown to become
one of the world's leading internet entertainment platforms.
When it first opened, Netflix was purely a movie rental service. Users
ordered movies on the
Netflix website, and received DVDs in the post. When they were finished
with them, they
would simply post them back to Netflix in the envelopes provided. At the
time, this was seen
as a boon to those who did not have a video rental store nearby.
Today, Netflix streams movies and has more than 151 million paid
subscribers in over 190
countries around the world. It offers a wide range of TV series,
documentaries, and feature
films across a wide variety of genres and languages, including original
productions.
1.1 Reed Hastings helped cofound Netflix back in the 90s
Reed Hastings co-founded Netflix in 1997. He was an entrepreneur who
in 1991 had founded
Pure Software, which made tools for software developers. After a 1995
IPO and several
acquisitions, Pure was acquired by Rational Software in 1997.
Hastings received a BA from Bowdoin College in 1983 and an MSCS in
artificial
intelligence from Stanford University in 1988. Between Bowdoin and
Stanford, he served in
the Peace Corps as a high school math teacher in Swaziland. Today, he
is an active educational
philanthropist, having served on the California State Board of Education
and on the board of
several educational organizations.
1.2 Marc Randolph is the other chap behind Netflix
Marc Randolph is a veteran Silicon Valley entrepreneur, advisor, and
investor. As co-founder
and founding CEO of Netflix, he laid much of the groundwork for a
service that‟s grown to 150
million subscribers and fundamentally altered how the world
experiences media.
He also served on the Netflix board of directors until retiring from the
company in 2003."
- marcrandolph.com.
Randolph graduated from university with a degree in Geology and would
go on to found and
run various mail-order and direct-to-customer companies before Netflix.
Throughout Randolph's career, he founded no fewer than six successful
start-ups, including
the magazine Macworld, and has mentored hundreds of early-stage
entrepreneurs.
1.3 When and where was Netflix founded?
As previously mentioned, Netflix was founded in 1997 in Scotts Valley,
California. It was
originally a rent-by-mail DVD service that used a pay-per-rental model.
Users would browse and order the films they wanted on their website,
put in an order, and
Netflix would post them to your door. After renters had finished with the
DVDs, they would
simply post them back.
Rentals cost around $4 each, plus a $2 postage charge. After significant
growth, Netflix
switched to a subscriber-based model.
With this model, users could keep the DVDs for as long as they liked, but
could only rent a
new movie after returning their existing one.
Netflix's mail-order rental model would directly challenge the market
dominance of bricksand-
mortar rental giants like Blockbuster. In fact, Blockbuster could ultimately
not compete
with the move to online streaming and rentals and filed for bankruptcy in
2010.
But this never needed to happen. Years earlier, Blockbuster had the
opportunity to partner with
Netflix, or even buy the company out.
"In 2000, Netflix CEO and co-founder Reed Hastings approached
Blockbuster about a
partnership. Unfortunately for Blockbuster, their CEO just smiled and
laughed at him.
In fact, Blockbuster even had a chance to purchase Netflix for $50
million. Netflix currently
has a Market Cap of [$209.74B] (July 2020) and a share price of
$476.89, while Blockbuster
is out of business." - rewindandcapture.com.
1.4 Some of the key milestones in Netflix's history
• It all kicks off 1997
Reed Hastings and software executive Marc Randolph co-found Netflix
to offer online movie
rentals.
• Netflix launches its DVD rental and sales service in 1998
Netflix launches the first DVD rental and sales site, Netflix.com.
• Their subscriber-based business model launches in 1999
Netflix debuts a subscription service, offering unlimited DVD rentals for
one low
monthly price.
• 2000 unveils subscriber personalization
Netflix introduces a personalized movie recommendation system, which
uses members‟
ratings to predict choices for all Netflix members.
• Netflix goes public in 2002
With a membership count at 600,000 in the US, Netflix makes its initial
public offering
(on the Nasdaq, under the ticker “NFLX”). The stock is initially offered for
$15 a share,
with an initial offering of 5,500,000 shares. The company ends the year
with
around 857,000 registered Netflix accounts. Since then, Netflix has
consistently been
one of the best-performing stocks in the S&P 500.
• The company celebrates 1 million accounts in 2003
This year, Netflix hits a new record for the number of members, with
more than 1
million. The company also issues a patent with the U.S. Patent and
Trademark Office
for its subscription rental service, with some other extensions. Co-
founder Marc
Randolph steps down as a member of the board and leaves Netflix in
2003.
• 2004 sees a doubling in the number of Netflix accounts.
This year, Netflix's member base surpasses 2 million. At the same time,
Netflix also
faces one of its first encounters with the legal system when they are
sued for false
advertising in relation to claims of "unlimited rentals" with "one-day
delivery". The claimant accused Netflix of failing to deliver on these two
marketing
promises in the San Fransisco Superior Court, claiming that the
company's 3 at-a-time
plan precluded unlimited rentals, and there was no way to ensure the
one-day delivery
using "snail mail".
Netflix denied any wrongdoing, and both parties eventually agreed on a
settlement.
• Netflix accounts hit a record 5 million in 2006
Netflix sees huge growth in member numbers, reaching 6,3 million
subscribers by
years' end. The company also launches its "Netflix Prize", promising a
whopping $1
million to the first person, or team, who can achieve a set accuracy goal
in
recommending movies based on personal preferences.
Netflix also released around 100 million anonymous movie ratings,
using a system that
rates films from one to five stars. This is the largest set of such data
released to date.
• Video streaming is introduced in 2007.
Netflix introduced a streaming service, called "Watch Now", which allows
members to
instantly watch television shows and movies on their personal
computers. This was a
huge shift in the company's business model. Initially, the service
launched with just
1,000 titles and only worked on PCs and Internet Explorer. It also offered
a limit on the
number of hours of free streaming (with a maximum of 18 free hours a
month), based
on the users' subscription plan.
Netflix was also careful to say that they felt DVDs would be around for a
long time.
Despite these limitations, it was soon clear that streaming was the future
of
entertainment. By the end of 2007, Netflix had 7.5 million registered
subscribers -- up
almost 20% on the previous year.
• Netflix teams up with various consumer electronics companies in 2008
Netflix partners with consumer electronics companies to allow streaming
on the Xbox
360, Blu-ray disc players, and TV set-top boxes. The year ends with
around 9.4
million subscribers.
• Netflix is added to Playstation and smart-TVs in 2009
Netflix partners with yet more consumer electronics companies to allow
streaming on
PS3, Internet-connected TVs, and other Internet-connected devices. Its
member base
also expands to an amazing 12 million accounts by the end of the year.
The "Netflix Prize" also finds a winner this year. "Bellkor's Pragmatic
Chaos" team,
consisting of seven researchers from four countries. Running for over
three years, the
contest had attracted tens of thousands of contestants from more than
180
countries worldwide.
• Netflix connects to Apple devices and expands into Canada in
2010
Netflix is available on the Apple iPad, iPhone and iPod Touch, the
Nintendo Wii, and
other Internet-connected devices at this point. Netflix launches its
service in Canada.
The year ends with more than 20 million subscribers on the books.
This year also
marked the point where the number of customers who were primarily
streaming shows,
outpaced those who were renting, leading Hasting to declare in an
October earnings
call that, "By every measure, we are now primarily a streaming company
that also offers
DVD-by-mail."
• The Qwikster debacle of 2011
Buoyed by the success of its streaming service, Netflix decides to split
its streaming
and DVD rental service into two separate services, forcing customers
who wanted to
use both to open a second account. Instead of paying $10 a month for
DVD rentals and
unlimited on-demand streaming, customers who wanted both services
would have to
pay for two different packages, starting at $7.99 each, or $15.98 for the
pair.
Within a few months, Netflix had lost 600,000 subscribers in the US and
the company's
stock had lost half its value. Despite this, in October, Hastings
announced that the
separation would continue, and the DVD service would be called
Qwikster. A month
later, facing a shareholder and customer revolt, Hastings abruptly
changed course and
abandoned plans for Qwikster, although the DVD and streaming plans
would remain
separate.
The debacle was a rare blunder for Netflix, which in the future would be
deemed much
smarter owing to the way it raised prices (slowly and stealthily).
This year also saw the launch of Amazon Instant Video, which made
available 5,000
movies and TV shows for Amazon Prime members in a move to directly
compete with
Netflix.
• The UK and Nordic countries are taken by storm in 2012
Netflix becomes available in Europe, including the United Kingdom,
Ireland, and in
the Nordic Countries. Netflix wins its first Primetime Emmy Engineering
Award. They
also premiere their first original stand-up special, "Bill Burr: You People
Are All the
Same." Netflix also hits 25 million subscribers.
• Netflix becomes an award-winning service in 2013.
Netflix received 31 primetime Emmy nominations including outstanding
drama series,
comedy series and documentary or nonfiction special for “House of
Cards”, “Orange Is
the New Black”, and “The Square” respectively. Netflix was the first
internet TV
network nominated for the Primetime Emmy.
Netflix also releases some other popular original programming like
"Hemlock Grove"
and "Arrested Development," while also unveiling the „Profiles‟ feature,
which allows
users to create different profiles for different users and/or different
moods.
By year's end, the company has more than 40 million subscribers.
• 2014 sees Netflix's continued expansion into Europe
In 2014, Netflix launched in 6 new countries in Europe (Austria,
Belgium, France,
Germany, Luxembourg, and Switzerland), and won 7 Creative Emmy
Awards. Netflix
now had more than 50 million members globally.
• Netflix expands into Australasia in 2015
Netflix launches in Australia, New Zealand, and Japan, with continued
expansion across
Europe in Italy, Spain, and Portugal. The first Netflix original feature film
“Beasts of
No Nation” is released.Netflix also premieres its first non-English original
series with
the Mexican comedy "Club de Cuervos."
At the same time, Amazon "Transparent" became the first show
produced by Amazon
Studios to win a major award. Netflix was no longer the only streaming
game in town.
• 2016 is a big year for Netflix
Netflix expands to another 130 countries around the world, bringing its
reach to a total
of 190 countries. It also offers programming in 21 languages. They also
unveil their
„Download‟ feature, which allows members to download TV shows and
movies for
offline viewing. Netflix continues to expand its collection of original
international
shows, with its first French series "Marseille", first Brazilian series "3%",
and first non-
English language original film, the Spanish drama "7 Años."
• 2017 is another killer year for the company
This is another good year for Netflix. They win their first Academy
Award, for Best
Documentary Short Subject for "The White Helmets". At the same time,
subscriber
numbers reach an astounding 100 million globally. Netflix also expands
their
international collection with the very popular series' "La Casa De Papel"
(from Spain),
"Suburra: Blood on Rome" (from Italy), and "Dark" (from Germany).
The year ends with a minor controversy, as Netflix "calls out" users who
watch the same
film multiple times. While done in jest, it also made users very aware that
their watching
habits were being monitored by the company, and sparked concerns
over privacy. This
year, Amazon also began to make sports-related content acquisitions,
acquiring nonexclusive
rights to stream portions of the NFL's "Thursday Night Football" games
in a
$50 million deal.
• Things get better and better for Netflix in 2018
This year, Netflix wins more Academy Awards for its original content,
including Best
Documentary Feature for "Icarus." 2018 also sees Netflix's acquisition of
the book
publisher Millarworld, founded by the legendary comic book creator Mark
Millar, in
order to adapt company properties into films and TV shows.
In March, Netflix employees launched a phone playing the original series
"Star Trek:
Discovery" into space. This stunt was to celebrate the service now being
available in
more than 190 countries around the world.
Netflix also becomes the most nominated service at this year's
Primetime and Creative
Arts Emmy Awards, receiving an amazing 112 nominations. The
company ties with the
veteran HBO for most wins, taking home 23 accolades for their series,
including
"GLOW," "Godless," "Queer Eye" and "Seven Seconds."
Amazon was coming up close behind, however, as the streaming service
announced
it had secured the UK rights to broadcast live Premier League football
matches and
purchased the global television adaptation rights to The Lord of the
Rings, which will air
on Prime Video.
• 2019 sees more awards coming Netflix's way
In 2019, Netflix wins four Academy Awards for Best Director, Best
Foreign Language
Film and Best Cinematography for "ROMA," and Best Documentary
Short Subject for
"Period. End of Sentence."
They also acquire the intellectual property rights for StoryBots, which
was an Emmy,
Annie, and Parents‟ Choice award-winning children‟s media brand
created by Gregg
and Evan Spiridellis. Netflix also releases "Klaus", its first-ever original
animated
feature film. 2019 also sees the release of "Inside Bill's Brain", a three-
part documentary
covering the life and times of the man behind Microsoft. It is an instant
hit. Netflix and
Tesla also confirm that the streaming service will be available on Tesla
screens very
soon.
Netflix unveils its first international original films from the Middle East
("Jinn") and
Thailand ("The Stranded"). This year, Netflix wins 27 Primetime and
Creative Arts
Emmy Awards for series including "Black Mirror: Bandersnatch,"
"Ozark," "Queer
Eye", and "When They See Us."
However, not everything is rosy for the company. Inspired by their
success, a number
of other companies begin to get in on the act by starting, or expanding,
their own
streaming services.
Disney, AT&T, and Apple all launch their own Netflix alternatives in
2019. When
Disney+ made its debut the following year, it meant the end of Disney
blockbusters,
such as the Star Wars films, being available on other streaming services.
• What does the future have in store for Netflix?
Many experts believe that the future could look less rosy for Netflix. This
is, in part,
because of the explosion in other streaming services launched to
challenge Netflix's
seeming dominance. Netflix, to its credit, appears to have predicted the
impending threat
several years ago, as it acknowledged that major media conglomerates
would start to
pull their content from Netflix to add to their own services.
"This is why, in 2018, Netflix spent $12 billion building its library of
original films and
series, an 88% uptick from 2017. And, spend on original content this
year is expected
to reach $15 billion. The strategy was to backfill its library with original
content to gain
and retain subscribers," according to Forbes. Based on this, it seems
Netflix will
continue to focus on its own content going forward, rather than relying
on potential
streaming competitors not pulling their content from the platform.
Another option is for Netflix to move to an advertisement-based system
in the future.
However, up to this point the company has been staunchly opposed to
this. Netflix has
weathered many storms before and it would foolish to believe it is not
nimble enough to
do so going forward.
HARDWARE SPECIFICATIONS
➢Processor: Intel Pentium or Above
➢4GB RAM Or Above
➢40GB Hard Disk Drive or Above
➢Monitor, Mouse
➢Other Hardware Requirements

SOFTWARE AND TECHNOLOGIES USED

Windows 11 is the latest major release of Microsost‟s Windows

NT operating system, released on October 5, 2021. It is a free upgrade
to its predecessor, Windows 10 (2015), and is available for any Windows
10 devices that meet the new Windows 11 system requirements.
Windows 11 features major changes to the Windows shell influenced by
the canceled Windows 10X, including a redesigned Start menu, the
replacement of its "live tiles" with a separate "Widgets" panel on
the taskbar, the ability to create tiled sets of windows that can be
minimized and restored from the taskbar as a group, and new gaming
technologies inherited from Xbox Series X and Series S such as Auto
HDR and DirectStorage on compatible hardware. Internet Explorer (IE)
has been replaced by the Chromium-based Microsoft Edge as the
default web browser, like its predecessor, Windows 10, and Microsoft
Teams is integrated into the Windows shell. Microsoft also announced
plans to allow more flexibility in software that can be distributed via
the Microsoft Store and to support Android apps on Windows 11
(including a partnership with Amazon to make its app store available for
the function)

VISUAL STUDIO CODE

Visual Studio Code is a free 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. Users can change
the theme,
keyboard shortcuts, preferences, and install extensions that add additional
functionality.
 In the Stack Overflow 2019 Developer Survey, Visual Studio Code was ranked
the most
popular developer environment tool, with 50.7% of 87,317 respondents
reporting that
they use it. Visual Studio Code was first announced on April 29, 2015, by
Microsoft at the
2015 Build conference.

NODE.JS
Node.js is an open-source, cross-platform, back-end Javascript runtime-
environment that
runs on JavaScript Engine i.e. V8 engine and executes JavaScript code outside a
web browser,
which was designed to build scalable network applications. Node.js lets
developers use
JavaScript to write command line tools and for server-side scripting - running
scripts serverside
to produce dynamic web page content before the page is sent to the user's
web browser.

HTML 5
HTML stands for HyperText Markup Language. It is used to design web pages
using a markup
language. HTML is the combination of Hypertext and Markup language.
Hypertext defines
the link between web pages. A markup language is used to define the text
document within
the tag which defines the structure of web pages. This language is used to
annotate text so
that a machine can understand it and manipulate text accordingly. The
language uses tags to
define what manipulation has to be done on the text. HTML is a markup
language used by
the browser to manipulate text, images, and other content, in order to display
it in the
required format. HTML was created by Tim Berners-Lee in 1991. The first-ever
version of
HTML was HTML 1.0, but the first standard version was HTML 2.0, published in
1995.
CSS
Cascading Style Sheets, fondly referred to as CSS, is a simply designed language
intended to
simplify the process of making web pages presentable. CSS allows you to apply
styles to web
pages. More importantly, CSS enables you to do this independent of the HTML
that makes up
each web page. It describes how a webpage should look: it prescribes colors,
fonts, spacing, and much more. In short, you can make your website look
however you want. CSS lets
developers and designers define how it behaves, including how elements are
positioned in
the browser.

JAVASCRIPT
JavaScript is a lightweight, cross-platform, and interpreted compiled
programming language
which is also known as the scripting language for webpages. It is well-known
for the
development of web pages, many non-browser environments also use it.
JavaScript can be
used for Client-Side developments as well as Server-Side developments.
Javascript is both
imperative and declarative type of language. JavaScript contains a standard
library of
objects, like Array, Date, and Math, and a core set of language elements
like operators, control structures, and statements.

REACT JS
ReactJS is an open-source, component-based front end library responsible only
for the view
layer of the application. It is maintained by Facebook. It 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. A React application is made of
multiple
components, each responsible for rendering a small, reusable piece of HTML.

React Router DOM

React Router is a popular library for implementing routing in React

applications. However, as of my knowledge cutoff in September 2021, there is
no specific library called "React Router Dome." It's possible that you may be
referring to "react-router-dom," which is a package specifically designed for
web applications using React.

react-router-dom is a collection of routing components that are specifically

tailored for web development with React. It builds on top of the core react-
router library and provides additional functionality to handle routing in a web
environment.

React Router DOM is a library that provides routing capabilities to React

applications. It helps in managing the navigation and rendering of different
components based on the current URL. Here's an explanation of how React
Router DOM works and the problems it solves:

Declarative Routing: React Router DOM allows you to declare your

application's routes using a declarative syntax. Instead of manually handling
URL changes and rendering components based on the current URL, React
Router DOM provides components like Route and Switch that define the
relationship between paths and components. This simplifies the process of
setting up routes and makes the code more readable and maintainable.

Component-Based Routing: React Router DOM enables you to define routes as

individual components. Each route can be associated with a specific URL path
and a component that should be rendered when that path matches the current
URL. This component-based approach makes it easier to organize and reuse
code, as well as to encapsulate logic and UI related to specific routes.

Nested Routing: React Router DOM supports nested routing, allowing you to
create complex navigational structures. You can nest routes within each other,
defining parent-child relationships. This enables you to build hierarchical UI
structures and render different components based on nested URLs. Nested
routing helps in organizing and modularizing your application, making it more
scalable and manageable.

History Management: React Router DOM provides a history object that

manages the browser history and allows you to navigate between different
routes programmatically. It provides methods like push, replace, and goBack
to modify the URL and control the navigation flow. This history management
feature helps in building interactive and dynamic user interfaces.

URL Parameters and Query Strings: React Router DOM allows you to define
dynamic segments in your URLs using parameters. You can specify
placeholders in the route paths, and React Router DOM will match those
segments and pass them as props to the corresponding components. This is
useful when you have dynamic data in your URLs, such as user IDs or post
slugs. Additionally, React Router DOM provides utilities to parse and access
query string parameters from the URL.

Navigation and Linking: React Router DOM includes the Link component,
which provides a convenient way to create clickable links that navigate to
different routes within your application. It handles URL changes without
causing a full page reload, resulting in a smooth and efficient user experience.
The Link component also supports additional features like styling active links
based on the current URL.

React Router DOM solves several problems related to routing in React

applications, including:

Managing application navigation: React Router DOM simplifies the process of

handling navigation between different pages or views in your application. It
provides a consistent and predictable way to define routes and render the
appropriate components based on the URL.
Keeping UI in sync with URL: React Router DOM ensures that the UI of your
application corresponds to the current URL. It allows you to map specific
components to different URLs, ensuring that the correct content is rendered
based on the user's navigation.

Enabling bookmarkable URLs: React Router DOM helps in creating URLs that
can be bookmarked or shared. Each route in your application is associated with
a unique URL, allowing users to directly access specific pages without
navigating through the entire application.

Supporting browser history: React Router DOM manages the browser history
and provides methods to navigate back and forth, replace URLs, and
programmatically trigger route changes. This enables smooth navigation within
your application and improves the overall user experience.

By providing a declarative and component-based approach to routing, React

Router DOM simplifies the implementation of navigation and helps in building
robust and scalable React applications.

AXIOS:
Axios is a popular JavaScript library that allows you to make HTTP requests
from a web browser or Node.js. It simplifies the process of sending
asynchronous HTTP requests and handling responses.

Here are some common use cases for the Axios library:

Fetching data from a server: Axios provides a simple and straightforward way
to make GET requests to retrieve data from a server. You can use it to fetch
data from APIs, retrieve JSON data, or download files.

Sending data to a server: Axios supports various HTTP methods like POST, PUT,
PATCH, and DELETE, allowing you to send data to a server for processing or
updating resources. It handles the serialization of data and setting appropriate
request headers.

Handling responses: Axios allows you to handle responses from the server
easily. It provides methods to access response headers, status codes, and the
response body. You can extract data from JSON responses, handle errors, and
perform actions based on the response status.

Setting request headers: You can set custom headers in your requests using
Axios. This is useful for authentication, passing tokens, or setting specific
content types.

Handling errors and timeouts: Axios provides a way to handle errors that occur
during the request process. It allows you to catch errors and perform
appropriate actions, such as displaying error messages or retrying requests. It
also supports setting timeouts for requests to prevent them from hanging
indefinitely.

Interceptors: Axios supports interceptors, which are functions that allow you
to intercept and modify requests or responses globally. Interceptors can be
used for tasks such as adding authentication headers, logging requests, or
handling error responses consistently.

Canceling requests: Axios supports canceling requests, which is useful in

scenarios where you want to abort an ongoing request. You can create cancel
tokens and associate them with specific requests. If needed, you can cancel the
request using the associated token.

These are just some of the common use cases for the Axios library. It provides
a convenient and flexible API for handling HTTP requests in JavaScript
applications.
CODE:
APP JS Code

import React from 'react';

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

import { Home, Browse, Signin, Signup } from './pages';

import * as ROUTES from './constants/routes';

import { IsUserRedirect, ProtectedRoute } from './helpers/routes';

import { useAuthListener } from './hooks/index';

export default function App() {

const {user} = useAuthListener();

console.log(user);

return (

<Router>

<Switch>

<IsUserRedirect user={user} loggedInPath={ROUTES.BROWSE}

path={ROUTES.SIGN_IN}

>

<Signin />

</IsUserRedirect> <IsUserRedirect user={user} loggedInPath={ROUTES.BROWSE}

path={ROUTES.SIGN_UP}

>

<Signup />

</IsUserRedirect>

<ProtectedRoute user={user} path={ROUTES.BROWSE} >

<Browse />

</ProtectedRoute>

<IsUserRedirect user={user} loggedInPath={ROUTES.BROWSE}

path={ROUTES.HOME} exact>

<Home />

</IsUserRedirect>

</Switch>

</Router>

);

CSS Code

margin: 0;

.app {

background-color: #111;

/* original app.css disabled */

/* .App {

text-align: center;

.App-logo {

height: 40vmin;

pointer-events: none;

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

.App-logo {

animation: App-logo-spin infinite 20s linear; }

.App-header {
background-color: #282c34;

min-height: 100vh;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

font-size: calc(10px + 2vmin);

color: white;

.App-link {

color: #61dafb;

} @keyframes App-logo-spin {

from {

transform: rotate(0deg);

to {

transform: rotate(360deg);

Index Code

body {

margin: 0;

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',

sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;
}

code {

font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',

monospace;

Fetching Data From TMDB API

import { useEffect, useState } from "react";

import { Link, useParams } from "react-router-dom";

import axios from "../../Utils/API";

import Slider from "react-slick";

import "slick-carousel/slick/slick.css";

import "slick-carousel/slick/slick-theme.css";

const Action = () => {

const key = process.env.REACT_APP_API_KEY;

var settings = {

dots: true,

infinite: true,

slidesToShow: 6,

slidesToScroll: 1,

// autoplay: true,

autoplaySpeed: 1500,

pauseOnHover: true,

responsive: [

{
 breakpoint: 1536,

settings: {

slidesToShow: 6,

slidesToScroll: 3,

infinite: true,

dots: true,

adaptiveHeight: true,

},

},

breakpoint: 1170,

settings: {

slidesToShow: 5,

slidesToScroll: 3,

infinite: true,

dots: true,

},

},

breakpoint: 1024,

settings: {

slidesToShow: 4,

slidesToScroll: 3,

infinite: true,

dots: true,

},

},
 {

breakpoint: 768,

settings: {

slidesToShow: 3,

slidesToScroll: 3,

infinite: true,

dots: true,

},

},

breakpoint: 600,

settings: {

slidesToShow: 2,

slidesToScroll: 1,

initialSlide: 2,

},

},

breakpoint: 480,

settings: {

slidesToShow: 1,

slidesToScroll: 1,

},

},

],

};
const image_Base_Url = "https://image.tmdb.org/t/p/w500";

const [details, setDetails] = useState();

const getDetails = async () => {

const response = await axios.get(

`https://api.themoviedb.org/3/discover/movie?with_genres=28&api_key=${key}`

);

setDetails(response.data);

};

useEffect(() => {

getDetails();

}, []);

return (

<div className="ml-12 sm:ml-6 duo:ml-6 mr-5 mt-8 text-center ">

<h1 className="text-white text-left mb-3 font- font-bold text-2xl text">

Action Movies

</h1>

<Slider {...settings}>

{details &&

details?.results &&

details?.results.map((movie) => {

return (

<div key={movie.id}>
 <h1>{movie.original_title}</h1>

<Link to={`/category/${movie.id}`}>

<img

src={`${image_Base_Url}/${movie.poster_path}`}

alt=""

className="h-[400px] w-[300px] duo:w-[200px] 2xl: sixh:w-[180px] 2xl:w-[250px]

rounded hover:scale-95 translate-x-2 ease duration-200 "

/>

</Link>

</div>

);

})}

</Slider>

</div>

);

};

export default Action;

REFERENCES:

https://www.geeksforgeeks.org

https://github.com/topics/netflix-clone

https://www.youtube.com/

https://www.alphansotech.com/

https://www.streamhash.com/

https://www.udemy.com/

https://www.coursera.org/

https://www.javapoint.com/
Conclusion

Netflix is a rare example of a company doing everything right. From their

branding and content
right down to their business model and product, the company has
always excelled at making
smart, strategic decisions. With their large market share and focus on
the numbers, Netflix has
managed to develop a deep understanding of their audience that very
few others have. This
knowledge, paired with a strong, affordable product, there‟s no limit to
what this brand can do
in the future.