Internship Report

VISVESVARAYA TECHNOLOGICAL UNIVERSITY

Jnana Sangama, Belagavi-590018.

An Internship Report on

“MovieMaven Single Page Web Application with ReactJS and Redux”
Submitted in the partial fulfilment of the requirements for the award of the Degree of
Bachelor of Engineering
in
Information Science and Engineering
By
RISHABH SAHU (1OX19IS080)
Under the guidance of
Mr. Yadhukrishna M R
Assistant Professor, Department of Information Science & Engineering
Department of Information Science and Engineering

THE OXFORD COLLEGE OF ENGINEERING
Bommanahalli, Bangalore 560068
2022-23
Hosur Road, Bommanahalli, Bengaluru-560068
(Affiliated to VISVESVARAYA TECHNOLOGICAL UNIVERSITY, Belagavi)
CERTIFICATE
Certified that the Internship Project Work entitled “MovieMaven Single Page
Web Application with ReactJS & Redux” carried out by RISHABH SAHU
(1OX19IS080), bonafide student of The Oxford College of Engineering, Bengaluru
in partial fulfilment for the award of Degree of Bachelor of Engineering in
Information Science and Engineering of the Visvesvaraya Technological University,
Belagavi, during the year 2022-2023. It is certified that all corrections/suggestions
indicated for Internal Assessment have been incorporated in the Report deposited in
the departmental library. The project report has been approved as it satisfies the
academic requirements in respect of Project work prescribed for the said Degree.
Mr. Yadhukrishna MR Dr. R. Kanagavalli Dr. N.Kannan
Asst. Prof, Dept. of ISE Prof & Head, Dept. of ISE Principal, TOCE
1. Internal Examiner: ___________________
2. External Examiner: ___________________
ii
Hosur Road, Bommanahalli, Bengaluru-560068
(Affiliated to VISVESVARAYA TECHNOLOGICAL UNIVERSITY, Belagavi)
DECLARATION
I the students of Eighth Semester B.E, at the Department of Information Science and
Engineering, The Oxford College of Engineering, Bengaluru declare that the
Internship Project Work entitled “MovieMaven Single Page Web Application with
ReactJS and Redux” has been carried out by me and submitted in partial fulfillment
of the course requirements for the award of degree in Bachelor of Engineering in
Information Science and Engineering discipline of Visvesvaraya Technological
University, Belagavi during the academic year 2022-2023. Further, the matter
embodied in dissertation has not been submitted previously by anybody for the award
of any degree or diploma to any other university.
Name USN Signature
Rishabh Sahu 1OX19IS080
Date: Place: Bangalore
iii
ACKNOWLEDGEMENT
The satisfaction and euphoria that accompany the successful completion of any
task would be incomplete without the mention of people who made it possible whose
constantguidance and encouragement crowned our effort with success.
I consider myself proud to be a part of The Oxford family, the institution that
stood by my way in all our endeavors. I have a great pleasure in expressing my deep
sense of gratitude to the founder chairman Late Shri S. Narasaraju and to chairman
Sri S.N.V.L. Narasimha Raju for providing us with a great infrastructure and well-
furnished labs.
I would like to express our gratitude to Dr. N.Kannan, Principal, The Oxford
College of Engineering for providing us a congenial environment and surrounding to
work in.
My hearty thanks to Dr. R. Kanagavalli, Professor and Head, Department of
Information Science and Engineering, The Oxford College of Engineering for her
encouragement and support.
Guidance and deadlines play a very important role in successful completion of
the project report on time. I convey my gratitude to Mr. Yadhukrishna M R,
Assistant Professor, Department of Information Science and Engineering for having
constantly monitored the completion of the Internship Project Report and setting up
precise deadlines.
Finally, a note of thanks to the Department of Information Science and

Engineering, both teaching and non- teaching staff for their cooperation extended to
us.
RISHABH SAHU (1OX19IS080)
iv
ABSTRACT
The purpose of MovieMaven is to automate the existing manual system with the help of
computerized equipment and full-fledged computer software, fulfilling their requirements.
MovieMaven is powered by an API that provides the latest and most accurate information about
your favorite films and TV shows. With this cutting-edge technology, we can offer you a
comprehensive database of movies, including details such as release date, director, actors, plot
synopsis, ratings, and more. The project describes a movie catalogue that is designed to make it
easy for you to browse through a wide range of genres, from action-packed blockbusters to indie
dramas, and discover new films that match your interests. You can search by title, actor,
director, or keyword, or simply browse through our curated collections of popular and critically
acclaimed movies. With regular updates and new releases added constantly, you'll always be up-
to-date on the latest and greatest in the world of cinema. Users can filter the search results based
on a variety of criteria such as genre, release date, casting and rating, to better cater to their
preferences.
Keywords:- API, Cutting-Edge Technology, Catalogue, etc
v
TABLE OF CONTENTS
TITLE PAGE NO.

1. COMPANY PROFILE 1
2. ABOUT THE COMPANY 2
3. TASK PERFROMED 5
3.1 Introduction 5
3.2 System Requirement Specification 6
3.2.1 Requirement Specification 6
3.2.1.1 Hardware Requirement Specification 6
3.2.1.2 Software Requirement Specification 6
3.2.2 System Requirements 7
3.2.2.1 Functional Requirements 7
3.2.2.2 Non-Functional Requirements 7
3.3 System Design 8
3.3.1 Design Consideration 9
3.3.2 System Architecture Diagram 10
3.3.3 Unified Modeling Language 12
3.3.4 Dataflow Diagram 15
3.3.5 Feasibility Studies 16
3.4 Implementation 18
3.4.1 Selection of Coding Language 18
3.4.2 Description of Coding Language 18
3.4.3 Input Design 25
3.4.4 Output Design 26
3.4.5 Application 27
4. REFLECTION 29
5. CONCLUSION 33
6. REFERENCES 34
7. CERTIFICATE 35
vi
LIST OF FIGURES
Fig. No. TITLE Page No.

3.1: System Architecture 11
3.2: PERT Chart 14
3.3: Symbol for Data Flow Diagram 15
4.1: Home Page 29
4.2: What’s Popular & Top-Rated Section 30
4.3: Footer Section 30
4.4: Filter Based on Multiple Genre 31
4.5: Sorting by Multiple Option 31
4.6: Detail Description about Movie or TV Shows 32
4.7: View Trailer or Related View of Selected Movie 32
vii
MovieMaven Single Web Page Application
CHAPTER 1
COMPANY PROFILE
Vision
“Research Collaborate Build”
Mission
GeekyAnts is a young Product and Services development company based in Bangalore. We do everything
related to web and mobile app development and are extremely passionate about building world-class
products. The mission of a company is to create innovative, high-quality products and services that meet
the needs and exceed the expectations of customers while also generating value for the company.
The company's mission is focused on a few key areas:
1. Innovation: The company should strive to develop new and creative products and services that
solve problems and meet customer needs in unique and effective ways.
2. Customer focus: The company should prioritize customer satisfaction and seek to understand and
anticipate the needs of its customers to deliver products and services that exceed their expectations.
3. Quality: The company should ensure that its products and services are of the highest quality and
meet or exceed industry standards.
4. Sustainability: The company should prioritize sustainability in its product development process,
including minimizing waste and reducing the environmental impact of its products and services.
5. Growth: The company should aim to grow and expand its reach, both geographically and in terms
of product and service offerings, to stay competitive and meet the evolving needs of its customers.
Address Details
GeekyAnts India Pvt Ltd GeekyAnts UK Ltd GeekyAnts Inc
No. 18, 2nd Cross Road, 7 Bickleigh House, Frogwell 315 Montgomery Street, 9th &
N S Palya, 2nd Stage Close, London N15 6ED, 10th Floors,
BTM Layout, Bangalore, England, UK San Francisco, CA, 94104,
560076, Karnataka, India USA
+91 9595884422 44 7424797407 +1(415)2759099
Dept. of ISE, TOCE 2022-23 1

