FINAL YEAR PROJECT

Netflix Clone Website

Submitted in partial fulfilment of the requirements for the award of degree of

Bachelor of Technology
Computer Science and
Engineering
(Web Developement)

BABU BANARASI DAS UNIVERSITY

LUCKNOW

SUBMITTED BY SUBMITTED TO
Name: Vipul Rai (1210432366) MR. ANIL KUMAR
Name of the supervisor:
Name: Ajay Pratap Singh
Designation:MENTOR
Name: Prashant Pandey

Name: Anurag Tripathi

Name: Gyanendra Tiwari

1
 Student Declaration

To whom so ever it may concern

I, Vipul Rai, Ajay Singh, Prashant Pandey, Anurag tripathi hereby declare that the work done by me on

"FINAL YEAR PROJECT" from 18th Nov-2024 to Present, under the supervision of Anil kumar,
Of Babu Banarasi Das University,

Lucknow, is a record of original work for the partial fulfilment of the requirements for the
award of the degree Computer Science and Engineering.

Name of the Student (Registration Number)

Vipul Rai (1210432366)

Prashant Pandey
Ajay Pratap
Anurag Tripathi
Gyanendra Tiwari

2
 Declaration by the supervisors

To whom so ever it may concern

This is to certify that Vipul Rai, Ajay Pratap, Anurag Tripathi, Prashant Pandey, Gyanendra Tiwari
BBD University, has worked in Final year project on "WEB DEVELOPMENT" under my
supervision from 18th Nov,, 2024 to Present. It is further stated that the work carried out by the
student is a record of original work to the best of my knowledge for the partial-fulfillment of the
requirements for the award of the B-TECH, Computer Science and Engineering.

Name of Internal Supervisor

Mr. Anil Kumar

Assistant Professor
Designation of the Internal Supervisor

Signature of the Internal Supervisor

Dated:

3
 lOMoAR cPSD| 25170617

CERTIFICATE

This is to certify that the project titled “NETFLIX CLONE ” is the bonafide work carried out by
Group 20 student of 7th semester Computer Science and Engineering in Bachelor of
Technology of BABU BANARASI DAS UNIVERSITY, LUCKNOW during the academic session of
2024-2025.

Name & Signature of the Guide

 lOMoAR cPSD| 25170617

ABSTRACT

The purpose of the project entitled as “GRADEBOOK” Electronic gradebooks are used by
teachers to store grades on individual assignments and to calculate students’ overall grades.
Perhaps your teacher uses gradebook software to keep track of your grades. Some teachers
like to calculate grades based on what is sometimes called a “total points” system. This is the
simplest way to calculate grades. A student’s grade is the sum of the points earned on all
assignments divided by the sum of the points available on all assignments.
 lOMoAR cPSD| 25170617

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
 lOMoAR cPSD| 25170617

INTRODUCTION

In this century, technology has drastically improved and computer

science plays an important role in the development of technology. Due
to the increased career prospects in the computer science field and
interests among the hobbyist, there has been a tremendous increase in
the number of computer science courses offered at the universities
and in the enrollment of students in the computer science department.
Programming is one of the most important parts of learning computer
science. Large numbers of courses offered at the universities teach
programming languages, technologies, and other principles. Professors
provide programming assignments to the students to give them
experience and knowledge about programming languages.
Programming assignments are currently submitted by the students by
uploading the files to a server. The professor can then login to the
server, compile and execute the programming files, and then grade the
programming assignment. This process of compiling, executing, and
grading the programming assignments is currently done manually
which takes a considerable amount of time and effort by the
professors. An Online Grading System provides an efficient way of
managing assignments by both professors and students. Professors can
create courses, post assignments, deadlines for assignments, compile,
execute, and grade the assignments submitted by the students.
Students can register for courses, view assignments, submit
assignments, and check grades. 2 The Online Grading System is
developed using HTML and JavaScript for front-end applications, JSP
and Servlets for the server-side programming, and MySQL database for
storing database contents. The Online Grading System supports a Linux
Operating System.
 lOMoAR cPSD| 25170617

2. REQUIREMENT ANALYSIS

2.1 Problem Statement: Programming assignments are currently uploaded to a server by the
students. The professor has to login to the server, manually compile and execute the
programming files submitted by the students, and then assign a grade to the student. The
grade that is assigned to the student is usually stored in an Excel worksheet. There is no
advanced consolidated system which can manage all this features and maintain the records.

2.2 Objective of the Project: The objective of the Online Grading System, is to provide a
consolidated web system which allows professors to a create course, post assignments,
assign deadlines for assignments, and grade the assignments submitted by the student. The
Online Grading System also allows the student to register for courses, view assignments
submitted by the professor, submit assignments, and check grades.

2.3 Assumptions and Dependencies: It is assumed that the user has access to internet and a
web browser.

2.4 Non-Functional Requirements:

1. The Project should be developed using J2EE technologies.
2. The project should support Linux Operating System.
3. Database included should be MySQL database.
4. Assignment projects submitted by students can be C, C++ and Java files.
5. Assignment description files posted by Professors and/or Students should be created
using Rich Text Format Editor.

2.5 Functional Requirements:

1. Only Administrator can add professors and start new semester.
2. Professors can add and delete students to the online grading system.
3. Professors can add and delete courses to the online grading system.
4. Professors can post assignments, compile, execute, and grade the programming
assignments submitted by the students.
5. Students can enroll courses and drop courses.
6. Students can view assignments assigned by the professors.
7. Students can submit programming projects.
8. Students can check grades.
 lOMoAR cPSD| 25170617

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
 lOMoAR cPSD| 25170617

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,
 lOMoAR cPSD| 25170617

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.
 lOMoAR cPSD| 25170617

APP JS

.import React from 'react'

import Header from './Components/Header'
import Table from './Components/Table'
import Modal from './Components/Modal'

function App() {
return (
<>
<Header/>
<Table/>
{/* <Modal/> */}
</>
)
}

export default App

 lOMoAR cPSD| 25170617

APP CSS

.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 {
 lOMoAR cPSD| 25170617

from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
 lOMoAR cPSD| 25170617

INDEX CSS

{
margin: 0;
padding: 0;
}
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;
}
 lOMoAR cPSD| 25170617

INDEX CSS CODE

{
margin: 0;
padding: 0;
}
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;
}
 lOMoAR cPSD| 25170617

INDEX JS CODE

import React from 'react';

import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root =
ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

reportWebVitals();
 lOMoAR cPSD| 25170617

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.
 lOMoAR cPSD| 25170617

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.

 lOMoAR cPSD| 25170617

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

lOMoAR cPSD| 25170617
lOMoAR cPSD| 25170617
 lOMoAR cPSD| 25170617

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
 lOMoAR cPSD| 25170617

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/