TRAILER WEB APP

MINOR PROJECT REPORT

Submitted by
MOHANPATHI S
(19BCA025)

Under The Guidance Of

Dr. M Kiruthika M.Sc., M.Tech., Ph.D.,.
Associate Professor
Department of Computer Applications

In partial fulfilment of the requirement of the award of the Degree of

DEPARTMENT OF COMPUTER APPLICATIONS

of Bharathiar University

DEPARTMENT OF COMPUTER APPLICATIONS

PSG COLLEGE OF ARTS & SCIENCE

An Autonomous college - Affiliated to Bharathiar University

Accredited with 'A' Grade by NAAC (3rd cycle)
College with potential for excellence
(Status Awarded by the UGC)
Star College Status Awarded by DBT- MST
An ISO 9001:2015 certified Institution
Civil Aerodrome POST
Coimbatore- 641014

NOVEMBER 2021
 DEPARTMENT OF COMPUTER APPLICATIONS
PSG COLLEGE OF ARTS & SCIENCE
An Autonomous college - Affiliated to Bharathiar University
Accredited with 'A' Grade by NAAC (3rd cycle)
College with potential for excellence
(Status Awarded by the UGC)
Star College Status Awarded by DBT- MST
An ISO 9001:2015 certified Institution
Civil Aerodrome POST
Coimbatore- 641014

CERTIFICATE
This is to certify that this mini project work entitled “Trailer webApp” is a bonafide
record of work done by MOHANPATHI S (19BCA025) in partial fulfilment of the
requirements for the award of the Degree of Bachelor Of Computer Applications of
Bharathiar University.

___________________ ___________________
FAULTY GUIDE HEAD OF THE DEPARTMENT

Submitted for Viva-Voice Examination held on 26-11-2022

___________________ ___________________
Internal Examiner External Examiner
 DECLARATION

I, MOHANPATHI S (19BCA025), do here by declare that this Mini Project work entitled
“TRAILER WEBAPP”, is submitted to PSG College of Arts and Science (Autonomous),
Coimbatore in partial fulfilment for the award of the degree of BACHELOR OF COMPUTER
APPLICATIONS is a record of original work done by me under the supervision and guidance of
Dr. M. Kiruthika M.Sc., M.Tech., Ph.D.,. Assistant professor in Bachelor of Computer
Applications Department, PSG college of Arts & Science, Coimbatore.

This project work has not been submitted by me for the award of any other Degree/Diploma/
Associate ship/ fellowship or any other similar degree to any other university.

PLACE: COIMBATORE MOHANPATHI S

DATE:00-00-00 (19BCA025)
 ACKNOWLEDGEMENT

My venture stands imperfect without dedicating my gratitude to a few people who have
contributed a lot towards the victorious completion for my project work.
I would like to thank Thiru L. GOPALKRISHNAN, Managing Trustee, PSG&SONS
charities, for providing me prospect and surrounding that made the work possible.
I take this opportunity to express my deep sense of gratitude to Dr. T. KANNAN, Secretary
of PSG College of Arts & Science, Coimbatore for permitting and doing the needful towards the
successful completion of this project.
I thank our Principal Dr. BRINDHA M.Sc., M.Phil., Ph.D., MA (Yoga)., for her valuable
advice and concern on students.
I am very thankful to Dr. ANGURAJ, M.Sc., M.Phil., Ph.D., Vice Principal (Academics), Dr.
M. JAYANTHI M.Com., MBA., M.Phil., Ph.D., Vice Principal (Student Affairs), Prof. M.
UMARANI, MBA, M.Phil., Faculty-In-Charge (Student Affairs), for their support towards my
project.
I also thank Dr. R. SUDHA MCA., M.Phil., Ph.D., Head of the Department of Computer
Applications for help to complete this project successful by giving valuable suggestions.
I convey my heartiest thanks to my project guide Dr. M Kiruthika M.Sc., M.Tech., Ph.D.,
PhD., Associate Professor, Department of Computer Applications, for timely suggestion which had
enable me in completing the project successfully.
This note acknowledgement will be incomplete without paying my heartful devotion to my
parents, my friends and other people, for their blessing, encouragement, financial support and the
patience, without it would have been impossible for me to complete job.
 SYNOPSIS
