Mahatma Jyotiba Phule Rohilkhand University, Bareilly

Institute of Engineering and Technology

2021-2022

Minor Project Report

BOX-OFFICE-APP USING REACT JS
CS-302P Minor Project

Submitted By:- Under the Guidance:-

Bharat Joshi (19CS69) Asst. Prof. Pankaj Roy

Anurodh Kumar (19CS13) Project Incharge:-

Harshit Kumar Singh (19CS25) Prof. S.S. Bedi

Anurag (19CS12) Asst. Prof. B.R. Ambedkar

 CONTENT

1. Declaration

2. Acknowledgement

3. Certification of the guide

4. Abstract

1. Introduction

2. Objective

3. System Requirements

4. Flowchart

5. Technical Insights

6. Code & Output

5. References

6. Plagiarism check report

 DECLARATION

We the undersigned solemnly declare that the project report entitled

“BOX-OFFICE-APP USING REACT JS”
is based on our own work carried out during the course of our study under the
supervision of Asst. Prof. Pankaj Roy .We assert the statements made and
conclusions drawn are an outcome of our research work. We further certify that

 The job done by us for the report is original, and it was done so with
our supervisor's general approval.

 The work hasn't been submitted to any other institution, university

in India or overseas, or for any other degree, certification, or
certificate.

 In preparing the report, we adhered to the university's instructions.

 Whenever we have taken information from other sources, we have

acknowledged them and included their names in the references.

DATE:
Bharat Joshi (19CS69)

Anurodh Kumar (19CS13)

Harshit Kumar Singh (19CS25)

Anurag (19CS12)
 ACKNOWLEDGEMENT

We would like to express our gratitude towards our mentor Asst. Prof.

Pankaj Roy and our Honourable Prof. S.S Bedi, Head of Department,

Computer Science & Information Technology, MJPRU, Bareilly

for their support in the accomplishment of our project.

Would also want to express my sincere gratitude to everyone in the group.

We would not have been able to finish this project by the deadline

without assistance and coordination.

DATE:
Bharat Joshi (19CS69)

Anurodh Kumar (19CS13)

Harshit Kumar Singh (19CS25)

Anurag (19CS12)
 CERTIFICATION OF THE GUIDE

This is to certify that the work incorporated in the project report entitled

“BOX-OFFICE-APP USING REACT JS”

is a record of work carried out by Bharat Joshi (19CS69), Anurodh Kumar (19CS13),

Harshit Kumar Singh (19CS25), Anurag (19CS12) under my guidance and supervision

for the 6 th Semester Minor project, Department of Computer Science & Information

Technology, MJP Rohilkhand University, Bareilly.

Date: Mr. Pankaj Roy

Assistant Professor
 BOX-OFFICE-APP USING REACT JS
ABSTRACT:
Box office app made using React JS displays the data about the web-series movies, and actors/actresses which is fetched
with the help of an API TV Maze. It displays basic data about the shows such as current status of the show, premiered date, total
number of seasons, and the cast. It also displays basic data about the actors such as name, birthdate etc. and also has an option
of liking a show which will be displayed in a different page named as Starred where all our liked shows will be present and
wecan also do the reverse process of it.

1. INTRODUCTION
Since digitalisation , entertainment industry especially OTT platforms have shown a huge growth in popularity and
binging our favourite shows has become a part of our lifestyle which everyone enjoys with a tub of popcorn. That’s where our
motivation came to build this fun project named box-office-app. It’s a single-page web app made using React Js and Node Js
which fetches data from a popular API - TV Maze and displays the results in form of a beautiful UI. The app shows information
about the searched shows such as their premiered date, rating of the show, number of seasons, cast and crew, and the current
status of the show. It also has a search option for actors and actresses which displays basic information about them such as their
birthdate, the country they belong to and their current status. This app can be used in a fun and informative way by those who
like to remain updated with the entertainment industry and those who are fond of watching these web shows and movies. We
made this app using React which is by far the most widely used JavaScript front-end library right now. Businesses of all sizes
are implementing this commonly utilised technology. On their websites and mobile applications, well-known brands like
Netflix, Airbnb, The New York Times, and many others already make use of it. React's popularity increased primarily as a
result of how quickly React web applications run in comparison to those created with Angular. React provided a number of
ideas that addressed the shortcomings of earlier front-end frameworks.