CHAPTER 2
ABOUT THE COMPANY
2.1 BRIEF DESCRIPTION:

2.1.1 ABOUT US:
products. The company was founded in 2006 with a vision to provide innovative solutions to its customers.
Over the years, it gained a reputation for its cutting-edge technology and exceptional customer service. In
2011, the company underwent a rebranding effort to better reflect it is evolving business focus and growth
trajectory. The rebranding exercise included a new name, logo, and messaging that better communicated
the company's strengths and values.
products. The mission of a company is to create innovative, high-quality products and services that meet
the needs and exceed the expectations of customers while also generating value for the company.
The success story of this company is truly inspiring. What started as a simple idea in a living room with
just 6 employees has now grown into a full-scale organization with over 300 employees. The journey was
not an easy one, but through hard work, dedication, and a strong vision, the company has been able to
achieve remarkable success.
The initial stages of the company were challenging, with limited resources and a small team, but the
founders persevered and continued to work towards their goals. As the company began to gain traction
and build a reputation for quality products and services, the team grew, and new talent was added to the
organization.
Over time, the company expanded its offerings and diversified its services, catering to the needs of a
broader customer base. The focus on innovation, customer satisfaction, and employee development has
helped the company become a market leader in its field.
Today, the company is recognized as a trusted brand and has a strong presence in the industry. With a
team of over 300 highly skilled professionals and a wide range of products and services, the company is
well-positioned to continue its growth trajectory and expand its reach to new markets. This success is a
testament to the power of hard work, persistence, and a clear vision for the future.

2.2 SERVICES PROVIDED BY THE COMPANY

• Web App Development
Web app development involves the creation of applications that operate on the internet through
web browsers. It requires a combination of programming skills and knowledge of web technologies such
as HTML, CSS, and JavaScript. Developers must also be familiar with server-side programming
languages and database management systems. Web app development can range from simple websites to
complex applications, including e-commerce platforms, social networks, and online marketplaces. It is a
constantly evolving field, and developers must stay up-to-date with the latest technologies and design
trends to ensure that their applications are user-friendly and efficient.
• Mobile App Development
Mobile app development is the process of creating software applications that run on mobile
devices, such as smartphones and tablets. It involves designing, building, testing, and deploying
applications for a specific platform, such as iOS or Android. Mobile app development typically involves
coding in programming languages such as Java, Swift, and Kotlin, and using development tools such as
Android Studio and Xcode. With the increasing use of mobile devices and the growth of the app market,
mobile app development has become a highly sought-after skill in the tech industry.
• Full-stack Development
Full-stack development refers to the ability to develop both the front-end and back-end of a web
application. It involves knowledge of various programming languages, databases, and frameworks to
create a fully functional website. A full-stack developer is proficient in both client-side and server-side
development and can handle all aspects of the application development process. They are responsible for
designing and building the user interface, implementing server-side logic, and ensuring seamless data
exchange between the front end and back end. Full-stack development has become increasingly popular
due to its ability to streamline the development process and create efficient, user-friendly web
applications.
• Business Analysis
Business analysis is the process of identifying business needs and determining solutions to address
those needs. It involves understanding the organization's goals, processes, and resources to improve
efficiency, profitability, and overall performance. Business analysts gather and analyze data, create
models and reports, and make recommendations for process improvements or changes to existing systems.
They work closely with stakeholders, including management, employees, and customers, to ensure that
the proposed solutions align with business objectives and meet the needs of all parties involved.

• UX / UI Design
User Experience (UX) and User Interface (UI) design are crucial components of any digital
product or service. UX design focuses on the overall user experience, including user research,
wireframing, and prototyping. UI design focuses on the visual and interactive elements of the user
interface, such as color schemes, typography, and iconography. Good UX/UI design creates a seamless
and intuitive user experience, making it easier for users to interact with the product or service. It also helps
to improve user engagement, satisfaction, and retention, leading to better business outcomes.
• Quality Assurance
Quality Assurance is a process that ensures products or services meet the required standards and
customer expectations. It involves monitoring and controlling all aspects of the production process, from
initial design to final delivery, to ensure quality is maintained throughout. Quality Assurance involves
various activities such as testing, inspection, and verification of processes and products. It aims to identify
and correct any issues that may affect the quality of the final product or service. A robust Quality
Assurance system helps to improve customer satisfaction, reduce waste, and increase efficiency.

CHAPTER 3
TASKS PERFORMED
3.1 INTRODUCTION
The aim of MovieMaven is to streamline the current manual process using computerized tools and robust
software, catering to their needs. MovieMaven is fueled by an API that furnishes up-to-date and precise
data about your preferred movies and TV programs. By employing this advanced technology, we can
furnish you with an all-inclusive repository of films, comprising particulars such as premiere date,
filmmaker, cast, storyline synopsis, ratings, and additional features. The platform is designed to cater to a
wide range of users with different preferences and interests. The search function allows users to quickly
find their desired content by typing in relevant keywords.
3.1.1 OBJECTIVE
The main objective is designed to make it easy for you to browse through a wide range of genres, from
action-packed blockbusters to indie dramas, and discover new films that match your interests. You can
search by title, actor, director, or keyword, or simply browse through our curated collections of popular
and critically acclaimed movies. The infinite scrolling feature makes it easy for users to browse through
a large selection of content without having to navigate through multiple pages. The platform also offers
related videos and recommendations, allowing users to discover new content that matches their interests.
Users can identify the cast members of the selected content, giving them a deeper understanding of the
production and enhancing their overall viewing experience. The platform also offers related videos and
recommendations, allowing users to discover new content that matches their interests. Users can identify
the cast members of the selected content, giving them a deeper understanding of the production and
enhancing their overall viewing experience.
➢ Functionalities provided by MovieMaven are as follows: -
1. Conduct a search for a movie or TV show.

2. Perform the search by specifying the desired genre.
3. Filter the search results based on specific criteria, including genre, release date, casting, and
rating.
4. Check the rating of the selected content.
5. Utilize the infinite scrolling feature to browse through more content.
6. Watch related videos related to the selected content.
7. Identify the cast members of the selected content.
8. Access recommendations for similar content.

3.2 SYSTEM REQUIREMENT SPECIFICATION

3.2.1 REQUIREMENT SPECIFICATION
The Software Requirements Specification is produced at the culmination of the analysis task. The function
and performance allocated to software as part of the system engineering are refined by establishing a
complete information description, a detailed functional and behavioral description, an indication of
performance requirements and design constraints, appropriate validation criteria, and other data pertinent
requirements. It is typically created during the initial phase of software development and serves as a guide
for the entire development process. The SRS document describes the functionality, performance, and
design constraints of the software system. It also specifies the user interface, input/output parameters, and
data processing requirements. It describes the functional and non-functional requirements, system
interfaces, and constraints that must be considered during the development process.
The proposed system has the following requirements: -
• Commence the search process for a movie or TV show.

• Ascertain the rating of the selected content.
• Utilize the infinite scrolling feature to browse through additional content.
• View associated videos relating to the chosen content.
• Identify the cast members starring in the selected content.
• Access recommendations for similar content based on the chosen preferences.
3.2.1.1 HARDWARE REQUIREMENT SPECIFICATION
Hardware : Intel core processor
RAM : 8GB
3.2.1.2 SOFTWARE REQUIREMENT SPECIFICATION
Operating System : Windows 98, Windows XP, Windows7

LINUX
MacOS
Web Technologies : HTML CSS JS & ReactJS
Browser : Any or Mozilla, Opera, Google Chrome etc.
API : TBDB API

3.2.2 SYSTEM REQUIREMENT