Trailer webapp is an webapp for streaming movie trailers. At this webapp, we want to entertain
the world. The primary goal of the webapp is for offering online streaming trailers from a
library of films and television series, including those produced in-house. Whatever your taste,
and no matter where you live, we give you access to best-in-class TV shows, movies and
documentaries trailers with no ads.

Through this application any person who need to watch a movie trailer can watch
independent of time and language and chat with other users. Thus, webapp is a free-
based streaming movie trailers that allows people to watch TV shows and movies trailers
without commercials on an internet-connected device. You can watch from a wide variety of
movie trailers. You can review the system requirements for web browser compatibility, and
check your internet speed of Recommended megabits per second 1.5 and minimum of 0.5 to
achieve the best performance.

You can also view the most recently added movies and popular movies. A few featured movies
scroll across the main page, and you can browse through movies by genre. Every film trailers
has a rating, a full synopsis, and cast details. users can chat with all users in the webpage. users
can search for their desired film trailers in the search option for the results
 TABLE OF CONTENTS

TITLE

1. INTRODUCTION Pages

1.1. Project overview 1

1.2. Project description 1

1.3. Module description 2

2. SYSTEM SPECIFICATION 6

2.1. Hardware Specification 6

2.2. Software Specification 6

3. SYSTEM ANALYSIS 11

3.1. Existing System 11

3.2. Proposed System 12

4. SYSTEM DESIGN 13

4.1. Data Flow Diagram 13

4.2. Process Flow 14

5. SYSTEM TESTING & IMPLEMENTATION 16

5.1 System Testing 16

5.2 Implementation 16

6. APPENDIX 17

6.1 Screenshots 17

6.2 Sample Coding 21

7. CONCLUSION 27

8. FUTURE ENHANCEMENT 27

9. BIBLIOGRAPHY 28
 1. INTRODUCTION

1.1 Project Overview

The Trailer webapp is to entertain the people all around the world. Through this
application any person who need to watch a movie trailer can watch it and chat with
other users on the webpage. Moreover, people here enjoy TV series, documentaries and
feature films trailers across a wide variety of genres and languages. Also, they can watch as much as
they want, anytime, anywhere, on any internet-connected screen.

1.2 Project Description

This project is aimed to developing an streaming trailers on online. The entire project has
been developed keeping in view of the distributed client server computing technology.

Through this application any person who need to watch a movie trailer can
watch independent of time and language and chat with other users. Thus, webapp is a
free-based streaming movie trailers that allows people to watch TV shows and movies trailers
without commercials on an internet-connected device. You can watch from a wide variety of movie
trailers. You can review the system requirements for web browser compatibility, and check your
internet speed of Recommended megabits per second 1.5 and minimum of 0.5 to achieve the best
performance.

Using the constructs of Socket.io and NPM as a server all the user who are connected to our
webpage can chat with other users instantly.

1
1.3 Module Description

 Banner
 FilterbyGenre and Genre Component
 SearchOption and Search Component
 LiveChat Component
 GetCastInfo
 GenreBlock
 WatchTrailers
 movieInfo and its castInfos
 CastComponent
 SimiliarTrailersComponent
 FooterComponent

1.3.1 Banner
Banners are often used as hero images for category pages in this webapp websites, their
main purpose is to draw attention to a specific movie trailers. Banners can be placed
anywhere on a website, but on our side its typically located above main content blocks, or in
the website’s sidebars.

1.3.2 FilterbyGenre and Genre Component

It’s that time of year when we get cosy on the couch, ready to binge our favourite
shows. genre categorizes movies. Categorizing movies makes it easier for the viewer to
discover what he or she likes and will want to see. Putting a movie into a particular genre or
category does not diminish the quality of the movie by assuming that if it can be put into a
genre, the movie is ordinary and lacks originality and creativity.
Drama can be considered a genre, even though some critics do not consider it a
genre because it is too general. If the movie elements are serious and cannot fit into a more
limited genre, then it can be considered a drama.

