A

INTERNSHIP REPORT
On

WEB DEVELOPMENT

A report submitted in partial fulfillment of the requirement for the award of the
degree of
BACHELOR OF TECHNOLOGY
In
ELECTRONICS AND COMMUNICATION ENGINEERING

By

AKURATHI VENKATA KALESWARA RAO

(20AJ1A0405)

Under the esteemed guidance of

MOUNA SRI, BRAINOVISION

HYDERABAD
(DURATION: From 05-01-2024 to 05-04-2024)

DEPARTMENT OF ELECTRONICS AND COMMUNICATION ENGINEERING

AMRITA SAI INSTITUTE OF SCIENCE AND TECHNOLOGY (AUTONOMOUS)

Paritala (V), Kanchikacherla (M), Krishna Dist– 521180.

(Approved by AICTE, NEW DELHI & Permanently affiliated to JNTU, Kakinada)

2020-2024

i
 CERTIFICATE

This is to certify that the internship report entitled “WEB DEVLOPMENT” that is
being submitted by A. VENKATA KALESWARA RAO (20AJ1A0405) in partial
fulfillment for the award of the Bachelor of Technology in ELECTRONICS AND
COMMUNICATION ENGINEERING to the Jawaharlal Nehru Technological
University, Kakinada is a record of bonafide work carried by him at
BRAINOVISION, HYDERABAD

Dr. V. Ramesh Babu Dr. Samiran Chatterjee

M.Tech, (Ph.D, FIET) (Ph.D, FIET)
Professor, Head of Department, ECE Professor, ECE
Department Internship Co-ordinator

External Examiner

ii
iii
 ACKNOWLEDGEMENT
First I would like to thank MOUNA SRI, BRAINOVISION, HYDERBAD
for giving me the opportunity to do an internship within the organization.
I also would like all the people that worked along with me at
BRAINOVISION, HYDERABAD with their patience and openness they created an
enjoyable working environment.
It is indeed with a great sense of pleasure and immense sense of gratitude that
I acknowledge the help of these individuals.
I feel highly obliged to internship coordinator, Dr. Samiran Chatterjee,
Professor, Department of Electronics and Communication Engineering, for the
facilities provided to accomplish this internship.
I would like to thank my Head of the Department Dr. V. Ramesh Babu for
his constructive criticism throughout my internship.
I am highly indebted to Principal Dr. M. Sasidhar, for the facilities provided
to accomplish this internship.
I am extremely great full to my department staff members and friends who
helped me in successful completion of this internship.

A. VENKATA KALESWARA RAO

(20AJ1A0405)

iv
 ABSTRACT

Brain O Vision Solutions (INDIA) Pvt Ltd is a leading company that specializes in
providing innovative solutions to complex problems. As a Web development intern at
Brain O Vision, you will have the opportunity to work with a team of experienced
data scientists and gain hands-on experience in the field of Web development.

The Web development internship at Brain O Vision is a three months program

designed to provide students and recent graduates with a comprehensive
understanding of Web designing principles and techniques. During the internship, you
will work on real-world projects and be exposed to various tools and technologies
used in the industry.

This internship report provides an overview of my experience and learning during my

internship in Web Development. Over the course of my internship, I was exposed to
various aspects of Web development, including both front-end and back-end
technologies. In the era of digital transformation, keeping up with the latest news is
crucial. This abstract outlines the development of a user-friendly and responsive news
application using modern web development frameworks and technologies. The
application is designed to provide a seamless browsing experience across various
devices, ensuring accessibility for users on desktops, tablets, and mobile phones.

In today's fast-paced digital era, staying informed is paramount, and a well-designed

news application can significantly enhance the user experience. This abstract outlines
the development of a responsive news application utilizing modern web development
frameworks including HTML, CSS, React.js, Bootstrap, and media queries.

Overall, the development of this news application demonstrates the synergy between
HTML, CSS, React.js, Bootstrap, and media queries in creating a responsive, visually
appealing, and user-friendly digital platform for accessing news content. Through
careful integration of these technologies, the application delivers an immersive and
engaging news browsing experience tailored to the needs of modern user.

v
 CONTENTS

TITLE PAGE i

CERTIFICATE ii

INTERNSHIP CERTIFICATE iii

ACKNOWLEDGEMENT iv

ABSTRACT v

CHAPTER 1 01

INTRODUCTION

CHAPTER 2

FRONTEND DEVELOPMENT 04

2.1 HTML
2.1.1 Structure
2.1.2 Elements
2.1.3 Attribute
2.1.4 Semantic Mark-up
2.1.5 Document Structure
2.2 CSS
2.2.1 Styling
2.2.2 Selectors
2.2.3 Cascading
2.2.4 Responsive Design
2.2.5 Flex Box and Grid
2.3 Java Script
2.3.1 Client –slide Scripting
2.3.2 Cross-platform Compatibility
2.3.3 Dynamic Content Manipulation
2.3.4 Libraries and Frameworks
2.3.5 Server Side Development

CHAPTER 3

FRAME WORKS 08

3.1 What are Frameworks?

3.2 Types of Frameworks?
3.3 React JS

vi
CHAPTER 4

API INTEGRATION 12

4.1 Benefits of API Integration

4.2 Use Cases of API Integration
4.3 Cross Origin Resource Sharing (CORS)
4.4 Axios

CHAPTER 5

ANALYSIS 16

5.1 Required Analysis

5.2 Design Considerations
5.3 API Integration
5.4 Performance Optimization

CHAPTER 6

SOFTWARE SPECIFICATIONS 23

6.1 System Configuration

6.2 Software Requirement
6.3 Hardware Requirement
6.4 Collaboration Tools
6.5 Back-up and Recovery

CHAPTER 7

CODING 24

CHAPTER 8

SCREEN SHOTS 35

CHAPTER 9

CONCLUSION 39

CHAPTER 10

REFERENCES 40

vii
 1. INTRODUCTION

The following report describes the activities carried out during the Three months full
time internship at Brain O Vision. The document contains information regarding the
organization and the responsibilities performed throughout January-April 2024. The
first part of the report tells about the organization, followed by the working plan
initially agreed upon by the federation and approved by the University of VTU as a
suitable internship.

Brain O Vision Solutions India Private Limited. Is an organization which deals

with the wing of software development and technical education?

This is the place for students and faculty and other companies to find solution for all
your requirements Such as internships, academic projects (Mini & Major project),
online courses, Workshops, faculty development programs and to hire a perfect
skilled candidates.

