Internship Report

VISVESVARAYA TECHNOLOGICAL UNIVERSITY
Jnana Sangama, Belagavi-590018.
An Internship Report on
“Blog Full Stack Web Application with ReactJS and NodeJS”
Submitted in the partial fulfilment of the requirements for the award of the Degree of
Bachelor of Engineering
in
Information Science and Engineering
By
Muhammed Zain Jambagi (1OX20IS050)
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
2023-24
Hosur Road, Bommanahalli, Bengaluru-560068
(Affiliated to VISVESVARAYA TECHNOLOGICAL UNIVERSITY, Belagavi)
CERTIFICATE
Certified that the Internship Project Work entitled “Blog Full Stack Web
Application with ReactJS and NodeJS” carried out by MUHAMMED ZAIN
JAMBAGI (1OX20IS050), 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 2023-2024. 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)
DECLARATI ON
I the student 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 “Blog Full Stack Web Application with ReactJS
and NodeJS” 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 2023-2024. 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
Muhammed Zain Jambagi 1OX20IS050
Date: Place: Bangalore
iii
ACKNOWLEDGEMENT
The satisfaction and euphoria that accompany the successful completion of any
taskwould 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 andsurrounding 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.
MUHAMMED ZAIN JAMBAGI (1OX20IS050)
iv
ABSTRACT
The purpose of the Blog Application is to automate the existing manual process of creating and
managing blogs with the help of modern web technologies and a full-fledged computer software
solution, fulfilling all requirements. The Blog Application is powered by React.js and Node.js,
providing a robust and scalable platform for a seamless blogging experience. With this cutting-edge
technology stack, we can offer a comprehensive solution for bloggers, including features such as
rich text editing, secure user authentication, and efficient content management. The project
describes a blog platform designed to make it easy for users to create, edit, and publish engaging
blog posts across a wide range of topics, from personal narratives to in-depth analyses. Users can
draft posts using the React Quill rich text editor, with diverse formatting options. With secure JWT-
based authentication, only authorized users can access specific functionalities. The platform
incorporates a clean separation of concerns, with a dedicated React frontend for UI rendering and
an Express.js backend for robust API handling, ensuring a scalable and maintainable codebase.
With regular updates and enhancements, the Blog Application stays up-to-date with the latest web
development practices and technologies."
Keywords:- Content Management System, React.js Blogging Platform, Secure User

Authentication, 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
Blog Full Stack Web 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 2023-24 1

CHAPTER 2
ABOUT THE COMPANY
2.1 BRIEF DESCRIPTION:

2.1.1 ABOUT US:

world-class 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.

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 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

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.

“Blog Full Stack Web Application with ReactJS and NodeJS”

Muhammed Zain Jambagi (1OX20IS050)

Under the guidance of

Department of Information Science and Engineering

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

Name USN Signature

Muhammed Zain Jambagi 1OX20IS050

Date: Place: Bangalore

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

MUHAMMED ZAIN JAMBAGI (1OX20IS050)

Keywords:- Content Management System, React.js Blogging Platform, Secure User

TITLE PAGE NO.

Fig. No. TITLE Page No.

GeekyAnts is a young Product and Services development company based in Bangalore. We do

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 2023-24 1

2.1 BRIEF DESCRIPTION:

GeekyAnts is a young Product and Services development company based in Bangalore. We do

GeekyAnts is a young Product and Services development company based in Bangalore. We do

Dept. of ISE, TOCE 2023-24 2

2.2 SERVICES PROVIDED BY THE COMPANY

 Mobile App Development

Dept. of ISE, TOCE 2023-24 3

Dept. of ISE, TOCE 2023-24 4

Dept. of ISE, TOCE 2023-24 5

 Functionalities provided by MovieMaven are as follows: -

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

Dept. of ISE, TOCE 2023-24 6

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 2023-24 7

3.2.2 SYSTEM REQUIREMENT

3.2.2.2 NON-FUNCTIONAL REQUIREMENTS

Dept. of ISE, TOCE 2023-24 8

3.3 SYSTEM DESIGN

Dept. of ISE, TOCE 2023-24 9

Dept. of ISE, TOCE 2023-24 10

3.3.1 DESIGN CONSIDERATION

User Interface and Experience:

Short Loading Times:

Dept. of ISE, TOCE 2023-24 11

3.3.2 SYSTEM ARCHITECTURE DIAGRAMS

Dept. of ISE, TOCE 2023-24 12

Fig 3.1 System Architecture

Dept. of ISE, TOCE 2023-24 13

3.3.3 UNIFIED MODELING LANGUAGE

Notations and meta-models: -

Dept. of ISE, TOCE 2023-24 14

PERT chart (Program Evaluation and Review Technique chart):

Dept. of ISE, TOCE 2023-24 15

Fig 3.2 PERT Chart

Dept. of ISE, TOCE 2023-24 16