Categorizing a movie indirectly assists in shaping the characters and the story of the movie. The
shaping determines the plot and best setting to use.

Movies often have genres that overlap, such as adventure in a spy movie, or crime in a science
fiction movie. But one genre is predominant.

2
Other movie labels cannot be considered genres. Film noir, thrillers, and action movies are not
actually genres but a director’s style, which will be discussed in a later chapter. They are considered
director’s style because their characteristics include cinematography and editing, which are not
among the four elements SimiliarTrailersComponenthat make up a genre. These labels reflect or
accentuate the movie genre rather than defining the genre.

Likewise, musicals and animation are not considered genres but rather “treatments” as to how a
particular movie genre is told, even though people, over generations, refer to these types of movies
as genres.

You have to be very specific in the discussion of movie terminology, sticking within the particular
definition of the terms. Some people will say that genres are labels that are given to stock movies,
stating that these movies are routine. Being labeled in a genre is not a negative action.

1.3.3 SearchOption and SearchComponent

search options are a set of filters offered by our webap. They narrow the scope of a
search query to eliminate irrelevant information to help you find the exact content you're
looking for.

1.3.4 LiveChat Component

Messaging has exploded in popularity. To meet their current and future customers’
expectations, more B2B marketing and sales teams are now putting live chat on their
websites. It only makes sense that Millennial expect live chat service–they grew up using
online chat and now want to get real-time answers on websites through messaging. But live
chat isn’t just for Millennial–the technology improves online experiences for all consumers
regardless of age.
Live chat is one of the more flexible tools you can use on your website. It helps you support
customers in need of help. It allows you to increase your sales by engaging the right
prospects at the right time as well as by generating a ton of new leads. Finally, it also can be
an invaluable source of knowledge about the state of our business, showing you the way,
you should take it.

3
1.3.5 GetCastInfo
With the use of this module users can see what the celebrity’s information like biodata and
their top movies.

1.3.6 GenreBlock
People will state that a particular movie had a good plot or an intriguing story.
Whatpeople are actually referring to is that they enjoyed the characters, the
problems/conflict the characters got into, and how the characters got out of the problems and
conflict.

People love a movie because they like to watch characters/people. How many people do you
know who like to go to the mall, plaza, or beach and state that they like to people watch?
How many people are nosey neighbors because they like to watch what is going on with the
people around them?

People may like to watch crime movies or Westerns. They like characters within this particular type
of story because of the amount of action or the time period setting. People may like Westerns
because they wish they lived in the 19th century because it was considered a simpler time.

The story is the situation that the characters are in and try to get out of, accomplish, conquer,
or overcome. The story has a beginning, middle, and end.

The plot is the outline or how the story is told. Remember when people state that they did not like
the plot? What they are referring to is that they did not like the story.

There are only a limited number of plots as the plot is a general outline for a story, like revenge. A
particular plot describes how a story will begin, develop, and end. This type of story will have a
different format than a plot such as man against nature or man versus the government.

1.3.7 WatchTrailers

Trailers have become inextricably linked with not only every movie theatre
experience, but online marketing. Every year on the Internet, consumers watch ten billion

4
videos -- and of these videos, movie trailers constitute the third most-watched category,
behind only news and user-created content.
Movie trailers have now become popular on DVDs and Blu-ray discs, as well as on the
Internet and mobile devices. Of some 10 billion videos watched online annually, film trailers
rank third, after news and user-created video.
By this module you can watch a trailer just what your seen in a YouTube.

1.3.8 MovieInfo and its castInfos and CastComponent

This module described a super-accurate movie finder site that can suggest the name of a
movie by a scene or plot description, an incomplete title, and actor's name. By “super-
accurate”, we mean that the site can easily find a film like Eternal Sunshine of the Spotless
Mind with the sparse description “erasing memories”.

1.3.9 SimiliarTrailers Component

Whenever you access the our service, our recommendations system strives to help you
find a show or movie to enjoy with minimal effort. We estimate the likelihood that you will
watch a particular title in our catalog based on a number of factors including:
 other members with similar tastes and preferences on our service, and

 information about the titles, such as their genre, categories, actors, release year, etc.