3.2.2.1 FUNCTIONAL REQUIREMENTS
➢ Search Functionality: Users should be able to search for movies based on their title, genre,
director, actors, release date, and other criteria.
➢ Movie Details: The catalogue should provide details about the movies, including a synopsis,
cast and crew, rating, and user reviews.
➢ Rating and Review System: The catalogue should allow users to rate and review movies,
which should be visible to other users.
➢ Recommendation Engine: The catalogue should have a recommendation engine that suggests
movies to users based on their viewing history, ratings, and reviews.
➢ Movie Trailers: The catalogue should provide access to movie trailers, allowing users to
preview movies before watching them.
➢ Sorting and Filtering: The catalogue should allow users to sort and filter movies based on
different criteria, such as release date, rating, and genre.
➢ Admin Panel: The catalogue should have an admin panel where administrators can manage
movies, user accounts, ratings, and reviews.
3.2.2.2 NON-FUNCTIONAL REQUIREMENTS

➢ Performance: The system should be able to handle a large number of users and data without
any performance issues. It should be able to retrieve data quickly and respond to user requests
in a timely manner.
➢ Usability: The system should be easy to use and navigate, even for non-technical users. The
user interface should be intuitive, responsive, and visually appealing.
➢ Security: The system should be secure and protect the data from unauthorized access,
modification, or deletion. It should implement proper authentication and authorization
mechanisms to ensure that only authorized users can access the system.
➢ Reliability: The system should be reliable and provide accurate data. It should ensure that
there are no data inconsistencies or errors and that data is backed up regularly to prevent data
loss.
➢ Scalability: The system should be designed to scale up or down based on the changing user
and data demands. It should be able to handle peak loads without affecting the system's
performance.

➢ Availability: The system should be available 24/7, with minimal downtime for maintenance
or upgrades. It should be designed to handle unexpected failures or disruptions and ensure that
data is not lost or corrupted.
➢ Compatibility: The system should be compatible with different platforms, browsers, and
devices. It should be able to support different operating systems and hardware configurations.
➢ Accessibility: The system should be accessible to users with disabilities. It should adhere to
accessibility guidelines and provide features such as screen readers, keyboard navigation, and
alternative text for images.
➢ Maintainability: The system should be easy to maintain and update. It should be well-
documented, with clear instructions for maintenance and troubleshooting. It should also be
designed to minimize downtime during maintenance or upgrades.
3.3 SYSTEM DESIGN
System design is the process of defining the architecture, components, modules, interfaces, and data for a
system to satisfy specified requirements. It is a critical phase in the software development life cycle that
involves the creation of a blueprint for the construction of the system. System design includes the
identification of functional and non-functional requirements, the selection of the appropriate hardware
and software components, and the definition of the system's overall structure and behaviors. The design
process also considers factors such as performance, reliability, scalability, maintainability, and security.
System design is an essential part of building any complex system, including software applications,
computer networks, and hardware devices.
➢ User Interface: The system should have an easy-to-use user interface that allows users to search for
movies based on various parameters such as movie title, director, actor, genre, release date, etc.
➢ Database Management: The system needs to have a well-designed database to store movie data
such as title, director, actors, genre, release date, duration, synopsis, ratings, etc.
➢ Search Algorithm: The system should have an efficient search algorithm that can quickly retrieve
movies from the database based on user queries.
➢ Movie Information Display: The system should display movie information in an organized and
easy-to-read format. It should include details such as the movie poster, synopsis, cast and crew,
ratings, reviews, and related movies.
➢ Recommendations: The system should have a recommendation engine that can suggest movies to
users based on their preferences, search history, and ratings.
➢ Integration with external APIs: The system can be integrated with external APIs such as IMDb or
Rotten Tomatoes to provide additional movie data and ratings.

3.3.1 DESIGN CONSIDERATION
User Interface and Experience:
User interface (UI) refers to the means by which a user interacts with a computer or other electronic
device. This can include the physical components of the device, such as buttons or touchscreens, as well
as the software that provides visual feedback and responds to user input. User experience (UX), on the
other hand, is a broader term that encompasses the entire experience that a user has while interacting with
a product or service. This includes factors such as usability, ease of use, functionality, accessibility, and
the emotional response that a user has to the product or service. In general, a good UI should be intuitive,
easy to use, and visually appealing, while a good UX should provide a seamless and enjoyable experience
for the user. Both UI and UX are critical to the success of a product or system, as they influence how users
perceive and interact with it.
Clean Design:
Clean design refers to a design style that emphasizes simplicity, clarity, and minimalism. It's characterized
by the use of a minimal color palette, a lot of white space, and simple typography. The goal of clean design
is to create a visual experience that is uncluttered, easy to navigate, and easy to understand. This often
means eliminating unnecessary elements, simplifying complex designs, and prioritizing user experience
over aesthetics. A clean design can be a powerful tool for communication, as it can help to convey
important information more clearly and effectively. One of the key benefits of clean design is that it can
help to reduce visual clutter and make it easier for viewers to understand and interact with the design. It
can also help to create a more cohesive and unified look and feel, which can be important for branding
and creating a consistent visual identity.
Short Loading Times:
Short loading times refer to the amount of time it takes for a program, application, website, or any digital
content to fully load and become functional. In the context of digital media, shorter loading times are
typically desirable, as they result in a better user experience and can increase engagement and satisfaction.
Loading times can be affected by various factors, such as the size and complexity of the content, the speed
and reliability of the internet connection, and the capabilities of the device or system being used to access
the content. Developers and designers of digital content often optimize their products to minimize loading
times, for example, by compressing images and videos, using caching and preloading techniques, or
reducing the number of server requests needed to load the content. By implementing these strategies,
developers can significantly improve loading times and ensure that users have a fast and smooth
experience.

3.3.2 SYSTEM ARCHITECTURE DIAGRAMS
MVC stands for Model-View-Controller, which is a design pattern used in software development. The
MVC pattern separates an application into three interconnected components: the Model, the View, and
the Controller.
➢ The Model component represents the application's data and business logic. It contains the data
structures and algorithms used to store, retrieve, and manipulate data. The Model component does
not interact directly with the user interface or the user. Instead, it communicates with the Controller
component to receive requests, process them, and provide the requested data back to the
Controller.
➢ The View component represents the user interface. It displays data and allows users to interact
with the application. The View receives data from the Controller and displays it to the user. It can
also send user input back to the Controller for processing. The View is responsible for presenting
data in a way that is easy for the user to understand and interact with.
➢ The Controller component acts as an intermediary between the Model and View components. It
receives input from the user interface, validates it, and then passes it on to the Model for
processing. The Controller also receives data from the Model and sends it to the View for display.
It acts as the glue that binds the other two components together.
The main benefit of using MVC is the separation of concerns. By separating the application's data,
business logic, and user interface into distinct components, each component can be developed and
maintained independently. This makes it easier to modify the application's behavior without affecting
other parts of the system. It also makes testing easier, as each component can be tested separately.
MVC also promotes code reuse. Since the Model and View components are decoupled from each other,
it is possible to reuse the same Model component with different View components, or vice versa. This can
save development time and reduce code duplication.
Another benefit of MVC is improved scalability. As the application grows in complexity, it becomes
easier to manage and maintain with MVC. New functionality can be added by creating new Models,
Views, and Controllers, without affecting the existing components.
There are several variations of the MVC pattern, including the Model-View-Presenter (MVP) and Model-
View-View Model (MVVM) patterns. These variations have similar principles but differ in how they
separate the application's components. MVC can be applied to various types of applications, including
desktop, web, and mobile applications. In a desktop application, the View component might be a graphical
user interface, while in a web application, it might be an HTML page rendered by a browser.