Nova Gist is a cutting-edge news application developed with the aim of delivering an
immersive and customizable news browsing experience. Leveraging modern web
technologies such as React.js, Bootstrap, HTML, and CSS, along with the powerful
News API.org, Nova Gist provides users with access to the latest news from around
the globe in an intuitive and visually appealing interface.

This project incorporates several innovative features designed to enhance usability

and engagement. One notable feature is the implementation of dark mode
functionality, allowing users to toggle between light and dark themes based on their
preferences. This feature not only enhances readability but also reduces eye strain
during extended browsing sessions.

Additionally, Nova Gist includes a dynamic sidebar that facilitates seamless

navigation and content discovery. Users can easily access different sections of the

1
application, such as trending news, top stories, and category-specific articles,
enhancing the overall browsing experience.

Another noteworthy feature of Nova Gist is its integration of century selection,

allowing users to explore news articles from specific time periods. This feature adds a
historical dimension to the application, enabling users to delve into past events and
trends with ease.

Furthermore, Nova Gist utilizes carousel functionality to showcase featured articles

and highlight important news stories. This dynamic presentation enhances content
visibility and encourages user engagement, keeping them informed and entertained.

To optimize performance and enhance user experience, Nova Gist incorporates

debouncing API integration, ensuring efficient handling of user input and minimizing
unnecessary API requests. This optimization enhances the responsiveness of the
application, providing users with fast and seamless access to news content.

In summary, Nova Gist represents a comprehensive and feature-rich news application

developed using a combination of React.js, Bootstrap, HTML, and CSS. With its
innovative features, dynamic interface, and seamless integration of the News API.org,
Nova Gist sets a new standard for modern news browsing experiences.

Applications:

Educational Resource: Nova Gist can be utilized as an educational resource,

providing students and educators with access to up-to-date news articles across
various topics and categories. Teachers can incorporate the application into their
lesson plans to facilitate discussions on current events and global issues.

Research Tool: Researchers and academics can use Nova Gist as a research tool to
stay informed about the latest developments in their respective fields. The
application's century selection feature allows users to explore historical news articles,
providing valuable insights into past events and trends.

2
Marketing Tool: Businesses can leverage Nova Gist as a marketing tool to promote
their products and services through sponsored content and advertisements. By
targeting specific demographics and audiences, businesses can increase brand
visibility and reach a wider customer base.

Corporate News Portal: Companies and organizations can integrate Nova Gist into
their internal communication systems as a corporate news portal. Employees can
access company news, industry updates, and relevant articles to stay informed about
company developments and market trends.

News API.org: News API.org is a powerful API that provides access to a vast
repository of news articles from various sources and categories. By integrating News
API.org into the Nova Gist project, developers can retrieve real-time news data and
populate the application with up-to-date content. This API allows for seamless
integration of news sources, categories, and search functionality, enriching the user
experience and keeping users informed. The importance of News API.org in this
project lies in its ability to provide a reliable source of news content and facilitate
dynamic content updates.

Web Technologies: What’s in today may become archaic tomorrow. Presently, certain
markup languages and multimedia packages like HTML, CSS, various web browsers
etc. are essential to get things going. So, whether users are designing a website,
beginning an e- commerce venture or simply uploading their latest holiday pictures on
social media, web technology services are the means to one’s ends!

3
 2. FRONTEND DEVELOPMENT

Frontend development refers to the process of creating the user interface and
experience of a website or web application. It involves designing and implementing
the visible parts of a website that users interact with directly in their web browsers.
Frontend development typically includes three primary technologies: HTML, CSS,
and JavaScript.

This involves creating the visual elements and user interface of a web application that
users interact with. In Python full-stack development, frontend technologies such as
HTML, CSS, and JavaScript are commonly used along with Python-based
frameworks like Django, Flask, or FastAPI.

Frontend development is not only about creating visually appealing interfaces but also
about optimizing performance and ensuring accessibility for all users. Developers
must prioritize writing clean, maintainable code to facilitate future updates and
enhancements while adhering to industry standards and best practices. They also
collaborate closely with UX/UI designers to understand user behaviour and
preferences, translating design concepts into functional code that aligns with the
overall goals of the project. As technology evolves, frontend developers must
continuously expand their skill set and adapt to new tools and techniques to remain
competitive in the ever-changing landscape of web development.

In addition to these core technologies, frontend development often involves the use of
various libraries, frameworks, and tools to streamline the development process and
enhance productivity. Some popular frontend frameworks and libraries include:

Frontend development plays a crucial role in creating user-friendly and visually

appealing websites and web applications. It focuses on ensuring that the interface is
intuitive, responsive, and accessible to users across different devices and browsers. By
combining HTML, CSS, JavaScript, and various frontend technologies, developers
can create compelling digital experiences that meet the needs and expectations of
users.

4
2.1: HTML: HTML, or Hypertext Mark-up Language, is the standard mark-up
language used to create the structure and content of web pages. It consists of a series
of elements or tags that define the various components of a webpage and how they
should be displayed in a web browser.

Here's a brief overview of HTML:

2.1.1. Structure: HTML documents are structured using a hierarchical format known
as the Document Object Model (DOM). The DOM consists of nested elements that
represent different parts of a webpage, such as headings, paragraphs, images, links,
forms, and more.

2.1.2. Elements: HTML elements are represented by tags enclosed in angle brackets
(< and >). Each tag indicates the beginning and end of an element, and may contain
attributes that provide additional information about the element. For example, the
`<h1>` tag is used to define a top-level heading, while the `<p>` tag is used to define
a paragraph of text.

2.1.3. Attributes: HTML elements can have attributes, which are additional pieces of
information specified within the opening tag. Attributes provide extra context or
instructions for how the element should be displayed or behave. Common attributes
include `class`, `id`, `src`, `href`, `alt`, `style`, and `title`.

2.1.4. Semantic Mark-up: HTML offers a range of semantic elements that describe
the meaning of the content they contain. Semantic mark-up helps search engines and
screen readers understand the structure of a webpage, making it more accessible and
improving search engine optimization (SEO).

2.1.5. Document Structure: Every HTML document starts with a `<! DOCTYPE
html>` declaration, followed by an `<html>` element that contains two main sections:
the `<head>` and the `<body>`. The `<head>` section typically includes metadata
such as the page title, character encoding, and links to external resources like style
sheets and scripts. The `<body>` section contains the actual content of the webpage.