2. OBJECTIVE
The objectives behind making this box-office-app were:

• To make a single page web app using React Js

• To make a web app that provides information about the latest shows, movies, and web series
• To fetch the data successfully from the API and display it in the form of a responsive UI
• To make a web app that provides information about all the renowned actors/actresses of the world
• To make a single page web app which can be fun to use and can be used by people of all ages and is informative as
well

3. SYSTEM REQUIREMENTS
 OPERATING SYSTEM: The web app can successfully run on any operating system.
 FRONT END : The front end of this web app is made using React Js
 BACK END: The web app uses no back end to store data. It only uses an API to fetch the data
 API : The data that is being displayed in the app comes from an API which is TV Maze. The root url of the API
is https://api.tvmaze.com .
 TOOLS USED : The ide used in this project is Microsoft Visual Studio Code
 RUN PROJECT : The project uses Node Package Manager for the Node Js platform to run the Javascript outside
browser
 DEPLOYMENT: The project is successfully deployed over Githuband uses Github pages for hosting. The website
link is given below :
https://bharatjoshi3000.github.io/box-office-app/#/
4. FLOWCHART
5. TECHNICAL INSIGHTS
To start with building the app we first use the command create-react-app
create The ideal method to begin developing a
new single-page
page application in React is with Create React App, which provides a welcoming learning environment for the
technology.

It optimises your app for production, sets up your development environment so you can leverage the most recent JavaScript
capabilities, and offers a pleasant developer experience. Node >= 14.0.0 and npm>= 5.6 must be installed on your computer.

Our main working app code will be written in file app.js which will be mounted over index.js which
ch would be rendered on the
site. We have used React JSX which stands for Javascript Syntax Extension with the help of which we can insert dynamic java
script with HTML into react components.

React components are separate, reusable pieces of code. They accomplish

accomplish the same thing as JavaScript functions, but they
operate independently and output HTML.

There are two sorts of components: class components and function components. For this lesson, we will focus on function
components.

 Class components: The extends

ds React. The component declaration is a requirement for class components. With this
declaration, your component gains access to React.Component’s functions and forms an inheritanceto it.The
component also needs to implement the render() method, which outp
outputs HTML.

Class Component

 Function components: A Function component may be constructed with considerably less code, is simpler to grasp, and
will be preferred in this lesson even if it also returns HTML and functions similarly to a Class component.

Function Component
 PROPS
In the components, we pass some props that are passed on from the parent component to the child
component.Prop stands for properties and they can be considered as the arguments that are been passed inside the
components.

These components can only be read. It is an object that functions similarly to HTML attributes in that it stores the value of
a tag's attributes. It provides a method for data to be sent between components. They are comparable to function arguments.
The component
omponent receives props in the same manner as function parameters.

Since props are immutable, we are unable to change them from within the component. We can include props, or attributes,
inside the components. These attributes may be used to render dynamic data in our render method and are accessible in the
component as this.props.

 STATE
Data or information about the component are stored using a built built-in
in React object called the state. A
component may change over time, and each time it happens, a new render
rendering
ing of the component isproduced.
Changes in the component's state, which may take place in response to user input or system-generated
system events,
determine the component's behaviour and presentation. State can be altered by event handlers, server responses, or
adjustments to a prop. This is accomplished by using the setState() method.
By enqueuing all state updates made to the component, the setState() function instructs React to re-render
re the
component and all of its descendants with the modified state.

 useSTATE
The useState Hook must first be imported into our component before we can use it.By executing useState in
our function component, we initialise our state.

UseState returns two values after accepting an initial state:

1. the state right now.
2. a procedure that alters the state.
Strings, numbers, booleans, arrays, objects, and any combination of these can be tracked with the
useState Hook, to track different values, we may make several state hooks.Alternatively, we could just utilise one
state and add an object!

 PROPS VS STATE
 HOOKS

The newest added functionality in React 16.8 are hooks. They permitted class-free
free use of state and other React
capabilities

UseState in this instance is a hook (more on what this entails in a moment).