Fig 3.1 System Architecture
MVC is not the only design pattern used in software engineering, but it is one of the most popular and
widely used. Other design patterns include the Observer pattern, which is used to notify objects of changes
in other objects, and the Singleton pattern, which is used to ensure that only one instance of a class is
created. Each pattern has its strengths and weaknesses, and the choice of which pattern to use depends on
the specific requirements of the application.
Interactions
In addition to dividing the application into these components, the model–view–controller design defines
the interactions between them.
➢ The model is responsible for managing the data of the application. It receives user input from the
controller.
➢ The view renders presentation of the model in a particular format.
➢ The controller responds to the user input and performs interactions on the data model objects. The
controller receives the input, optionally validates it and then passes the input to the model.
As with other software patterns, MVC expresses the "core of the solution" to a problem while allowing it
to be adapted for each system. Particular MVC designs can vary significantly from the traditional
description here.

3.3.3 UNIFIED MODELING LANGUAGE

UML stands for Unified Modeling Language. It is a standardized visual language used in software
engineering to model software systems. UML provides a set of notations and diagrams for describing the
different aspects of a software system, including its structure, behavior, and interactions with users and
other systems. UML diagrams can be used to model a wide range of software systems, from simple
applications to complex enterprise systems. Some of the most commonly used UML diagrams include
class diagrams, use case diagrams, sequence diagrams, activity diagrams, and state machine diagrams.
UML is based on the idea of modeling a system as a set of objects that interact with each other.
Notations and meta-models: -
The notation is the graphical stuff; it is the syntax of the modeling language. For instance, class diagram
notation defines how items are concepts such as class association, and multiplicity is represented. These
are:
Class Diagram:
A class diagram is a type of UML (Unified Modeling Language) diagram that represents the structure and
behavior of a system or software application. It shows the classes in a system, their attributes and
operations, as well as the relationships among classes. In a class diagram, each class is represented by a
rectangle that is divided into three sections. The top section shows the name of the class, the middle section
shows the attributes or properties of the class, and the bottom section shows the operations or methods
that the class can perform. The relationships between the classes are represented as lines connecting the
classes. Associations represent relationships between two classes, while generalizations represent
inheritance relationships between classes.
Association:
An association is a relationship between two or more classes that describes how instances of those classes
are connected or linked to each other. An association can be represented by a line between the classes
with optional arrows indicating the direction of the relationship. The line can also have a name that
describes the relationship between the classes. Associations can have multiplicity, which means the
number of instances of one class that can be connected to one or more instances of the other class.
Associations can also have attributes and operations, which are defined using association classes or
association roles. An association class is a class that represents the relationship between two or more other
classes, while an association role is a named end of an association that has additional attributes and
operations.

Generalization:
In UML (Unified Modeling Language), generalization is a relationship between two classes where one
class (called the subclass or derived class) inherits the attributes and behavior of another class (called the
superclass or base class). The generalization relationship is represented in UML by an arrow that points
from the subclass to the superclass, with an open arrowhead at the end of the arrow. Generalization is a
key concept in object-oriented programming and design because it allows for the creation of more abstract,
general classes that can be extended and customized by more specific subclasses.
Aggregation:
Aggregation is a kind of association relationship between two classes where one class contains a reference
to the other class as a part of its own state. Aggregation is a form of "has-a" relationship, which means
that one class has a reference to another class. Aggregation is represented in UML diagrams by a hollow
diamond shape on the end of the line connecting the two classes. The diamond symbolizes that one class
is a part of the other class, but it can exist independently of it. Aggregation is denoted by a hollow diamond
shape on the end of an association line, pointing towards the whole class. The part class is connected to
the diamond with a solid line.
State Diagram:
A state diagram is a type of diagram in the Unified Modeling Language (UML) that represents the
behaviors of a system or object over time. It shows the possible states of an object or system and the
events that cause it to transition from one state to another. In a state diagram, each state is represented as
a box, and transitions between states are represented by arrows. The events or actions that trigger a
transition are often labeled on the arrows, and the conditions that must be met for a transition to occur
may be specified within the box representing a state. State diagrams are useful for modeling complex
systems, as they allow developers to identify potential problems or conflicts that may arise during the
system's operation.
PERT chart (Program Evaluation and Review Technique chart):
A PERT chart (Program Evaluation and Review Technique chart) is a visual tool used in project
management to plan, schedule, and control complex projects. It is a type of network diagram that displays
project activities and their dependencies, as well as the estimated time required to complete each activity.
In a PERT chart, project activities are represented as nodes, while arrows represent the dependencies
between them. Each node is labelled with the activity name and the estimated time required to complete
it. PERT charts also include a timeline, which shows the start and end dates for each activity, as well as
the overall project completion date.

Fig 3.2 PERT Chart

Gantt Chart:
Gantt chart is a commonly used graphical depiction of a project schedule. It's a type of bar chart showing
the start and finish dates of a project's elements such as resources, planning, and dependencies. The Gantt
chart is the most widely used chart in project management. These charts are useful in planning a project
and defining the sequence of tasks that require completion. In most instances, the chart is displayed as a
horizontal bar chart. The Gantt chart aids project managers in communicating project status and
completion rate of specific tasks within a project, and also helps ensure the project remains on track. The
chart identifies tasks that may be executed in parallel and those that can't be started or finished until
others are complete. Gantt charts can be used in managing projects of all sizes and types. These may
include building infrastructures like dams, bridges, and highways. They may also include software
development and other technologies. Project management tools, such as Microsoft Visio, Project,
SharePoint, and Excel, or specialized software, such as Gantto or Match ware, can help in designing
Gantt charts. In UML, a Gantt chart can be created using the activity diagram, which is a graphical
representation of a workflow or process. The activity diagram can be used to show the sequence of
activities in a project, including the start and end dates of each activity, the dependencies between
activities, and the resources required for each activity. Gantt charts can be useful in UML because they
allow project managers to easily visualize the overall timeline of a project and identify any potential
delays or issues. They can also be used to communicate project timelines to stakeholders and team
members.

3.3.4 DATAFLOW DIAGRAM

A Data Flow Diagram (DFD) is a graphical representation of how data flows through a system. It is a
modelling technique used to visualize and analyze the flow of data, information, and materials through a
process or system.
In a DFD, there are four main components:
➢ External entities: These are the people, organizations, or systems that interact with the system
being analyzed.
➢ Processes: These are the activities or functions that are performed within the system.
➢ Data flows: These are the paths through which data moves between external entities and
processes.
➢ Data stores: These are the repositories where data is stored within the system.
Fig 3.2 Data Flow Diagrams
DFD Levels and Layers
A data flow diagram can dive into progressively more detail by using levels and layers, zeroing in on a
particular piece. DFD levels are numbered 0, 1 or 2, and occasionally go to even Level 3 or beyond. The
necessary level of detail depends on the scope of what you are trying to accomplish.
➢ DFD Level 0 is also called a Context Diagram. It’s a basic overview of the whole system or
process being analyzed or modelled. It’s designed to be an at-a-glance view, showing the system
as a single high-level process, with its relationship to external entities.

➢ DFD Level 1 provides a more detailed breakout of pieces of the Context Level Diagram. You will
highlight the main functions carried out by the system, as you break down the high-level process
of the Context Diagram into its subprocesses.
➢ DFD Level 2 then goes one step deeper into parts of Level 1. It may require more text to reach the
necessary level of detail about the system’s functioning.
➢ Progression to Levels 3, 4 and beyond is possible, but going beyond Level 3 is uncommon. Doing
so can create complexity that makes it difficult to communicate, compare or model effectively.
Using DFD layers, the cascading levels can be nested directly in the diagram, providing a cleaner look
with easy access to the deeper dive.
3.3.5 FEASIBILITY STUDIES
A feasibility study is an analysis and evaluation of the potential of a proposed project or idea to determine
if it is practical, viable, and economically feasible. It involves assessing the technical, financial, legal,
social, and environmental aspects of a project to identify potential challenges, risks, and benefits. The
purpose of a feasibility study is to provide decision-makers with the necessary information to determine
whether or not to proceed with a project. Feasibility studies are typically conducted before a project is
initiated and can help to minimize the risk of project failure or costly mistakes. During a feasibility study,
various factors are analyzed, including market demand, competition, available resources, cost and revenue
projections, potential risks and challenges, and legal and regulatory requirements. The goal is to identify
potential obstacles and challenges that may arise during the project's implementation and to develop
strategies to overcome them. Feasibility studies are important because they help businesses and
organizations make informed decisions about whether to pursue a project or not. They provide valuable
insights into the project's potential profitability and help stakeholders understand the risks and benefits
associated with the venture. Additionally, feasibility studies can help secure funding and support from
investors and other stakeholders.
Technical Feasibility
In Technical Feasibility current resources both hardware software along with required technology are
analyzed/assessed to develop the project. This technical feasibility study gives a report on whether there
exists correct required resources and technologies which will be used for project development. Along with
this, the feasibility study also analyzes the technical skills and capabilities of the technical team, whether
existing technology can be used or not, whether maintenance and up-gradation is easy or not for chosen
technology etc.