1.3.10 Footer component

This module is an area located at the bottom of every page on a website, below the main
body content. By the use of the footer clients can contact with us and they just need any
technical support

5
 2.SYSTEM SPECIFICATION

2.1 System Requirements

 You should use the latest Google Chrome, Firefox, MS Edge, and Safari.

 Your operating system should be Windows 7 or above, Mac OS X 10.7 or

above, or Ubuntu 10 or above.

 Your network connection should be at least 1 Mbps.

2.2Hardware Requirements
 dual core 2.5ghz 1mb L2 cache (Intel or AMD)

 2GB ram and high

 P-IV Processor Or higher.

2.3 Software Specifications

Front End: ReactJs, JavaScript, HTML, SASS
Back End: Nodejs, Express, Socket.io
Server: Node Package Manager [NPM]

Overview Of Front End

ReactJs:
React is the most popular front-end JavaScript library in the field of web
development. It is used by large, established companies and newly-minted startups
alike (Netflix, Airbnb, Instagram, and the New York Times, to name a few). React
brings many advantages to the table, making it a better choice than other frameworks
like Angular.js.
React is a JavaScript library created for building fast and interactive user
interfaces for web and mobile applications. It is an open-source, component-based,
front-end library responsible only for the application’s view layer. In Model View

6
 Controller (MVC) architecture, the view layer is responsible for how the app looks
and feels. React was created by Jordan Walke, a software engineer at Facebook. 

 Easy creation of dynamic applications

 Improved performance
 Reusable components
 Unidirectional data flow

 It can be used for the development of both web and mobile apps

JAVASCRIPT:
JavaScript is a scripting or programming language that allows you to implement
complex features on web pages — every time a web page does more than just sit there and
display static information for you to look at — displaying timely content updates, interactive
maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that
JavaScript is probably involved. It is the third layer of the layer cake of standard web
technologies

JavaScript is one of the core technologies of the World Wide Web. Over 97% of websites
use it client-side for web-page behavior, often incorporating third-party libraries. Most web
browsers have a dedicated Js engine to execute the code on the user’s device.

HTML:
HTML (Hypertext Markup Language) is used to create document on the World
Wide Web. It is simply a collection of certain key words called ‘Tags’ that are helpful in
writing the document to be displayed using a browser on Internet. It is a platform
independent language that can be used on any platform such as Windows, Linux, Macintosh,

7
and so on. To display a document in web it is essential to mark-up the different elements
(headings, paragraphs, tables, and so on) of the document with the HTML tags. To view a
mark-up document, user has to open the document in a browser. A browser understands and
interpret the HTML tags, identifies the structure of the document (which part are which) and
makes decision about presentation (how the parts look) of the document. HTML also
provides tags to make the document look attractive using graphics, font size and colors. User
can make a link to the other document or the different section of the same document by
creating Hypertext Links also known as Hyperlinks.

SASS:
Sass (which stands for Syntactically Awesome Style Sheets) is an extension to CSS.
It doesn't really change what CSS can do, Saas includes various features such as variables,
nested rules, mixins, inline imports, built-in functions to manipulate color and other values,
all with a fully CSS-compatible syntax.

 Sass stands for Syntactically Awesome Stylesheet

 Sass is an extension to CSS
 Sass is a CSS pre-processor
 Sass is completely compatible with all versions of CSS
 Sass reduces repetition of CSS and therefore saves time
 Sass was designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006
 Sass is free to download and use

Overview of backend:

NodeJs
Node.js is an open-source, cross-platform, JavaScript runtime environment that
executes JavaScript code outside of a web browser. Node.js is a popular, lightweight web
framework for beginners, and it is used by many big companies like Netflix and Uber.

When we typically think of JavaScript, our mind tends to go to web development. Until Node.js
came along, there was really no way to run JavaScript outside of a browser. When we write a
backend server and database, Node.js is a popular choice because we can run our code as a
standalone application rather than something that can only be evaluated in a browser environment.

8
Node.js is an important tool for any JavaScript developer to understand. So, today, we’ll introduce
you to Node.js and show you how to get started with a project.