We use a function component to call it inside of to provide it some local state.
Between re enables updating it are returned as a pair by useState. This function can be used
elsewhere or in an event handler. It is comparable to this. setState in a class starting state is th
the only
argument given to useState. Since our counter starts at example. Though it is optional, the state in
this case does not have to be an object, unlike this. state. Only the initial render makes use of the
initial state argument.

 CREATING CUSTOM HOOKS

In React 16.8, hooks are a brand-new
brand new feature. They provide state and other React capabilities without the need
for class creationYou can convert component logic into reusable functions by creating your own Hooks.We extract the
logic to a third function when
n we want to share it between two JavaScript functions. This also applies to components
and hooks since they are both functions.A JavaScript function with the word "use" at the beginning and the ability to
call other Hooks is known as a custom hook. As an illustration, the following useFriendStatus custom hook

A custom Hook does not need to have a particular signature like a React component does. What it accepts as
support and what, if anything, it should return is up to us to decide. In other words, it runs exactly like a typical
process. Its name should always begin with use so that you can tell right away whether something abides by the Hooks
guidelines.
  REACT ROUTER
A common library for routing in React is called React Router. It permits switching between views of different
React Application components, permits changing the browser URL, and keeps the UI in sync with the URL.

The React Router Package, a standard library system built on top of React, is used to implement routing in React
applications. It gives the information that will be displayed on the web page to the synchronous URL in the browser. It
is mostly used for creating one-page web apps and preserves the application's regular structure and functionality.
A common library for routing in React is called React Router. It permits switching between views of different React
Application components, permits changing the browser URL, and keeps the UI in sync with the URL.
The method of routing involves sending users to various websites in response to their requests or actions. The major
application for ReactJS Router is the creation of single page web applications. Multiple routes are defined in the
application using React Router. A user will be sent to a specific route when they enter a particular URL into their
browser and that URL path matches any of the "routes" in the router file.

 ESLint:
A javascript programme called ESLint scans code for potential mistakes and poor coding techniques. It aids in
enforcing a style manual and code standard throughout your codebase. ESLint can be added to any JavaScript code. It
extends beyond React Projects. It can be used with projects that use vanilla Javascript, Node.js, or Vue.js. It is very
configurable and pluggable. Multiple plugins and extensions are supported by ESLint to increase and expand its
capability.

Due of ESLint's popularity and usefulness, various significant organisations have produced their own style manuals based
on it.

The ESLint configuration that comes with Create React App's React project setup will find and report any bugs in your
code. The actions listed below can be used to advance the situation.

 PRETTIER
Prettier is a code formatter that supports a number of different languages. The majority of IDEs and Text Editors
are compatible with it. Here, we'll set it up so that it can cooperate with ESLint. This is crucial since the default setup
or your IDE/Editor may format your code otherwise than what is required for the ESLint configuration you have
chosen.

Both the ESLint configuration and the prettier plugin are required for it.

Then, you must inform ESLint about the plugins you have accessible that it should support, which in this case are prettier.
Simply include the Prettier plugin option in your ESLint configuration.

 REDUCER
A reducer is a simple function that takes the current state and an action object as its 2 inputs. The reduction
method must change the state in an immutable manner and return the new state depending on the action object.

 REACT ANIMATION
A collection of animations that can be utilized with any inline style library, like Radium or Aphrodite, that permits the
definition of keyframe animations using objects. All of the animations in animate.css are implemented using react-animations.

Some of the available animations are listed below-

bounceOut bounce bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp

bounceOutDown bounceOutLeft bounceOutRight bounceOutUp fadeIn fadeInDown fadeInDownBig

fadeInLeft fadeInLeftBig fadeInRigh fadeInRightBig fadeInUp fadeInUpBig fade away
  GIT
Git is a DevOps tool for managing source code. It is a version control system that can efficiently manage small to very
big projects and is free and open source. Git is a tool for tracking source code changes that enables several developers to work
together on non-linear development.

Git was developed in 2005 by Linus Torvalds for the Linux kernel development.

Pre-Git scenario:

• Without having their own copy, developers submitted their codes to a central server using other people's codes.

• Other developers were unaware of any source code modifications.

• There was no communication between any of the developers.

After Git scenario:

• On their local machine, each developer has a complete copy of the code.

• Source code modifications can be tracked by others.