Operational Feasibility
In Operational Feasibility degree of providing service to requirements is analyzed along with how easy
the product will be to operate and maintain after deployment. Along with these other operational scopes
are determining the usability of the product, determining suggested solution by the software development
team is acceptable or not etc. During an operational feasibility study, a team of experts will typically
assess the current processes and resources, identify potential challenges and constraints, and analyze the
impact of the proposed project or system on operations. They may also consider factors such as cost, time,
and personnel requirements, as well as the potential benefits and risks of the project.
Economic Feasibility
In Economic Feasibility study cost and benefit of the project are analyzed. This means under this
feasibility study a detailed analysis is carried out will be the cost of the project for development which
includes all required costs for final development hardware and software resources required, design and
development cost and operational cost and so on. After that, it is analyzed whether a project will be
beneficial in terms of finance for the organization or not. The purpose of an economic feasibility study is
to help decision-makers make informed choices about whether to proceed with a particular project or
investment. The study typically includes an analysis of the project's potential costs, revenues, and profits,
as well as an assessment of the market demand and competition.
Legal Feasibility
In Legal Feasibility, study project is analyzed from a legality point of view. This includes analyzing
barriers of the legal implementation of the project, data protection acts or social media laws, project
certificates, licenses, copyright etc. Overall, it can be said that Legal Feasibility Study is a study to know
if the proposed project conforms to legal and ethical requirements. The main purpose of a legal feasibility
study is to identify any legal issues or potential obstacles that may arise during the project's
implementation. The study should also examine any regulatory requirements that need to be met and any
permits or licenses that need to be obtained.
Schedule Feasibility
In Schedule Feasibility Study mainly timelines/deadlines are analyzed for the proposed project which
includes how many times teams will take to complete a final project which has a great impact on the
organization as the purpose of the project may fail if it can’t be completed on time. The schedule feasibility
study should identify critical paths, which are the sequence of tasks that must be completed on time for
the project to finish on schedule. Once critical paths are identified, project managers can allocate resources
and adjust the timeline accordingly to minimize the risk of delays.

3.4 IMPLEMENTATION
Implementation is the process of putting a plan or design into action or practice. It involves taking
theoretical concepts and turning them into practical, real-world applications. Implementation can involve
the development of new products, services, systems, or processes, or the modification of existing ones.
3.4.1 SELECTION OF CODING LANGUAGE
We have coded our project in HTML using HTML, SCSS JS, React. We have used SCSS to give a styling
effect to our web page. We have used TMDB API to programmatically fetch and use data provided by
TMDB.
3.4.2 DESCRIPTION OF CODING LANGUAGE

3.4.2.1 HTML (HYPERTEXT MARKUP LANGUAGE)
HTML, or HyperText Markup Language, is a coding language used to create web pages and
applications. It is the foundation of every website, providing the structure and content of a page. HTML
uses tags and attributes to define the various elements of a web page, such as headings, paragraphs,
images, and links. The basic structure of an HTML document includes an opening and closing tag, with
the content of the page contained within these tags. The first tag in an HTML document is typically the
<!DOCTYPE> declaration, which specifies the type of document being created. This is followed by the
<html> tag, which contains the entire web page. Within the <html> tag, there are two main sections: the
<head> section and the <body> section. The <head> section contains information about the page, such as
the title, metadata, and links to external files. The <body> section contains the actual content of the page,
including text, images, and other media. HTML uses a variety of tags to define the different elements of
a web page. For example, the <h1> tag is used to create a top-level heading, while the <p> tag is used to
create a paragraph of text. Other common tags include <a> for creating links, <img> for embedding
images, and <div> for grouping related elements. In addition to tags, HTML also uses attributes to provide
additional information about an element. For example, the <img> tag includes an attribute called src,
which specifies the location of the image file to be displayed. Similarly, the <a> tag includes an href
attribute, which specifies the URL that the link should point to. One of the most powerful features of
HTML is its ability to create tables, which can be used to display data in a structured format. Tables are
created using the <table> tag, with individual cells defined using the <td> tag. Tables can also include
headers, footers, and other elements to provide additional context and organization. Another important
feature of HTML is its support for forms, which allow users to input data and interact with web pages.
Forms are created using the <form> tag, with input fields defined using a variety of different tags,
including <input>, <textarea>, and <select>. Forms can also include buttons, checkboxes, and other
elements to provide additional functionality.

3.4.2.2 SASS (STYLE SHEET LANGUAGE)
SASS, or Sassy CSS, is a preprocessor scripting language that extends the functionality of standard CSS.
It was initially designed as a more efficient and flexible way of writing stylesheets for web developers
and has since become an incredibly popular tool for creating scalable, maintainable, and reusable CSS
code. One of the primary benefits of using SCSS is that it allows developers to write CSS in a more
modular and structured way. Instead of writing all of their styles in a single, large file, developers can
break their code into smaller, more manageable files that can be easily imported and organized. This can
help to reduce the complexity of their code and make it easier to maintain over time. Another key feature
of SCSS is its support for variables, which allow developers to define reusable values and use them
throughout their code. This can be especially helpful for defining colours, fonts, and other common styles
that are used across an entire project. By using variables, developers can easily make changes to their
styles without having to update each individual instance in their code. SCSS also provides support for
mixins, which allow developers to define reusable blocks of code that can be used in multiple places
throughout their stylesheet. Mixins can be used to define complex styles, such as gradients or shadows.
In addition to variables and mixins, SCSS also provides support for functions, which allow developers to
perform calculations and manipulate values in their stylesheet. This can be helpful for defining dynamic
styles that change based on user input or other factors. For example, a developer could use a function to
adjust the size of a font based on the width of the user's screen. SCSS also supports nesting, which allows
developers to write their styles in a more natural, hierarchical way. This can make their code more readable
and easier to understand, especially for developers who are new to CSS. By nesting their styles, developers
can also reduce the amount of repetition in their code and make it more concise. Overall, SCSS is an
incredibly powerful tool for web developers that allows them to write more efficient, scalable, and
maintainable CSS code. By providing support for variables, mixins, functions, nesting, and other
advanced features, SCSS makes it easier for developers to write high-quality CSS code that is easy to
maintain and update over time. Whether you're a beginner or an experienced developer, SCSS is a valuable
tool to have in your toolkit. By mastering the basics of SCSS, developers can create rich, dynamic, and
engaging web pages that delight users and achieve their business goals. Whether you're a beginner or an
experienced developer, HTML is an essential skill to have in your toolkit. . When a component is updated,
SCSS creates a new virtual DOM, compares it with the previous one, and updates only the parts that have
changed. This makes the UI updates faster and more efficient. SCSS also uses one-way data binding,
which means that data flows only in one direction. This makes it easier to manage state and makes the
code more predictable and easier to debug. SCSS components can be divided into two types: functional
and class components.

