lOMoARcPSD|19646181

Netflix Clone Project Report

Btech Cse (Chandigarh University)

Studocu is not sponsored or endorsed by any college or university

Downloaded by Gursewak Singh 656 ([email protected])
 lOMoARcPSD|19646181

NETFLIX CLONE
Project Report
B.TECH IV SEMESTER
(Batch: 2020-2024)

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

CGC College of Engineering

Landran, Mohali-140307
Submitted to: Submitted by:
Ms. Ashpinder kaur Tushar Verma

(2019243)

Downloaded by Gursewak Singh 656 ([email protected])

 lOMoARcPSD|19646181

CERTIFICATE

This is to certify that the project titled “ NETFLIX CLONE ” is the bonafide work carried out by
Tushar Verma Roll no 2019243 student of 4th semester Computer Science and Engineering in
Bachelor of Technology of CGC College of Engineering, Landran, Mohali, Punjab affiliated to IK
Gujral Punjab Technical University Jalandhar Punjab (India) during the academic session April
2023.

Name & Signature of the Guide

Downloaded by Gursewak Singh 656 ([email protected])

 lOMoARcPSD|19646181

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.

Downloaded by Gursewak Singh 656 ([email protected])

 lOMoARcPSD|19646181

TABLE OF CONTENTS

Title Page

Certificate by the guide 2

Declaration 3

Acknowledgement 4

Abstract 5

1. Introduction 6

2. Hardware Specification 7

3. Software and Technologies used 8-10

5. Code 11-17

6. Outputs/Results 18-21

7. Conclusion 22

8. References 23

Downloaded by Gursewak Singh 656 ([email protected])

 lOMoARcPSD|19646181

INTRODUCTION
Netflix Clone is an on-demand video streaming app solution that helps to launch your own on-
demand 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 slider effect.

Modules of Netflix Clone:

➢ Login
➢ Advanced Filter
➢ Advanced Search Bar
➢ Home Page
➢ Videos Categories
➢ Download Videos
➢ Push Notifications
➢ User Comments
➢ Videos Management

Downloaded by Gursewak Singh 656 ([email protected])

 lOMoARcPSD|19646181

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 10

Windows 10 is a Microsoft operating system, a version which succeeded Windows 8 and

Windows 8.1, which were unveiled in 2012 and 2013, respectively. Code-named
“Threshold,” Windows 10 was released to the general public in July 2015. Microsoft is
attempting to use Windows 10 to unify diverse operating systems for different devices
including PCs, phones and video consoles. Users already running Windows 7 or Windows 8
may be eligible for a free download of Windows 10, while individual licenses run between
$100 and $200. Features of Windows 10 include the return of the Start menu, new icons
and interface features and biometric security features. Windows 10 includes a new
browser, Edge, which replaces the longtime standard Internet Explorer. Another new
inclusion is Cortana, a virtual assistant analogous to Apple's Siri, as well as new notification
systems.

➢ 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

Downloaded by Gursewak Singh 656 ([email protected])

 lOMoARcPSD|19646181

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 server-
side 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,

Downloaded by Gursewak Singh 656 ([email protected])

 lOMoARcPSD|19646181

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.

Downloaded by Gursewak Singh 656 ([email protected])

 lOMoARcPSD|19646181

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>

Downloaded by Gursewak Singh 656 ([email protected])

 lOMoARcPSD|19646181

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

);

Downloaded by Gursewak Singh 656 ([email protected])

 lOMoARcPSD|19646181

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;

Downloaded by Gursewak Singh 656 ([email protected])

 lOMoARcPSD|19646181

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

Downloaded by Gursewak Singh 656 ([email protected])

 lOMoARcPSD|19646181

@keyframes App-logo-spin {

from {

transform: rotate(0deg);

to {

transform: rotate(360deg);

Downloaded by Gursewak Singh 656 ([email protected])

 lOMoARcPSD|19646181

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;

Downloaded by Gursewak Singh 656 ([email protected])

 lOMoARcPSD|19646181

HOME PAGE

The Home Page consists of these 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.

Downloaded by Gursewak Singh 656 ([email protected])

 lOMoARcPSD|19646181

SIGN-IN PAGE

The Sign-in Page consists of 3 main sections:

1) Header, which includes:

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

2) Sign-in Form, which includes:

• Email address input field.

• Password input field.

• Sign-in Button.

• Link to Sign-up Page.

3) Footer: It contains useful links users may need it.

Downloaded by Gursewak Singh 656 ([email protected])

 lOMoARcPSD|19646181

SIGN-UP PAGE

The Sign-up Page consists of 3 main sections:

1) Header, which includes:

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

2) Sign-up Form, which includes:

• First Name input field

• Email address input field

• Password input field

• Sign-up Button

• Link to Sign-in Page

3) Footer: It contains useful links users may need it

Downloaded by Gursewak Singh 656 ([email protected])

 lOMoARcPSD|19646181

Downloaded by Gursewak Singh 656 ([email protected])

 lOMoARcPSD|19646181

Downloaded by Gursewak Singh 656 ([email protected])

 lOMoARcPSD|19646181

CONCLUSION
Netflix Clone is an on-demand video streaming app solution that helps to launch your own on-
demand 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. 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. It includes following features:

• Looks similar to Netflix

• Dynamic site run on Node.js server
• Dedicated Dynamic Movies Info page
• Has movie trailers, and recommendations
• Has smooth card slider effect

Downloaded by Gursewak Singh 656 ([email protected])

 lOMoARcPSD|19646181

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/

Downloaded by Gursewak Singh 656 ([email protected])