5
2.2: CSS (Cascading Style sheets): CSS, or Cascading Style Sheets, is a style sheet
language used to control the presentation and appearance of HTML elements on a
webpage. It defines how HTML elements should be displayed in terms of layout,
colors, fonts, spacing, and other visual properties. Here's a brief overview of CSS:

2.2.1. Styling: CSS allows developers to apply styles to HTML elements by selecting
them based on their tag name, class, ID, or other attributes. Styles are defined using
property-value pairs, where the property specifies the aspect of the element being
styled (e.g., color, font-size, background-color) and the value determines the specific
style or value of that property.

2.2.2. Selectors: CSS selectors are patterns used to select and style HTML elements
based on their type, class, ID, attributes, or relationship with other elements. Common
types of selectors include element selectors (e.g., p for paragraphs), class selectors
(e.g., .header), ID selectors (e.g., #main-content), descendant selectors, child
selectors, and more.

2.2.3. Cascading: CSS follows the cascading principle, which means that styles can
be inherited from parent elements and overridden by more specific styles. Style sheets
are applied in a specific order of precedence, with styles from external style sheets,
internal <style> tags, and inline styles being applied in cascading order. Specificity
and the order of declaration determine which styles take precedence.

2.2.4. Responsive Design: CSS enables developers to create responsive layouts that
adapt to different screen sizes and devices. Media queries allow developers to apply
different styles based on factors such as screen width, device orientation, and
resolution, ensuring that webpages are optimized for various devices, from desktops
to smartphones.

2.2.5. Flex box and Grid: CSS introduces layout modules such as Flex box and CSS
Grid, which provide powerful tools for creating flexible and responsive layouts. Flex
box allows developers to design one-dimensional layouts with flexible containers and

6
items, while CSS Grid enables the creation of two-dimensional grid layouts with
precise control over rows and columns.

2.3: Java Script: JavaScript is a programming language that adds interactivity and
dynamic behavior to web pages. It allows frontend developers to create interactive
features such as dropdown menus, sliders, animations, form validation, and real-time
updates without reloading the page. JavaScript is essential for enhancing user
experience and making web applications more engaging and interactive.

2.3.1. Client-slide Scripting: JavaScript is primarily a client-side scripting language,

meaning it runs in the user's web browser rather than on a web server. This enables
developers to create dynamic web pages that respond to user interactions in real-time
without needing to communicate with the server for every action.

2.3.2. Cross-platform Compatibility: JavaScript is supported by all major web

browsers, including Chrome, Firefox, Safari, and Edge. This cross-platform
compatibility makes it a universal language for web development, ensuring that
JavaScript-powered applications can run seamlessly across different browsers and
devices.

2.3.3. Dynamic Content Manipulation: JavaScript allows developers to manipulate

the content and behaviour of web pages dynamically. With JavaScript, you can
dynamically update page content, modify HTML elements, change CSS styles, handle
user input, create animations, and more. This capability enables the creation of
interactive and engaging user interfaces.
2.3.4. Libraries and Frameworks: JavaScript has a vast ecosystem of libraries and
frameworks that extend its functionality and simplify common tasks. Popular libraries
like jQuery provide utilities for DOM manipulation and event handling, while
frameworks like React.js, Angular, and Vue.js offer tools for building complex user
interfaces and single-page applications.
2.4.5. Server side Development: While JavaScript is primarily associated with
client-side scripting, it can also be used for server-side development with platforms
like Node.js. Node.js allows developers to build scalable and high-performance
server-side applications using JavaScript, enabling full-stack JavaScript development.

7
 3. FRAMEWORKS

Frameworks play a pivotal role in modern software development, providing

developers with a structured and efficient way to build applications by abstracting
common tasks, providing reusable components, and enforcing best practices. These
frameworks offer a foundation upon which developers can build, accelerating
development time, promoting code consistency, and enhancing scalability and
maintainability. Here, we'll explore the concept of frameworks and their significance
in software development.

3.1 What are Frameworks?

Frameworks are pre-built structures that provide a set of tools, libraries, and
conventions for developing software applications. They offer a scaffolding upon
which developers can build their applications, abstracting away low-level details and
providing high-level abstractions for common tasks such as handling HTTP requests,
managing databases, and rendering user interfaces.
Frameworks typically include components such as libraries, modules, and templates
that encapsulate common functionality and best practices, allowing developers to
focus on application-specific logic rather than reinventing the wheel. By providing a
standardized approach to development, frameworks promote code consistency,
maintainability, and scalability across projects and teams.

3.2 Types of Frameworks:

Frameworks can be categorized into several types based on their use case, platform,
and programming language. Some common types of frameworks include:

1. Web Frameworks: Web frameworks are used for building web applications
and APIs. They provide tools and libraries for handling HTTP requests,
routing, templating, authentication, and database interaction. Examples
include Django and Flask for Python, Ruby on Rails for Ruby, Express.js for
Node.js, and Laravel for PHP.

8
 2. Frontend Frameworks: Frontend frameworks are used for building user
interfaces and interactive web applications. They provide components, state
management, and routing solutions to streamline frontend development.
Examples include React.js, Angular, Vue.js, and Svelte.

3. Mobile Frameworks: Mobile frameworks are used for building native and
cross-platform mobile applications. They provide tools and libraries for
building user interfaces, accessing device features, and managing application
state. Examples include React Native, Flutter, Xamarin, and Ionic.

4. Desktop Frameworks: Desktop frameworks are used for building desktop

applications for various operating systems. They provide tools and libraries for
building graphical user interfaces, handling user input, and interacting with
system resources. Examples include Electron, JavaFX, PyQt, and Tkinter.

5. Backend Frameworks: Backend frameworks are used for building server-side

applications and services. They provide tools and libraries for handling HTTP
requests, processing data, interacting with databases, and implementing
business logic. Examples include Express.js, Django, Ruby on Rails, and
Spring Boot.

3.3 React.JS

React.js, an acclaimed JavaScript library developed by Facebook, revolutionizes

frontend development with its component-based architecture, virtual DOM, and
declarative approach. Leveraging React's modular structure, developers create
reusable UI components, fostering code reusability and maintainability across
projects. By abstracting low-level DOM manipulation, React optimizes rendering
performance through its virtual DOM, efficiently updating only necessary
components. JSX, React's syntax extension, seamlessly combines HTML-like syntax
within JavaScript, enhancing code readability and expressiveness. React's extensive

9
ecosystem includes indispensable tools like React Router for navigation and Redux
for state management, empowering developers to build complex applications with
ease. Supported by a thriving community and comprehensive documentation, React
continues to dominate the frontend landscape, offering unparalleled speed, scalability,
and developer experience for crafting modern web experiences.
Certainly, let's delve deeper into React.js, a popular frontend JavaScript library often
referred to as a framework due to its comprehensive ecosystem and capabilities:

3.3.1 Introduction to React.js:

React.js, commonly known as React, is an open-source JavaScript library developed

and maintained by Facebook. It is primarily used for building user interfaces (UIs) for
single-page applications (SPAs) and is renowned for its component-based architecture
and declarative approach to building UIs. React.js is widely adopted by developers
and organizations worldwide for its simplicity, efficiency, and performance.

3.3.2 Component-Based Architecture:

At the core of React.js lies its component-based architecture, which enables

developers to build encapsulated and reusable UI components. Components in
React.js are self-contained units of UI that can be composed together to build complex
interfaces. This modular approach to development promotes code reusability,
maintainability, and scalability, allowing developers to efficiently manage large and
complex codebases.

3.3.3 Virtual DOM:

React.js employs a virtual DOM (Document Object Model) to optimize the rendering
performance of web applications. The virtual DOM is an in-memory representation of
the actual DOM and acts as a lightweight copy that React.js can manipulate
efficiently. When changes are made to the UI, React.js reconciles the virtual DOM
with the actual DOM, computing the most efficient way to update the UI and
minimizing unnecessary re-renders.

10
3.3.4 Declarative Syntax:
React.js utilizes a declarative syntax to describe the desired state of the UI, rather than
imperative instructions on how to manipulate the DOM. This declarative approach
simplifies UI development by abstracting away low-level DOM manipulation and
allowing developers to focus on describing the UI in terms of its state and behaviours.
As a result, React.js code is more concise, readable, and maintainable compared to
traditional imperative approaches.

3.4 Bootstrap

Bootstrap, an open-source front-end framework developed by Twitter, has become a

cornerstone of modern web development, offering a comprehensive suite of tools,
components, and utilities for building responsive and visually appealing websites and
web applications. With Bootstrap, developers can leverage pre-designed CSS and
JavaScript components, including grids, navigation bars, forms, buttons, and modals,
to quickly prototype and build user interfaces that adapt seamlessly across different
devices and screen sizes. The framework's grid system provides a flexible and fluid
layout structure, allowing developers to create complex grid-based designs with ease.
Additionally, Bootstrap's extensive documentation, customization options, and
community support make it a go-to choice for developers seeking to streamline the
development process and deliver high-quality, cross-browser compatible websites and
applications. Whether you're a beginner or an experienced developer, Bootstrap
remains a versatile and reliable tool for building modern and responsive web projects.

11
 4. API INTEGRATION

API integration is the process of connecting different software systems or applications

through their respective Application Programming Interfaces (APIs) to enable them to
communicate and share data seamlessly. In today's digital landscape, where
businesses rely on an array of specialized tools and services to streamline operations
and enhance user experience, API integration plays a pivotal role in ensuring smooth
interoperability between disparate systems. Whether it's integrating payment gateways
for e-commerce platforms, social media APIs for seamless sharing and engagement,
or connecting enterprise resource planning (ERP) systems for synchronized data
management, API integration empowers businesses to harness the full potential of
their software ecosystem.
At its core, API integration involves establishing a communication channel between
two or more applications, allowing them to exchange data in a standardized format.
This exchange of information could range from simple requests and responses to more
complex interactions involving data synchronization, authentication, and error
handling. The versatility of APIs enables developers to tailor integrations to specific
use cases, accommodating diverse requirements and workflows across various
industries.

One of the primary benefits of API integration is its ability to streamline processes
and enhance efficiency by automating tasks that would otherwise require manual
intervention. By integrating disparate systems, businesses can eliminate silos of
information, reduce redundant data entry, and minimize errors, thereby improving
overall productivity and resource utilization. Moreover, API integration facilitates
real-time data synchronization, enabling stakeholders to access up-to-date information
across all integrated applications, which is crucial for informed decision-making and
maintaining data integrity.

12
4.1 Benefits of API Integration:

API integration offers numerous advantages to businesses, driving efficiency,

innovation, and scalability. One of the primary benefits is the ability to streamline
processes and enhance productivity by automating tasks that would otherwise require
manual intervention. By integrating disparate systems, organizations can eliminate
data silos, reduce redundancy, and minimize errors, thereby optimizing resource
utilization and improving overall operational efficiency. Additionally, API integration
facilitates real-time data synchronization, enabling stakeholders to access up-to-date
information across all integrated applications. This real-time access to data is crucial
for informed decision-making and ensures data integrity across the organization.
Furthermore, API integration fosters innovation by allowing businesses to leverage
the capabilities of third-party services and platforms without extensive development
efforts. Instead of reinventing the wheel, organizations can tap into a vast ecosystem
of APIs offered by specialized providers, incorporating cutting-edge functionalities
such as artificial intelligence, machine learning, and geolocation services into their
existing workflows. This accelerates time-to-market for new products and features,
enabling businesses to stay ahead of the competition and adapt quickly to evolving
market demands.

Moreover, API integration enhances scalability by providing a flexible framework for

integrating new applications and services as business needs evolve. Whether it's
expanding into new markets, launching new products, or accommodating increased
user demand, API integration enables organizations to scale their infrastructure and
adapt their systems accordingly. This scalability is essential for businesses to remain
agile and responsive in today's fast-paced digital landscape, where agility and
flexibility are key to success.

4.2 Use Cases of API Integration:

API integration finds application across various industries and domains, enabling
businesses to enhance their processes, improve customer experiences, and drive
innovation. One prominent use case is in e-commerce, where API integration
facilitates seamless transactions, inventory management, and order fulfilment. By
integrating payment gateways, shipping carriers, and inventory management systems,

13
e-commerce businesses can automate processes, reduce manual effort, and provide a
smoother shopping experience for customers.

Another use case is in healthcare, where API integration enables interoperability

between electronic health record (EHR) systems, laboratory systems, and medical
devices. This allows healthcare providers to access patient information across
different systems, improve care coordination, and enhance patient outcomes.
Additionally, API integration facilitates the integration of telehealth platforms, remote
monitoring devices, and patient portals, enabling remote consultations, monitoring,
and communication between patients and healthcare providers.

In the financial services industry, API integration is used for connecting banking
systems, payment processors, and financial management tools. By integrating APIs
from financial institutions, fintech startups can offer innovative services such as peer-
to-peer payments, budgeting apps, and investment platforms. API integration also
enables financial institutions to streamline compliance processes, automate data
sharing with regulators, and enhance fraud detection and prevention.

Moreover, API integration plays a crucial role in the travel and hospitality industry,
where it enables seamless bookings, reservations, and customer interactions. By
integrating APIs from airlines, hotels, car rental companies, and travel aggregators,
travel agencies and online booking platforms can provide comprehensive travel
solutions to customers. API integration also facilitates personalized recommendations,
loyalty program integration, and real-time updates on travel itineraries and
availability.

4.3 Cross-Origin Resource Sharing (CORS):

Cross-Origin Resource Sharing (CORS) is a security feature implemented by web
browsers to control access to resources on a web page from different origins. An
origin is defined as the combination of protocol, domain, and port number. When a
web page makes a request to a different origin (i.e., a different domain, protocol, or
port), the browser enforces the Same-Origin Policy by default, which restricts access
to resources to only the same origin.

14
CORS allows web servers to specify which origins are allowed to access their
resources by including specific HTTP headers in their responses. When a browser
receives a cross-origin request, it first sends a preflight request (an OPTIONS request)
to the server to determine if the actual request is safe to send. The server then
responds with appropriate CORS headers indicating whether the request is allowed or
not.
The CORS policy can be configured on the server-side to allow or restrict access
based on various criteria such as the requesting origin, HTTP methods, headers, and
credentials. By configuring CORS policies effectively, web servers can prevent
unauthorized cross-origin requests while still allowing legitimate requests from
trusted origins.

4.4 Axios:
Axios is a popular JavaScript library used for making HTTP requests from web
browsers and Node.js environments. It provides a simple and elegant API for
performing asynchronous HTTP requests, handling request and response data, and
managing request headers and options.

Axios supports various features such as automatic transformation of JSON data,

interception of requests and responses, cancellation of requests, and protection against
CSRF (Cross-Site Request Forgery) attacks by automatically including a CSRF token
in requests.

One of the key benefits of Axios is its promise-based API, which allows developers to
write asynchronous code in a more concise and readable manner using async/await
syntax or chaining promises with .then() and .catch() methods. This makes it easy to
handle asynchronous operations such as fetching data from an API, processing the
response, and updating the UI accordingly.
Axios also provides built-in support for interceptors, which are functions that can be
registered globally or per request to modify request or response data, handle errors, or
perform logging and debugging. This allows developers to centralize logic for
handling common tasks such as adding authentication tokens to requests, logging
request and response data, or handling errors in a consistent manner across all
requests.

15
 5. ANALYSIS

5.1 Required Analysis

The Nova Gist News Application is a React.js-based platform designed to deliver the
latest news updates efficiently. Utilizing Bootstrap for its responsive design and
integrating various APIs for fetching news from different countries, the application
aims to provide users with a seamless news browsing experience. In this analysis, we
will delve into the key aspects of the application, its functionality, design choices, and
potential areas for improvement.

The functionality of the Nova Gist News Application extends beyond mere news
aggregation, encompassing a suite of features designed to cater to the diverse needs
and preferences of modern-day users. Through the integration of multiple APIs, the
application curates a dynamic news feed, spanning a wide range of topics, regions,
and sources. From breaking news alerts to in-depth analysis pieces, users have access
to a wealth of information at their fingertips.

Furthermore, the design ethos of the Nova Gist News Application revolves around
simplicity, elegance, and functionality. By combining responsive design principles
with custom styling elements, the application strikes a delicate balance between
aesthetic appeal and user experience. Whether browsing headlines, exploring articles,
or customizing news preferences, users are met with an interface that is both visually
engaging and intuitively navigable.

5.2 Design Considerations

A critical aspect of the Nova Gist News Application is its design, which plays a
pivotal role in shaping user perceptions and interactions. The decision to leverage
React.js and Bootstrap reflects a commitment to modern web development practices,
ensuring scalability, maintainability, and performance.

16
The choice of Bootstrap for responsive design is particularly noteworthy, as it enables
seamless adaptation to various screen sizes and devices. This responsiveness enhances
accessibility and usability, allowing users to access the application across desktops,
tablets, and smartphones without compromising functionality.
Furthermore, the incorporation of HTML and CSS underscores attention to detail in
crafting a visually appealing interface. Custom styling elements not only enhance
aesthetics but also contribute to brand identity and user engagement. However, while
the current design is functional, there may be opportunities to further refine the visual
presentation and optimize user flows for enhanced usability.

5.2.1 Visual Aesthetics and Brand Cohesion

The visual aesthetics of the Nova Gist News Application are meticulously crafted to
evoke a sense of elegance and coherence. From the choice of color palettes to
typography selections, every design element is thoughtfully curated to create a
visually engaging experience. Consistency in branding elements such as logos, icons,
and color schemes reinforce brand identity and fosters user recognition. Moreover, the
use of whitespace and layout design enhances readability and focus, guiding users'
attention to the most relevant content and features.

5.2.2 User Interaction and Engagement

User interaction is a cornerstone of the design philosophy behind the Nova Gist News
Application. Through intuitive navigation pathways, interactive elements, and
feedback mechanisms, users are empowered to explore and engage with news content
effortlessly. Features such as swipe gestures, tooltips, and animated transitions
enhance interactivity, immersing users in a dynamic and engaging browsing
experience. Additionally, interactive components such as comment sections, social
sharing buttons, and personalized recommendations foster community engagement
and user participation, transforming passive news consumption into active dialogue
and discourse.

17
5.2.3 Usability and Accessibility

Usability and accessibility are paramount considerations in the design of the Nova
Gist News Application. By adhering to industry best practices and accessibility
standards such as WCAG (Web Content Accessibility Guidelines), the application
ensures inclusivity and equal access for users of all abilities. Features such as
keyboard navigation, screen reader compatibility, and alternative text descriptions for
images enhance accessibility, enabling users with disabilities to navigate and consume
news content effectively. Moreover, the application prioritizes responsive design
principles, ensuring optimal viewing experiences across devices and screen sizes. By
embracing responsive design, the Nova Gist News Application caters to the diverse
needs and preferences of modern-day users, regardless of their choice of device or
platform.

5.2.4 Performance Optimization

Performance optimization is integral to the design of the Nova Gist News

Application, ensuring fast load times, smooth animations, and seamless user
interactions. Through techniques such as lazy loading, code splitting, and image
optimization, the application minimizes resource consumption and maximizes
efficiency, delivering a snappy and responsive user experience. Moreover, the use of
caching mechanisms and CDN (Content Delivery Network) integration further
enhances performance, reducing latency and improving content delivery speeds. By
prioritizing performance optimization, the Nova Gist News Application not only
enhances user satisfaction but also mitigates bounce rates and improves search engine
rankings.

5.2.5 Design Flexibility and Scalability

The design of the Nova Gist News Application is inherently flexible and scalable,
allowing for seamless adaptation to evolving user needs and technological
advancements. Modular design principles facilitate easy maintenance, updates, and
feature enhancements, enabling the application to evolve iteratively over time.
Moreover, the use of component-based architecture and design systems promotes

18
consistency and reusability, streamlining the development process and fostering
collaboration among team members. By embracing design flexibility and scalability,
the Nova Gist News Application remains agile and responsive to changing market
dynamics and user expectations, ensuring its long-term viability and relevance in the
digital landscape.

Certainly, let's explore the API integration aspect of the Nova Gist News Application
in more detail, focusing on the intricacies of sourcing and aggregating news content
from diverse sources worldwide.

5.3 API Integration

The seamless integration of APIs lies at the heart of the Nova Gist News Application,
driving its dynamic and expansive news coverage. Through strategic partnerships
with reputable news sources, the application aggregates real-time news updates from
around the globe, providing users with a comprehensive and diverse information
landscape.

5.3.1 Sourcing Reliable News Data

The Nova Gist News Application relies on API integration to source reliable and up-
to-date news data from a diverse range of sources worldwide. Through strategic
partnerships with reputable news organizations, the application accesses a wealth of
news content spanning various topics, regions, and languages. By leveraging APIs
provided by these organizations, the application ensures the authenticity and
credibility of the news content delivered to users.

5.3.2 Aggregating Real-time Updates

Real-time updates are crucial for providing users with the latest news developments as
they unfold. The Nova Gist News Application employs API integration to aggregate
real-time updates from multiple sources, enabling users to stay informed about
breaking news events, trending topics, and emerging stories. By continuously
monitoring news feeds and leveraging API endpoints that support real-time data

19
retrieval, the application delivers timely and relevant news updates, enhancing user
engagement and satisfaction.

5.3.3 Customization and Personalization

API integration enables customization and personalization features within the Nova
Gist News Application, allowing users to tailor their news feeds according to their
preferences and interests. By leveraging APIs that support query parameters such as
topic tags, keywords, and geographic regions, the application empowers users to filter
and refine their news content based on specific criteria. Whether users are interested
in politics, technology, sports, or entertainment, the application provides customizable
options to cater to diverse interests and preferences.

5.4 Performance Optimization

5.4.1 Lazy Loading:

Lazy loading is a technique used to defer the loading of non-essential resources until
they are needed. Within the Nova Gist News Application, lazy loading can be
implemented for images, videos, and other multimedia content. By loading content
only when it enters the viewport or is about to be displayed, lazy loading reduces
initial page load times and conserves bandwidth, resulting in a faster and more
responsive user experience.

5.4.2 Code Splitting:

Code splitting involves breaking down the application's codebase into smaller, more
manageable chunks that can be loaded asynchronously as needed. This allows the
application to load essential code upfront while deferring the loading of less critical
code until it's required. By implementing code splitting, the Nova Gist News
Application can minimize the initial bundle size, reduce loading times, and improve
overall performance, especially on slower network connections.

20
5.4.3 Server-Side Rendering (SSR):

Server-side rendering (SSR) involves generating HTML content on the server and
sending fully rendered pages to the client, as opposed to relying on client-side
JavaScript to render content dynamically. By pre-rendering HTML on the server, SSR
improves time-to-first-byte (TTFB) and enhances perceived performance for users,
especially on low-powered devices or slow network connections. Implementing SSR
in the Nova Gist News Application can result in faster initial page loads and better
search engine optimization (SEO), as pre-rendered content is more easily indexable
by search engine crawlers.

5.4.4 Content Delivery Networks (CDNs):

Content Delivery Networks (CDNs) are distributed networks of servers strategically

located around the world to deliver content to users with minimal latency. By caching
static assets such as images, style sheets, and JavaScript files on edge servers located
closer to users' geographical locations, CDNs reduce the distance data needs to travel,
resulting in faster load times and improved performance. Integrating CDNs into the
Nova Gist News Application's infrastructure can enhance content delivery speeds and
ensure a consistent user experience for users worldwide, regardless of their location.

5.4.5 Minification and Compression:

Minification and compression techniques involve reducing the size of files by

removing unnecessary whitespace, comments, and redundant code, and compressing
them using algorithms such as Gzip or Brotli. By minimizing file sizes, minification
and compression optimize network transmission and reduce bandwidth usage,
resulting in faster load times and improved performance for users. Implementing
minification and compression for CSS, JavaScript, and other assets in the Nova Gist
News Application can significantly improve page load speeds and enhance overall
user experience, particularly on mobile devices and slower network connections.

21
5.4.6 Optimized Image Delivery:

Optimizing image delivery involves resizing, compressing, and serving images in the
most efficient format and resolution for the user's device and viewport size.
Techniques such as responsive images, lazy loading, and next-generation image
formats like Web can significantly reduce image file sizes and improve loading times
without sacrificing visual quality. By optimizing image delivery in the Nova Gist
News Application, pages load faster, bandwidth usage is reduced, and users
experience a smoother and more responsive browsing experience, especially on
devices with limited processing power or slower network connections.

5.4.7 Continuous Monitoring and Optimization:

Continuous monitoring and optimization are essential for maintaining peak

performance and identifying potential bottlenecks or issues in the Nova Gist News
Application. Monitoring tools and performance metrics, such as Google Lighthouse,
Web Page Test, or New Relic, can be used to track key performance indicators (KPIs)
such as page load times, resource utilization, and user experience metrics. By
regularly monitoring performance and identifying areas for improvement, the
application can undergo iterative optimization cycles to ensure optimal performance
and user satisfaction over time.

22
 6. SOFTWARE REQUIREMENTS SPECIFICATIONS

6.1 System configurations:

The software requirement specification can produce at the culmination of the

analysis task. The function and performance allocated to software as part of
system engineering are refined by established a complete information description, a
detailed functional description, a representation of system behaviour, and indication
of performance and design constrain, appropriate validate criteria, and other
information pertinent to requirements.

6.2 Software Requirements:

 Operating System : Windows 11

 Coding Language : HTML, CSS, JavaScript, React.js,
 Front-End : Visual Studio 2015 Professional.
 Data Base : MySQL

6.3 Hardware Requirement:

 System : Intel(R) Core(TM) i5 2.50 GHz

 Hard Disk : 1TB.
 Ram : 8GB.

6.4 Collaboration Tools:

 Google Meet for communication and coordination within our project team.

6.5 Backup and Recovery:

 Backup Project Data and code to prevent data loss using cloud store.

23
 7. CODING

7.1 App component

import { Component } from "react";

import Navbar from "./components/Navbar";
import News from "./components/News";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import LoadingBar from "react-top-loading-bar";

export default class App extends Component {

apikey = import.meta.env.VITE_API_KEY;

constructor(props) {
super(props);
this.state = {
country: "in", // Initialize the state
mode: "danger",
progress: 0,
};
}
handleProgress = (progress) => {
this.setState({ progress: progress });
};

toogle = () => {
if (this.state.mode === "danger") {
this.setState({ mode: "dark" });
document.body.style.backgroundColor = "black";
} else {
this.setState({ mode: "danger" });
document.body.style.backgroundColor = "white";
}
};

countryfunction = (countryname) => {

const countryMapping = {
USA: "us",
IND: "in",
UK: "gb",
AUS: "au",
CAN: "ca",
UAE: "ae",
SA: "za",
NZ: "nz",
SG: "sg",
MY: "my",
// Add more countries and their corresponding country codes as needed
};

24
 const selectedCountryCode = countryMapping[countryname];

if (selectedCountryCode) {
this.setState({ country: selectedCountryCode });
console.log(countryname);
}
};

render() {
return (
<>
<Router>
<Navbar
title="NovaGist"
USA=" USA"
IND=" IND"
UK="UK"
AUS="AUS"
CAN="CAN"
UAE="UAE"
SA="SA"
NZ="NZ"
SG="SG"
MY="MY"
countryfunction={this.countryfunction}
mode={this.state.mode}
toogle={this.toogle}
/>
<LoadingBar
color="#0B2447"
progress={this.state.progress}
height={3}
onLoaderFinished={() => this.setState({ progress: 0 })}
/>

<Routes>
<Route
path="/"
element={
<News
mode={this.state.mode}
country={this.state.country}
category="general"
setprogress={this.handleProgress}
apikey={this.apikey}
/>
}
/>
{/* //Todo About */}

25
<Route
path="/business"
element={
<News
mode={this.state.mode}
country={this.state.country}
category="business"
setprogress={this.handleProgress}
apikey={this.apikey}
/>
}
/>
<Route
path="/entertainment"
element={
<News
mode={this.state.mode}
country={this.state.country}
category="entertainment"
setprogress={this.handleProgress}
apikey={this.apikey}
/>
}
/>
<Route
path="/health"
element={
<News
mode={this.state.mode}
country={this.state.country}
category="health"
setprogress={this.handleProgress}
apikey={this.apikey}
/>
}
/>
<Route
path="/science"
element={
<News
mode={this.state.mode}
country={this.state.country}
category="science"
setprogress={this.handleProgress}
apikey={this.apikey}
/>
}
/>
<Route
path="/sports"

26
 element={
<News
mode={this.state.mode}
country={this.state.country}
category="sports"
setprogress={this.handleProgress}
apikey={this.apikey}
/>
}
/>
<Route
path="/technology"
element={
<News
mode={this.state.mode}
country={this.state.country}
category="technology"
setprogress={this.handleProgress}
apikey={this.apikey}
/>
}
/>
</Routes>
</Router>
</>
);
}
}

7.2 Navbar
import { Component } from "react";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import "./Navbar.css";

export default class Navbar extends Component {

constructor(props) {
super(props);
this.state = {
countries: [
{ name: "USA" },
{ name: "IND" },
{ name: "UK" },
{ name: "AUS" },
{ name: "CAN" },
{ name: "UAE" },
{ name: "SA" },
{ name: "NZ" },
{ name: "SG" },
{ name: "MY" },

27
 // Add more countries as needed
],
selectedCountry: "Select Country",
mode: "danger",
};
}

handleCountryClick = (countryName) => {

this.setState({ selectedCountry: countryName });
this.props.countryfunction(countryName);
};

handleMouseEnter = () => {
// Open dropdown
document.querySelector(".dropdown-menu").style.display = "block";
};

handleMouseLeave = () => {
// Close dropdown
document.querySelector(".dropdown-menu").style.display = "none";
};

render() {
const { title } = this.props;
const { countries, selectedCountry } = this.state;

return (
<div>
<nav
className={`navbar fixed-top navbar-expand-lg bg-${this.props.mode}
navbar-${this.props.mode}`}
id="nav"
>
<div className="container-fluid">
<a className="navbar-brand " href="#">
{title}
</a>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div
className="collapse navbar-collapse "

28
 id="navbarSupportedContent"
>
<ul className="navbar-nav me-auto mb-2 mb-lg-0 ">
<li className="nav-item ">
<Link
key="home"
className="nav-link itemsinnavbar active fw-bold"
aria-current="page"
to="/"
>
Home
</Link>
</li>
<li className="nav-item">
<Link
key="about"
className="nav-link itemsinnavbar fw-bold "
id="navlist"
to="/about"
>
About
</Link>
</li>
<li
className="nav-item dropdown"
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
>
<a
className="nav-link itemsinnavbar dropdown-toggle fw-bold"
href="#"
id="navbarDropdown"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
{selectedCountry}
</a>
<ul
className="dropdown-menu"
aria-labelledby="navbarDropdown"
>
{countries.map((country, index) => (
<li key={index}>
<button
className="dropdown-item "
href="#"
onClick={() => this.handleCountryClick(country.name)}
>
{country.name}

29
 </button>
</li>
))}
</ul>
</li>
</ul>

<div
className={`form-check form-switch text-${
this.props.mode === "dark" ? "white" : "dark"
} fw-bold `}
>
<input
className="form-check-input"
type="checkbox"
id="flexSwitchCheckChecked"
onClick={this.props.toogle}
/>
<label
className="form-check-label"
htmlFor="flexSwitchCheckChecked"
>
{this.props.mode === "dark"
? "Enable Light Mode"
: "Enable Dark Mode"}
</label>
</div>
</div>
</div>
</nav>
</div>
);
}
}
7.3 News Fetching
import { Component } from "react";
import NewsItem from "./NewsItem";
import Spinner from "./spinner";
import PropTypes from "prop-types";
import InfiniteScroll from "react-infinite-scroll-component";
import _ from "lodash";
import Carasoul from "./Carasoul";

export default class News extends Component {

constructor(props) {
super(props);
this.state = {
news: [], // Initialize the state
page: 1,
isLoading: false,

30
 totalresults: 0,
carouselImages: [], // Store images for carousel
};
this.fetchNewsDebounced = _.debounce(this.fetchNews, 300); // debounce
fetchNews function
}

async componentDidMount() {
await this.fetchNews();
}

// Inside the News component

async componentDidUpdate(prevProps) {
if (
prevProps.country !== this.props.country ||
prevProps.category !== this.props.category
){
this.fetchNewsDebounced(); // trigger debounced fetchNews function
document.title = `NovaGist - ${this.props.category}`;
}
}

fetchNews = async () => {

News.propTypes = {
apiKey: PropTypes.string.isRequired,
// other prop types...
};

this.props.setprogress(10);
let url = `https://newsapi.org/v2/top-
headlines?country=${this.props.country}&category=${this.props.category}&apiKey=
${this.props.apikey}&page=${this.state.page}&pageSize=20`;
console.log(this.props.country);
this.setState({ isLoading: true });
let data = await fetch(url);
this.props.setprogress(30);
let parsedData = await data.json();
this.props.setprogress(70);
console.log(parsedData);
this.setState({
news: parsedData.articles,
isLoading: false,
totalresults: parsedData.totalResults,
});
this.props.setprogress(100);
};

fetchMoreData = async () => {

let url = `https://newsapi.org/v2/top-headlines?country=${
this.props.country

31
 }&category=${this.props.category}&apiKey=${this.props.apikey}&page=${
this.state.page + 1
}&pageSize=20`;
this.setState({ page: this.state.page + 1 });
console.log(this.props.country);
this.setState({ isLoading: true });
let data = await fetch(url);
let parsedData = await data.json();
console.log(parsedData);
this.setState({
news: this.state.news.concat(parsedData.articles),
totalresults: parsedData.totalResults,
isLoading: false,
});
};

render() {
const { mode } = this.props;
const { news } = this.state;

return (
<>
<h1
className="text-center "
style={{
color: mode === "dark" ? "white" : "black",
marginTop: "70px",
fontWeight: "bold",
}}
>
Top-Headlines from {this.props.category}
</h1>
<div className="d-flex justify-content-between my-3 mx-2">
<div className="categoryfrombottom">
<h3
className="text-danger display-line"
style={{
fontWeight: "bold",
}}
>
Category:{" "}
<span
style={{
color: mode === "dark" ? "white" : "black",
}}
>
{this.props.category}
</span>
</h3>
</div>

32
 <div className="countryfrombottom">
<h3
className="text-danger display-line"
style={{
fontWeight: "bold",
}}
>
Country:{" "}
<span
style={{
color: mode === "dark" ? "white" : "black",
}}
>
{this.props.country}
</span>
</h3>
</div>
</div>

<Carasoul news={news} />

<InfiniteScroll
dataLength={this.state.news.length}
next={this.fetchMoreData}
hasMore={this.state.news.length < this.state.totalresults}
loader={<Spinner />}
endMessage={"No more articles"}
>
<div className="container-fluid ">
<div className="row g-4 ">
{this.state.news.map((element) => {
// Check if urlToImage is null or undefined, and skip rendering if it is
if (!element.urlToImage) {
return null; // Skip rendering this NewsItem
}

return (
<div
className="col-md-3"
key={element.url}
style={{
minHeight: "300px",
}}
>
<NewsItem
title={element.title}
mydesc={element.description}
imgSrc={element.urlToImage}
linkUrl={element.url}
Author={element.author}

33
 date={element.publishedAt}
mode={mode}
/>
</div>
);
})}
</div>
</div>
</InfiniteScroll>
</>
);
}
}

News.propTypes = {
country: PropTypes.string.isRequired,
category: PropTypes.string.isRequired,
mode: PropTypes.string.isRequired,
setprogress: PropTypes.func,
apikey: PropTypes.string,
};

34
8. SCREEN SHOTS

Figure 8.1

Figure 8.2

35
Figure 8.3

Figure 8.4

36
Figure 8.5

Figure 8.6

37
Figure 8.7

38
 9. CONCLUSION

The Nova Gist News Application, built with React.js, stands as a

testament to innovation and excellence in the realm of news consumption.
With its seamless user experience, comprehensive functionality, and
robust performance optimization, the application represents a significant
advancement in how users engage with news content.

Throughout the development process, meticulous attention was paid to

every aspect of the application, from its intuitive user interface to its
efficient API integration and performance optimization strategies.
Leveraging modern technologies such as lazy loading, code splitting, and
server-side rendering, the application delivers fast load times, smooth
navigation, and an immersive browsing experience across devices and
platforms.

In conclusion, the Nova Gist News Application sets a new standard for
excellence in news aggregation and consumption, offering users a
seamless and immersive platform to stay informed and engaged with the
world around them. With its user-centric design, advanced features, and
commitment to performance optimization, the application is poised to
shape the future of news delivery in the digital age.

39
 10. REFERENCES

This following blogs are referred during this analysis and execution phase of the
project
1. React.js. (n.d.). Retrieved from https://reactjs.org/
2. Bootstrap. (n.d.). Retrieved from https://getbootstrap.com/
3. "The Complete Guide to Lazy Loading Images" by Addy Osmani. (2018).
Retrieved from
https://developers.google.com/web/fundamentals/performance/lazy-
loading-guidance/images-and-video
4. "How to Optimize Images for Web and Performance" by Eric Portis. (2017).
Retrieved from https://www.smashingmagazine.com/2017/06/optimizing-web-
images/
5. ChatGPT by OpenAI. (n.d.). Retrieved from https://openai.com/chatgpt
6. Stack Overflow. (n.d.). Retrieved from https://stackoverflow.com/

40