3.4.2.3 JAVASCRIPT
JavaScript (JS) is a high-level programming language that is often used to add interactivity to websites
and web applications. It was created in 1995 by Brendan Eich, while he was working at Netscape
Communications Corporation. Over the years, JavaScript has become one of the most popular
programming languages in the world and is now used by millions of developers and websites. One of the
key features of JavaScript is that it is a client-side scripting language, meaning that it runs directly in the
user's web browser, rather than on a server. This allows for dynamic and interactive web pages, without
the need for frequent server requests. JavaScript is also lightweight and easy to learn, making it a popular
choice for web developers of all skill levels.
JavaScript is used for a wide variety of tasks on the web, including form validation, animations, and
complex user interfaces. It can also be used to manipulate HTML and CSS, making it an essential tool for
front-end web development. Additionally, JavaScript is often used in conjunction with other programming
languages, such as PHP and Python, to create dynamic and interactive web applications. In recent years,
JavaScript has undergone a number of changes and updates, with the introduction of new features and
technologies such as Node.js, React, and Angular. These tools and frameworks have made it easier for
developers to build complex web applications, and have contributed to the continued popularity of
JavaScript.
One of the most important updates to JavaScript in recent years has been the introduction of ES6
(ECMAScript 2015), a major revision of the language that introduced a number of new features and
improvements. These included the let and const keywords for variable declaration, arrow functions,
template literals, and a number of other enhancements to the language. Another important development
in the world of JavaScript has been the rise of Node.js, a JavaScript runtime built on the V8 engine used
by Google Chrome. Node.js allows developers to use JavaScript on the server side, enabling the creation
of high-performance, scalable web applications using a single language throughout the entire stack. This
has made JavaScript an even more versatile and powerful tool for web development. In addition to
Node.js, there are also a number of popular JavaScript frameworks and libraries that have become
essential tools for modern web development. These include React, Angular, Vue.js, and jQuery, among
others. These frameworks provide a range of tools and features for building complex web applications
and have become the backbone of many popular websites and web applications. Despite its popularity
and widespread use, JavaScript does have its limitations and challenges. One of the biggest challenges
faced by developers is browser compatibility, with different browsers often interpreting JavaScript code
in slightly different ways. This can make it difficult to create web applications that work consistently
across all platforms and devices. However, there are a number of best practices and tools available to help
developers mitigate these risks and ensure that their web applications are secure and reliable.

3.4.2.4 REACTJS
ReactJS, commonly referred to as React, is an open-source JavaScript library for building user interfaces.
It was developed by Facebook and was first released in 2013. Since then, it has gained popularity among
developers due to its efficiency, and ease of use. One of the unique features of React is its use of a virtual
DOM, which allows it to update and render changes to the user interface. React also follows a component-
based approach, where the UI is divided into smaller, reusable components, making it easier to manage
and maintain large applications. React works by allowing developers to create reusable components that
can be rendered on the web page. These components are written in a syntax called JSX, which allows
developers to write HTML-like code directly in their JavaScript code. React then takes care of rendering
the components to the page, making it easy to create complex user interfaces. React also provides a robust
set of tools and libraries, such as React Router, Redux, and React Native, to extend its functionality beyond
just web development. React Router is a library that allows for easy client-side routing, making it easy to
build single-page applications. Redux is a state management library that makes it easy to manage the state
of an application, allowing for more predictable and maintainable code. React Native is a framework for
building native mobile apps using React, making it possible to write code once and deploy it on multiple
platforms. Another benefit of React is its strong community support. There are countless resources
available online, such as documentation, tutorials, and open-source projects, making it easy to get started
with React and find solutions to common problems. The React community also actively contributes to the
development of the library, ensuring its continued improvement and growth. In conclusion, ReactJS is a
powerful and popular JavaScript library for building user interfaces. Its use of a virtual DOM, component-
based approach, and extensive set of tools and libraries make it efficient, flexible, and easy to use. With
its strong community support and active development, react is a great choice for building modern web
applications and beyond. ReactJS works by creating a virtual DOM, which is a lightweight representation
of the actual DOM. When a component is updated, ReactJS creates a new virtual DOM, compares it with
the previous one, and updates only the parts that have changed. This makes the UI updates faster and more
efficient. ReactJS also uses one-way data binding, which means that data flows only in one direction. This
makes it easier to manage state and makes the code more predictable and easier to debug. ReactJS
components can be divided into two types: functional and class components. Functional components are
simple JavaScript functions that return JSX, while class components are more complex and have a state
and lifecycle methods. ReactJS also uses JSX, which is a syntax extension that allows developers to write
HTML-like syntax in JavaScript. JSX makes it easier to create UI components and is used extensively in
ReactJS. . The React community also actively contributes to the development of the library, ensuring its
continued improvement and growth. In conclusion, ReactJS is a powerful and popular JavaScript library
for building user interfaces.

3.4.2.5 REDUX
Redux is a state management library that is commonly used in front-end web applications. It is widely
used in conjunction with React, although it can be used with other frameworks or even vanilla JavaScript.
In simple terms, Redux helps you manage the state of your application in a predictable and centralized
manner. The core idea behind Redux is to have a single source of truth for the state. This store is
immutable, meaning that it cannot be changed directly. Instead, changes to the state are made by
dispatching actions to the store. An action is a plain JavaScript object that describes a change to the state.
It has a "type" property that describes the type of action being taken, as well as any additional data that is
necessary to make the change. For example, if you wanted to add a new item to a list, you might dispatch
an action with a type of "ADD_ITEM" and the data for the new item. When an action is dispatched, it is
passed to a function called a "reducer".
A reducer is responsible for taking the current state of the application and the action, and returning the
new state. The reducer function should be pure, meaning that it should not have any side effects and should
always return the same output given the same input. The new state returned by the reducer is then stored
in the store, replacing the previous state. This new state is then used to update the user interface of the
application. One of the key benefits of using Redux is that it makes it easy to debug your application.
Because the state is centralized and changes are made through actions, it is easy to track how the state
changes over time. Additionally, because the reducer function is pure, it is easy to test and reason about.
Another benefit of using Redux is that it makes it easy to manage complex state. Because all of the state
is stored in a single object, it is easy to keep track of how different parts of the state are related.
Additionally, because the state is immutable, it is easy to reason about how changes to the state will affect
the rest of the application. However, there are some downsides to using Redux. One of the main criticisms
is that it can be verbose and require a lot of boilerplate code to set up. Additionally, some developers find
it difficult to understand the concept of the store, actions, and reducers. In summary, Redux is a state
management library that helps you manage the state of your application in a predictable and centralized
manner. It uses a single immutable store to store all of the state, and changes to the state are made by
dispatching actions to the store. A reducer function is responsible for taking the current state and the
action, and returning the new state. Redux makes it easy to debug and manage complex state, but can be
verbose and difficult to understand for some developers. Redux is a state management library for
JavaScript applications that was first introduced by Dan Abramov and Andrew Clark in 2015. It has since
become a popular tool for managing application state in React and other front-end frameworks. Redux
provides a predictable state container, which means that all state updates are done in a predictable and
organized way, making it easier to understand how data flows through an application. In this article, we
will explore the key concepts of Redux, how it works, and how it can be used in your applications.