Node.js is an open-source, cross-platform JavaScript runtime environment used for executing

JavaScript code outside of a web browser.

Node.js is a great web framework for beginners because it works great for data intensive application
like streaming and real-time apps, and Node.js makes it easy to start building backend application

Node.js allows us to use JS everywhere and on any browser, including MacOS, Linux, and
Windows. When we say everywhere, we mean the front-end, the middle-ware, and the back-end.
Node.js is, therefore, part of some very popular web development stacks, such as the MERN stack,
MEVN stack, and MEAN stack.

Express
Express is a small framework that sits on top of Node.js’s web server functionality to
simplify its APIs and add helpful new features. It makes it easier to organize your
application’s functionality with middle ware and routing; it adds helpful utilities to Node.js’s
HTTP objects; it facilitates the rendering of dynamic HTTP objects.

Express is a part of MEAN stack, a full stack JavaScript solution used in building fast, robust, and
maintainable production web applications. n a traditional data-driven website, a web application
waits for HTTP requests from the web browser (or other client). When a request is received the
application works out what action is needed based on the URL pattern and possibly associated
information contained in POST data or GET data. Depending on what is required it may then read or
write information from a database or perform other tasks required to satisfy the request. The
application will then return a response to the web browser, often dynamically creating an HTML
page for the browser to display by inserting the retrieved data into placeholders in an HTML
template.

Express provides methods to specify what function is called for a particular HTTP verb ( GET, POST,
SET, etc.) and URL pattern ("Route"), and methods to specify what template ("view") engine is
used, where template files are located, and what template to use to render a response. You can use
Express middleware to add support for cookies, sessions, and users, getting POST/GET parameters,

9
etc. You can use any database mechanism supported by Node (Express does not define any
database-related behaviour).

Socket.io
Socket.IO is a library that enables real-time, bidirectional and event-based
communication between the browser and the server. It works on every platform, browser or
device, focusing equally on reliability and speed.

Writing a real-time application with popular web applications stacks like LAMP (PHP) has
traditionally been very hard. It involves polling the server for changes, keeping track of timestamps,
and it is a lot slower than it should be.

Sockets have traditionally been the solution around which most real-time systems are architected,
providing a bi-directional communication channel between a client and a server. This means that the
server can push messages to clients. Whenever an event occurs, the idea is that the server will get it
and push it to the concerned connected clients.

Socket.IO is quite popular, it is used by Microsoft Office, Yammer, Zendesk, Trello,. and numerous
other organizations to build robust real-time systems. It one of the most powerful JavaScript
frameworks on GitHub, and most depended-upon NPM (Node Package Manager) module.
Socket.IO also has a huge community, which means finding help is quite easy.

Server
NPM:
 npm is the world's largest Software Registry.
 The registry contains over 800,000 code packages.
 Open-source developers use npm to share software.
 Many organizations also use npm to manage private development.
NPM – or "Node Package Manager" – is the default package manager for JavaScript's runtime
Node.js.
It's also known as "Ninja Pumpkin Mutants", "Non-profit Pizza Makers", and a host of other
random names that you can explore and probably contribute to over at npm-expansions.
NPM consists of two main parts:
a CLI (command-line interface) tool for publishing and downloading packages, and
an online repository that hosts JavaScript packages

10
For a more visual explanation, we can think of the repository npmjs.com as a fulfilment centre that
receives packages of goods from sellers (npm package authors) and distributes these goods to
buyers (npm package users).

3. SYSTEM ANALYSIS

3.1Existing System
Watching a movie trailer, people usually use YouTube and search for the trailers or browse for
it. If we need to watch a trailer without any kind of advertisement, we need to pay for the specific
platform. People have to wait until the advertisement get over, It may upset the users and also the
trailers they are watching.

Disadvantage
 There will be the retardation for the search
 Unwanted resources
 Annoying advertisement
 Fewer Users – Friendly
 Need subscription

11
3.2 Proposed System

 In this webapp, you can watch any trailers of the movie independent of any language
 ad free content
 official resources
 live chat
 contains bunch of trailers with desired genre
 watch similar trailers
 get information about the celebrities of the specific movie trailers