• Developers communicate on a frequent basis.

Functions of Git

• Route history

• Open source and free

• Encourages non-linear growth

• Creates backups

• Modular

• Encourages cooperation

Branching is simpler.

• Distributed construction

Git workflow

There are three different states in the Git workflow:

• Working directory – Edit files in your working directory

• Workspace (Index) - Arrange the files and include their images.

• Git directory (repository) - Create a commit to save the snapshots to your Git directory on a permanent basis. Try any current
version, then organise, make changes, and commit them.
  GITHUB
GitHub is a programming resource that is becoming more and more well-liked for code sharing. Many businesses and
organisations utilise it as a social network for programmers to streamline project management and collaboration.

It is the most significant source code host, with more than 60 million new repositories generated in 2020 and more than 56
million developers, according to data gathered in October 2020.

GitHub is a hosting service for Git repositories that offers a web-based graphical user interface. It is the biggest coding
community in the planet. Your project's or code's extensions grow and expand when you embed it on GitHub. Programmers can
access source codes in a wide variety of languages and track any changes using the Git command-line interface.

Every team member can easily and remotely participate on a project with the aid of GitHub. Additionally, you can view prior
versions that were made.

Features of Github include:

1. Easy project management

Project managers and developers collaborate on GitHub to plan, monitor, and update their work so that projects are transparent
and completed on time.

2. Package security is improved

Packages may be made available to the open source community in public, privately, or within a team. The use of packages is
enabled by obtaining them from GitHub.

3. Effective team management

Using GitHub, the team can stay coordinated and on the same page. The team may concentrate on the code with the aid of
moderating tools like Issue and Pull Request Locking.

4. Enhanced programming
Organizations use pull requests to improve, create, and design new code. Before making any source code changes, team
members can utilise them to discuss any implementations and ideas.

5. More secure coding

GitHub employs specialised tools to find and examine code flaws that other tools generally overlook. Global development
teams collaborate to safeguard the entire software supply chain.

6. Simple code hosting

The code and documentation are both in one location. On GitHub, there are millions of repositories, and each one has its own
set of tools for hosting and disseminating code.

Now that we've gotten a little familiar with GitHub, let's take a look at the competition.
The basics of GitHub are:
• Storage

• Branches

• Agrees to

• Pull requirements

• Git (the version control software GitHub is built on)

Example
$ git push origin heroku

$ cd /etc/

$ ls

 STORAGE
A development project can be kept in a GitHub repository.

Any kind of files, including directories, may be present (HTML, CSS, JavaScript, Documents, Data, Images).

An informational README file and a licence file for the project should also be included in the GitHub repository.

You may save concepts or other materials you want to share in GitHub repositories.

Branch
To work with several versions of the repository simultaneously, utilise a GitHub branch.

The repository comes with a master branch by default (production branch).

The master branch is a replica of all other branches (as it was at some point).

Bugs and features are worked on in new branches apart from the main branch. The modifications can be merged into the master
branch once they are complete. Updates can be downloaded if you make adjustments to the master branch while working on the
new branch.

Agrees to

 Changes are referred to as commits on GitHub.

 There is a description for every commit (change) that explains the change's motivation.
 Take the specifications.
 The centre of GitHub cooperation is the pull request.
 You can request that your modifications be integrated (pulled) to the main server by submitting a pull request.
 Pull requests display content discrepancies, modifications, and colour additions and deletions (green and red).
 Before the code is finished, you may open a pull request once you have a commit and have a conversation.
6. CODE AND OUTPUT

 INDEX.JS: • APP.JS:
 OUTPUT:
  REFERENCES

[1] API: https://api.tvmaze.com

[2] JAVA T POINT : https://www.javatpoint.com/
[3] REACT JS : https://reactjs.org/
[4] GEEKS FOR GEEKS :https://www.geeksforgeeks.org/reactjs-state-react/
[5] W3SCHOOLS :https://www.w3schools.com/
[6] BETTER PROGRAMMING : https://betterprogramming.pub/
[7] FREECODECAMP: https://www.freecodecamp.org/news/beginner-s-guide-to-react-
router-53094349669/
[8] INKOOP: http://surl.li/cqdft
 PLAGIARISM CHECK REPORT