EPAM Project Report

Netflix Clone Website

A Training Report

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

Bachelor of Technology
Computer Science and
Engineering
(Web Developement)

LOVELY PROFESSIONAL UNIVERSITY

PHAGWARA, PUNJAB

From 23/01/2023 to Present

SUBMITTED BY SUBMITTED TO
Name: Surender Singh
Name of the supervisor: Sandeep Kaur
Registration Number:
Designation:
11917416
Signature of the supervisor:
EPAM Project Report
1
 Student Declaration

To whom so ever it may concern

I, Surender Singh, 11917416, hereby declare that the work done by me on

"EPAM TRAINING" from 24th Jan-2023 to Present, under the supervision of Sandeep Kaur,
and Name of Internal supervisor - Sandeep Kaur Lovely Professional University,

Phagwara, Punjab, 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)

Surender Singh (l 1917416)

Surender Singh

Signature of the student Dated: 04/05/2023

2
 Declaration by the supervisors

To whom so ever it may concern

This is to certify that Surender Singh 11917416 from Lovely Professional University,
Phagwara, Punjab, has worked in EPAM Training on "WEB DEVELOPMENT" under my
supervision from 24th Jan,, 2023 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

Sandeep Kaur

Assistant Professor
Designation of the Internal Supervisor
Signature of the external 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
Surender Singh Reg. No. 11917416 student of 8 th semester Computer Science and Engineering
in Bachelor of Technology of Lovely Professional University, Phagwara, Punjab during the
academic session of 2022-2023.

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/