12
 4. SYSTEM DESIGN

4.1 Dataflow diagram:

A data-flow diagram (DFD) is a graphical representation of the "flow" of data
through an information system. DFDs can also be used for the visualization of data
processing (structured design). On a DFD, data items flow from an external data source or
an internal data store to an internal data store or an external data sink, via an internal
process.

13
4.2 Process Flow

Figure 4.2.1

14
Figure 4.2.2

15
 Figure 4.2.3

5. SYSTEM TESTING AND IMPLEMENTATION

5.1 System Testing

It is the stage of implementation, which ensures that system works accurately and effectively
before the live operation Commences. It is a confirmation that all are correct and gives opportunity
to show the users that the system must be tested with test data and show that the system will operate
successfully and produces expected results under expected conditions.

The purpose of system testing to identify and correct errors in the candidate system. As important as
this phase is, one is frequently compromised. Testing is vital to the parts of the system.so that the
goal will be successfully achieved. Inadequate testing or non-testing leads to errors that may not
appear until months later. This creates two problems: • The time lag between the cause and
appearance of the problem. • The effect of system errors on files and records within the system.

5.2 Implementation
System implementation is the important stage of protect where the theoretical design is
tuned into the practical system. The main stages in the implementation are as follows:
• Planning
• Training
• System testing and
• Changeover Planning
Planning is the first task in the system implementation. Planning means deciding on the method
and the time scale to be adopted. At the time of implementation of any system people from different
departments and system.

16
 6.APPENDICES
6.1 Screenshots
6.1.1 Banner

6.1.2 FilterByGenre

17
6.1.3 Genre Component

18
6.1.4 Search Option

19
6.1.5 Live Chat Component

20
6.1.6. Genre Block

21
6.1.7. Watch trailers

6.2 Sample Coding

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

import TopMovies from "./components/TopMovies";
import LatestMovie from "./components/LatestMovie";
// import { ReactComponent as AnimatedMan } from "./svg/movieMap.svg";
import { ReactComponent as AnimatedMan } from "./svg/manWithPopcorn.svg";
import { Link } from "react-router-dom";
import Aos from "aos";
import "aos/dist/aos.css";