3.4.2.6 TMDB API
The TMDB (The Movie Database) API is a powerful tool for developers looking to incorporate movie
and television information into their applications. TMDB is a popular online database of information
related to movies, TV shows, and streaming content, with a vast collection of data on titles, cast and crew
members, ratings, reviews, and more. Developers can use the TMDB API to access this data in real time
and incorporate it into their applications, allowing users to browse and search for movies and TV shows,
view ratings and reviews, and access additional information about cast and crew members. The TMDB
API is free to use for both personal and commercial projects and is widely available through a number of
programming languages and platforms, including Python, Ruby, JavaScript, and PHP. This makes it
accessible to developers with a wide range of experience levels and allows for easy integration into a
variety of web and mobile applications. In order to use the TMDB API, developers must first create an
account on the TMDB website and obtain an API key. This key is used to authenticate API requests and
is required for all API usage. Once an API key has been obtained, developers can begin making requests
to the TMDB API. These requests are made using HTTP requests and can be used to retrieve information
on specific movies or TV shows, as well as to search for titles based on various criteria. In addition to
basic information on movies and TV shows, the TMDB API also provides access to additional data, such
as trailers, posters, and backdrops, which can be used to enhance the user experience in applications. The
API also supports a variety of advanced features, such as pagination, filtering, and sorting, which can be
used to customize API responses and improve performance. One of the key benefits of using the TMDB
API is the large and active community of developers and users who contribute to the TMDB database.
This community helps to ensure that the data in the TMDB API is accurate and up-to-date and also
provides valuable support and resources for developers using the API. Overall, the TMDB API is a
valuable tool for developers looking to incorporate movie and TV show data into their applications. Its
ease of use, wide availability, and robust feature set make it a popular choice for developers of all
experience levels, and its active community ensures that it remains a reliable and up-to-date resource for
years to come. The TMDB API also supports advanced features like pagination and sorting, which allow
developers to control the amount and order of data returned by the API. This can be particularly useful
when dealing with large datasets or when building complex applications that require specific subsets of
the data. One of the key advantages of the TMDB API is its community-driven nature. The API is built
and maintained by a community of developers and data enthusiasts who are passionate about movies and
TV shows. This means that the API is constantly evolving, with new features and improvements being
added all the time.

3.4.2.7 JSX
JSX is a syntax extension that allows developers to write HTML-like code inside JavaScript. It was
developed by Facebook as a part of their React library and has gained widespread adoption in the
JavaScript community. With JSX, developers can write code that looks like HTML but includes dynamic
content and logic. This allows them to create complex user interfaces more easily than traditional
JavaScript methods. JSX is not a separate language but a syntax extension, which means it can be
compiled into regular JavaScript using tools like Babel. JSX elements are similar to HTML elements, but
they are actually JavaScript objects. When the code is compiled, JSX elements are transformed into
regular JavaScript function calls that create and return these objects. The render function specifies the
HTML output of a React component. JSX(JavaScript Extension), is a React extension which allows
writing JavaScript code that looks like HTML.
For example, the following JSX code creates a simple button element:
When compiled, it becomes:
JSX also allows developers to use curly braces to include JavaScript expressions inside their code. This
can be used to dynamically generate content or apply logic based on variables.
In this example, the value of the name variable is inserted into the string when the component is rendered.
Overall, JSX provides a powerful and intuitive way to create dynamic user interfaces in JavaScript. It has
become a popular choice for building web applications with React, but it can also be used with other
libraries and frameworks.

3.4.3 INPUT DESIGN

Input design is an essential aspect of any software or hardware system that requires user interaction. It
refers to the process of creating an interface that allows users to input data or commands into the system.
A well-designed input interface ensures that users can easily and accurately input the required information,
reducing errors and increasing efficiency. This involves considering factors such as the type of input
device, the layout and format of the input screen, the data validation and verification process, and the
feedback provided to the user. A good input design should be intuitive, user-friendly, and flexible enough
to accommodate different types of users and input scenarios.
OBJECTIVES FOR INPUT DESIGN
The objective of input design is to create an efficient and effective way for users to interact with a
computer system or software application.
➢ Defining the input requirements: This involves identifying the types of data that will be input into
the system, as well as the sources of that data.
➢ Designing input forms or screens: This involves designing the user interface for data input,
including the layout and format of the input fields.
➢ Selecting input devices: This involves selecting the appropriate input devices for the system, such
as keyboards, touchscreens, or voice recognition software.
➢ Validating input data: This involves checking input data for accuracy and completeness, and
providing feedback to users when errors are detected.
➢ Ensuring accessibility: This involves designing input methods that are accessible to users with
disabilities, such as those who are visually or physically impaired.
➢ Consistency: Input design should ensure that input data is consistent in format and structure. This
can be achieved by providing appropriate data entry controls and enforcing data validation rules.
➢ Timeliness: Input design should ensure that input data is entered in a timely manner. This can be
achieved by providing appropriate data entry controls and enforcing data entry deadlines.
➢ Security: Input design should ensure that input data is secure and protected from unauthorized access
and manipulation. This can be achieved by providing appropriate access controls and data
encryption.
➢ Usability: Input design should be user-friendly and easy to use. This can be achieved by providing
appropriate data entry controls and user interfaces that are easy to navigate and understand.
➢ Efficiency: Input design should be efficient and should minimize the time and effort required to
enter data. This can be achieved by providing appropriate data entry controls and minimizing the
number of steps required to enter data.

3.4.4 OUTPUT DESIGN

Output design refers to the process of creating effective and meaningful output for a computer system. It
involves designing and formatting the output in a way that meets the needs of the users and helps them
understand the information presented. The output design process includes determining the content and
format of the output, selecting the appropriate output media (such as a screen display, paper printout, or
electronic file), and designing the layout and presentation of the output.
OBJECTIVES OF OUTPUT DESIGN

The main objective of output design is to present information or results generated by a computer system
in a way that is easily understood by its users. This involves designing outputs such as reports, screens,
and other forms of display to meet the specific needs of the user.
The key points of output design objectives are:
➢ Provide the necessary information: The primary objective of output design is to provide users
with the necessary information they need to make informed decisions or take appropriate actions.
➢ Present information effectively: The design of outputs should be clear, concise, and well-
organized so that users can easily understand the information presented.
➢ Meet user needs: Outputs should be designed to meet the specific needs of the user, including
their preferences for format, language, and style.
➢ Facilitate communication: Outputs should facilitate communication between the system and the
user by providing feedback and enabling interaction.
➢ Enhance usability: Outputs should be designed to enhance the usability of the system, including
the ease of use and the efficiency of the user's interactions with the system.
➢ Support decision-making: Outputs should support decision-making by presenting information in
a meaningful way that helps users make informed decisions.
➢ Accuracy: The output generated by a system should be accurate and reliable so that users can trust
the information they receive.
➢ Completeness: The output should contain all the relevant information required by the users to
perform their tasks.
➢ Clarity: The output should be clear and easy to understand so that users can quickly and easily
interpret the information provided.
➢ Timeliness: The output should be generated in a timely manner so that users can access the
information when they need it.
➢ Consistency: The output should be consistent in terms of format, layout, and content so that users
can quickly identify and understand the information presented.

➢ Relevance: The output should be relevant to the needs of the users so that it can be used to make
informed decisions.
➢ Accessibility: The output should be accessible to all users, regardless of their physical abilities or
technological limitations.
Overall, the objective of output design is to ensure that the information generated by a system is presented
in a way that is useful, effective, and easy to use for the intended audience.
3.4.5 APPLICATION
The MovieMaven project is a comprehensive and user-friendly platform that enables users to search and
filter for movies and TV shows based on their preferred genre, release date, casting, and rating. The
platform is designed to cater to a wide range of users with different preferences and interests. The search
function allows users to quickly find their desired content by typing in relevant keywords. Additionally,
users can browse through different genres and select their preferred genre to see all available content. The
filtering function further enhances the search experience by enabling users to refine their search results
based on specific criteria. The rating feature provides users with valuable information about the content
they select, ensuring that they can make informed decisions. The infinite scrolling feature makes it easy
for users to browse through a large selection of content without having to navigate through multiple pages.
The platform also offers related videos and recommendations, allowing users to discover new content that
matches their interests. Users can identify the cast members of the selected content, giving them a deeper
understanding of the production and enhancing their overall viewing experience. In conclusion, the movie
catalogue project is an excellent platform that provides a comprehensive and user-friendly interface to
search, filter, and watch movies and TV shows. Its features cater to a wide range of users, making it a
must-have tool for any avid movie or TV show enthusiast. The purpose of MovieMaven is to automate
the existing manual system with the help of computerized equipment and full-fledged computer software,
fulfilling their requirements. MovieMaven is powered by an API that provides the latest and most accurate
information about your favorite films and TV shows. With this cutting-edge technology, we can offer you
a comprehensive database of movies, including details such as release date, director, actors, plot synopsis,
ratings, and more. The project describes a movie catalogue that is designed to make it easy for you to
browse through a wide range of genres, from action-packed blockbusters to indie dramas, and discover
new films that match your interests. You can search by title, actor, director, or keyword, or simply browse
through our curated collections of popular and critically acclaimed movies. With regular updates and new
releases added constantly, you'll always be up-to-date on the latest and greatest in the world of cinema.
Users can filter the search results based on a variety of criteria such as genre, release date, casting and
rating, to better cater to their preferences.