22
import Banner from "./components/Banner";
import HorrorMovies from "./components/HorrorMovie";
import ActionMovies from "./components/ActionMovies";
import ScifiMovies from "./components/ScifiMovies";
import ThrillerMovies from "./components/ThrillerMovies";
import Adventure from "./components/Adventure";
import FantasyMovies from "./components/FantasyMovies";
import { useStateValue } from "./providers/StateProvider";
import ActorSearch from "./components/ActorSearch";
import Footer from "./components/Footer";
const App2 = () => {
const [topMovies, setTopMovies] = useState([]);
const [movie, setMovie] = useState("");
const [isLoading, setIsLoading] = useState(true);
const [togglebackground, setToggleBackground] = useState(true);
const [{ color }, dispatch] = useStateValue();
const [isFetch, setIsFetch] = useState(true);

const getMovies = async () => {

const value = movie;
const url = `https://api.themoviedb.org/3/search/movie?
api_key=cc630c305ca164cb79b2b881fb6a1718&query=${value}`;
const res = await fetch(url);
const resJson = await res.json();
if (resJson.results) {
setTopMovies(resJson.results);
setIsLoading(false);
}
};
useEffect(() => {
Aos.init();
setTimeout(() => {
setIsFetch(false);
}, 3000);
}, []);

23
useEffect(() => {
getMovies();
}, [movie]);

const handleToggle = () => {

setToggleBackground(!togglebackground);
dispatch({ type: "SETCOLOR", color: !color });
};

useEffect(() => {
const toggleSvg = document.querySelector("#handle");
const light = document.querySelector("#light");
if (toggleSvg) {
toggleSvg.classList.add("handle-up");
if (!togglebackground) {
toggleSvg.classList.add("handle-down");
toggleSvg.classList.remove("handle-up");
} else {
toggleSvg.classList.remove("handle-down");
toggleSvg.classList.add("handle-up");
}

if (toggleSvg.classList.contains("handle-down")) {
light.classList.add("light-down");
} else {
light.classList.remove("light-down");
}
}
}, [handleToggle]);

return (
<React.Fragment>
<div className={color ? "App bg-black" : "App bg-white"}>
<Banner />

24
<div className="container">
<div className="topBar">
<h1>Your Movies</h1>
<div className="input">
<input
value={movie}
placeholder="live search"
onChange={(e) => setMovie(e.target.value)}
/>
<ActorSearch />
</div>
</div>
<div className="major-container">
{isLoading && (
<div className="animatedMan">
<AnimatedMan onClick={handleToggle} />
</div>
)}

{topMovies.map((movie) => {
if (movie.poster_path) {
return (
<div className="minor-container" key={movie.id}>
<Link
to={`/movie/${movie.id}`}
style={{ textDecoration: "none" }}
>
<img
src={`https://image.tmdb.org/t/p/original/${movie.poster_path}`}
alt={movie.id}
/>
<h3 className="title">
{movie.title} {movie.year}
</h3>
</Link>

25
</div>
);
}
})}
</div>
</div>

<div className="LatestMovie-container">
<h1 data-aos="fade-up-left" data-aos-delay="50">
Latest Movies
</h1>
<LatestMovie />
</div>
<div className="TopMovie-container">
<h1 data-aos="fade-up-left" data-aos-delay="50">
Top Movies
</h1>
<TopMovies />
</div>
<div className="Movie-container ActionMovie-container">
<h1 data-aos="fade-up-left" data-aos-delay="50">
Action Movies
</h1>
<ActionMovies />
</div>

<div className="Movie-container Adventure-container">

<h1 data-aos="fade-up-left" data-aos-delay="50">
Adventure Movies
</h1>
<Adventure />
</div>

<div className="Movie-container HorrorMovie-container">

<h1 data-aos="fade-up-left" data-aos-delay="50">

26
Horror Movies
</h1>
<HorrorMovies />
</div>

<div className="Movie-container HorrorMovie-container">

<h1 data-aos="fade-up-left" data-aos-delay="50">
Sci-fi Movies
</h1>
<ScifiMovies />
</div>

<div className="Movie-container Thriller-container">

<h1 data-aos="fade-up-left" data-aos-delay="50">
Thriller Movies
</h1>
<ThrillerMovies />
</div>

<div className="Movie-container Fantasy-container">

<h1 data-aos="fade-up-left">Fantasy Movies</h1>
<FantasyMovies />
</div>
</div>
<Footer />
</React.Fragment>
);
};

export default App2;

import React, { createContext, useReducer, useContext } from "react";

export const StateContext = createContext();
const StateProvider = ({ initialState, reducer, children }) => {
return (

27
<StateContext.Provider value={useReducer(reducer, initialState)}>
{children}
</StateContext.Provider>
);
};

7 CONCLUSTION

Video Streaming is a technology that has completely changed the entertainment industry as
well as consumption models among audience members. A lot has changed since that very
first Real Player transmission in 1995.  Since then, technology has been constantly
improving, making content delivery and access easier no matter the platform trying to access
it.

Our Trailer webApp is one of the best examples regarding commercial applications for
Video Streaming. Our webApp has found a way to capitalize it services using its title stock
and outsourced infrastructure.

8 FUTURE ENCHANCEMENT
 To make webapp available on all the internet accessible devices
 ad free for the future
 To develop further favourable relationships with production studios in order
to expand their video library
 The commitment towards having an impact on societies over and above
entertaining them is a factor that our webApp holds with high regard

28
 9. BIBILOGRAPHY
Dixon, W. W. (2013). Streaming: Movies, media, and instant access.

This is the most important book consulted during my research for this paper. As the title suggests
this is a book about streaming technology and how it has made an impact on today’s society. Quite
certainly, the book is fundamental because of the insights on streaming technology as well as its
functionality.

Tryon, C. (2013). On-demand culture: Digital delivery and the future of movies. New Brunswick,
N.J: Rutgers University Press

29