Functionalities provided by MovieMaven are as follows:
1. Conduct a search for a movie or TV show.

2. Perform the search by specifying the desired genre.
3. Filter the search results based on specific criteria, including genre, release date, casting, and
rating.
4. Check the rating of the selected content.
5. Utilize the infinite scrolling feature to browse through more content.
6. Watch related videos related to the selected content.
7. Identify the cast members of the selected content.
8. Access recommendations for similar content.

CHAPTER 4
REFLECTION
A project snapshot is a concise summary of the essential information about a project. It should include a
brief description of the project, its purpose, objectives, key features, milestones, and outcomes. Here's
an example of what a project snapshot could look like:
Fig 4.1 Home Page

Fig 4.1 What’s Popular & Top-Rated Section
Fig 4.1 Footer Section

Fig 4.1 Filter Based on Multiple Genre
Fig 4.1 Sorting by Multiple Options

Fig 4.1 Detail Description about Movie or TV Shows
Fig 4.1 View Trailer or Related Video of Selected Movie or TV Shows

CHAPTER 5
CONCLUSION
The MovieMaven project is a comprehensive and user-friendly platform that enables users to search and
filter for movies and TV shows based on their preferred genre, release date, casting, and rating. The
platform is designed to cater to a wide range of users with different preferences and interests. The search
function allows users to quickly find their desired content by typing in relevant keywords. Additionally,
users can browse through different genres and select their preferred genre to see all available content. The
filtering function further enhances the search experience by enabling users to refine their search results
based on specific criteria. The rating feature provides users with valuable information about the content
they select, ensuring that they can make informed decisions. The infinite scrolling feature makes it easy
for users to browse through a large selection of content without having to navigate through multiple pages.
The platform also offers related videos and recommendations, allowing users to discover new content that
matches their interests. Users can identify the cast members of the selected content, giving them a deeper
understanding of the production and enhancing their overall viewing experience. In conclusion, the movie
catalogue project is an excellent platform that provides a comprehensive and user-friendly interface to
search, filter, and watch movies and TV shows. Its features cater to a wide range of users, making it a
must-have tool for any avid movie or TV show enthusiast.

CHAPTER 6
REFERENCES
[1] Mozilla Developer Network (MDN) - a comprehensive resource for web developers with
documentation, tutorials, and code snippets for HTML, CSS, and JavaScript.
[2] W3Schools - a popular online learning platform with interactive tutorials and exercises for
HTML, CSS, and JavaScript.
[3] Codecademy - an interactive online platform with courses on HTML, CSS, JavaScript, and
React.
[4] CSS-Tricks - a website with articles, tutorials, and demos on CSS.
[5] Smashing Magazine - a website with articles and tutorials on web design and development,
including HTML, CSS, and JavaScript.
[6] React Documentation - official documentation for React, including guides, API reference, and
examples.
[7] React Native Documentation - official documentation for React Native, a framework for building
mobile apps using React.
[8] Stack Overflow - a question and answer community for programmers with a vast amount of
information on HTML, CSS, JavaScript, and React.
[9] GitHub - a platform for hosting and sharing code, including HTML, CSS, JavaScript, and React
projects.
[10] "RESTful Web API Design with Node.js" by Valentin Bojinov
[11] the official documentation links for the technologies you mentioned:
[12] HTML: https://developer.mozilla.org/en-US/docs/Web/HTML
[13] SCSS (Sass): https://sass-lang.com/documentation
[14] JavaScript: https://developer.mozilla.org/en-US/docs/Web/JavaScript
[15] ReactJS: https://reactjs.org/docs/getting-started.html
[16] Redux: https://redux.js.org/introduction/getting-started
[17] JSX: https://reactjs.org/docs/introducing-jsx.html
[18] API: https://developer.mozilla.org/en-US/docs/Glossary/API

CHAPTER 7
CERTIFICATE

Internship Report

Uploaded by

Copyright:

Available Formats

Internship Report

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Internship Report

Uploaded by

Copyright:

Available Formats

VISVESVARAYA TECHNOLOGICAL UNIVERSITY

Jnana Sangama, Belagavi-590018.

“MovieMaven Single Page Web Application with ReactJS and Redux”

RISHABH SAHU (1OX19IS080)

Under the guidance of

Department of Information Science and Engineering

Mr. Yadhukrishna MR Dr. R. Kanagavalli Dr. N.Kannan

1. Internal Examiner: ___________________

2. External Examiner: ___________________

Name USN Signature

Rishabh Sahu 1OX19IS080

Date: Place: Bangalore

Finally, a note of thanks to the Department of Information Science and

RISHABH SAHU (1OX19IS080)

Keywords:- API, Cutting-Edge Technology, Catalogue, etc

TITLE PAGE NO.

Fig. No. TITLE Page No.

The company's mission is focused on a few key areas:

GeekyAnts India Pvt Ltd GeekyAnts UK Ltd GeekyAnts Inc

+91 9595884422 44 7424797407 +1(415)2759099

Dept. of ISE, TOCE 2022-23 1

2.1 BRIEF DESCRIPTION:

Dept. of ISE, TOCE 2022-23 2

2.2 SERVICES PROVIDED BY THE COMPANY

• Mobile App Development

Dept. of ISE, TOCE 2022-23 3

Dept. of ISE, TOCE 2022-23 4

➢ Functionalities provided by MovieMaven are as follows: -

1. Conduct a search for a movie or TV show.

Dept. of ISE, TOCE 2022-23 5

3.2 SYSTEM REQUIREMENT SPECIFICATION

The proposed system has the following requirements: -

• Commence the search process for a movie or TV show.

3.2.1.1 HARDWARE REQUIREMENT SPECIFICATION

Hardware : Intel core processor

3.2.1.2 SOFTWARE REQUIREMENT SPECIFICATION

Operating System : Windows 98, Windows XP, Windows7

Web Technologies : HTML CSS JS & ReactJS

Browser : Any or Mozilla, Opera, Google Chrome etc.

API : TBDB API

Dept. of ISE, TOCE 2022-23 6

3.2.2 SYSTEM REQUIREMENT

3.2.2.2 NON-FUNCTIONAL REQUIREMENTS

Dept. of ISE, TOCE 2022-23 7

3.3 SYSTEM DESIGN

Dept. of ISE, TOCE 2022-23 8

3.3.1 DESIGN CONSIDERATION

User Interface and Experience:

Short Loading Times:

Dept. of ISE, TOCE 2022-23 9

3.3.2 SYSTEM ARCHITECTURE DIAGRAMS

Dept. of ISE, TOCE 2022-23 10

Fig 3.1 System Architecture

Dept. of ISE, TOCE 2022-23 11

3.3.3 UNIFIED MODELING LANGUAGE

Notations and meta-models: -

Dept. of ISE, TOCE 2022-23 12

PERT chart (Program Evaluation and Review Technique chart):

Dept. of ISE, TOCE 2022-23 13

Fig 3.2 PERT Chart