News Web Application

A Project Report

Submited by

Lovum Saini (22MCA20060)

in partial fulfillment for the award of the degree of

Master of Computer Application

UIC (University Institute Of Computing)

September-23
 BONAFIDE CERTIFICATE

Certified that this project report “News Web Application” is the bonafide work of
“Lovum Saini” who carried out the project work under my supervision.

SIGNATURE SIGNATURE

Mr. Dr. Abdullah Mrs. Shweta

HEAD OF THE DEPARTMENT SUPERVISOR

Assistant Professor

UIC UIC

Submitted for the project viva-voce examination held on

INTERNAL EXAMINER EXTERNAL EXAMINER

 TABLE OF CONTENTS

CHAPTER 1. INTRODUCTION ........................................................................ 5

1.1. Identification of Client/ Need/ Relevant Contemporary issue ....................................... 5
1.2. Identification of Problem ...............................................................................................
1.3. Identification of Tasks ....................................................................................................
1.4. Timeline .........................................................................................................................
1.5. Organization of the Report .............................................................................................

CHAPTER 2. LITERATURE REVIEW/BACKGROUND STUDY .............

2.1. Timeline of the reported problem ...................................................................................
2.2. Existing solutions ...........................................................................................................
2.3. Bibliometric analysis ......................................................................................................
2.4. Review Summary ...........................................................................................................
2.5. Problem Definition .........................................................................................................
2.6. Goals/Objectives ............................................................................................................

CHAPTER 3. DESIGN FLOW/PROCESS .......................................................

3.1. Evaluation & Selection of Specifications/Features ........................................................
3.2. Design Constraints .........................................................................................................
3.3. Analysis of Features and finalization subject to constraints ..........................................
3.4. Design Flow ...................................................................................................................
3.5. Design selection .............................................................................................................
3.6. Implementation plan/methodology ................................................................................

CHAPTER 4. RESULTS ANALYSIS AND VALIDATION ..........................

4.1. Implementation of solution ............................................................................................

CHAPTER 5. CONCLUSION AND FUTURE WORK ..................................

5.1. Conclusion ...........................................................................................................................
5.2. Future work ........................................................................................................
 ABSTRACT

As the name suggests this website is based upon daily news. As there are
newspapers but they are not available all over the time and sometime they are
hard to carry also. This website handles this problem.
The News Web Application is a Web based application. This website works
upon an api from where we fetch the news. This web-based Application is time
saving, money saving and user can read news at any time and at any place. In
the day-to-day life of every person news plays an important role. With the help
of news, we can get in touch with the outer world, what is happening in the
outside world. With the help of this website every person can get to know what
is happening in the outside world without going outside from their respective
places.
For elder people’s it is very difficult for them to go out and get newspapers, but
with the help of this website they can read any news based on any field. This
website saves the time of common people as there are different sections of
different fields for example entertainment, sports, business and so on. There is
also one section called trending news where we can get all the trending news
based on any field which makes this website more helpful and better. As there is
google, newspapers, tv channels for news so why the people will use this
website? The answer is first of all this website is free of cost anyone can access
it from anywhere, this website is available 24 X 7 just users need internet
connection and one phone to access this website, this website s time saving as
there are different sections for different type of new which helps to save the
time.
 Chapter - 1
INTRODUCTION

1.1 Problem Definition

The problem was there were newspapers, google, tv channels for news
forecasting. Sometimes newspapers are not available but this will be available to
everyone at any time. Users can google for reading news but it is time
consuming, in this website there are different sections for different fields of
news which is time saving. And at tv channels they sometimes repeat single
news only and sometime irrelevant news also in this website it will never
happens. As we are using a real time api for fetching the news so the news
shown on the website will be on daily bases.

1.2 About Project

Here I am proposing a web application for reading news that is News
Web Application. The objective of this application is to make common people’s
life easy and save their precious time. The Application will fetch the news from
the real time api which works on real time means if any news come in mid-day
this api gets updated at that time only which makes this website more powerful.
This Application contains different options in the navigation bar such as
entertainment, sports, business and so on. Under these fields only a particular
type of news can be seen. And there is one trending section also. In this section
all the trending news will be shown. Which makes easy for the user if he/she
wants to read only a particular type of news. The Ui is card based where the
card consists of small image, some text related to that news and one read more
button. The read more button is helpful when user wants to read more about the
particular news.

1.3 System Requirements

Name of Specifications
Components
Web browser Chrome, edge, opera,
so on
Frontend [Link] and tailwind css
Development
Backend News api
Development
1.4 Project Analysis

1.4.1 Existing Project

The sources used now for reading news are newspaper, google, television in
which we are not able to read about particular field if it is possible then there is
wastage of time, money and resources of common people which is good for
long term.
Maximum number of the sources are paid if they are not paid then they do not
provide good quality and it is time consuming. One more very
important point they are not accessible at every time and everywhere which
again is not a good thing.

1.4.2 Proposed Project

The project I am creating is accessible from everywhere and at every time

by anyone. This project is fully web based the information is fresh and this
website is based on real time api in which the information is updated after every
few minutes which makes this website more updated and reliable. This website
is not biased, it is backed by journalistic practices, it has an editorial process,
and it offer reporting and research rather than opinion and propaganda.
It is cost-effective and smart way to stay updated. As compared with the
existing
project it is time saving, cost saving and it also saves resources also which
makes this website more useful for the long-term basis.
There are different sections for different fields of news such

1.5 Requirement Specifications

1. By default, user will land on trending page which u can also it is the home page
of the website where all the trending news will be shown.

2. User, can select any option or section from the navigation bar if he/she wants to
read about particular news.

3. There are different sections for different field of news for example
entertainment, business, sports and so on.
 4. With the help of different sections users can save their time by directly moving
to the particular section which they want to read.

5. There is read more button in every news card with the help of which we can
read more about that particular news.

1.6 Future Scope

The explosive growth in the usage of mobile devices for news and information
during the past years persistently boosted the newspaper digital audience.
According to the studies and surveys, the trend is going to increase in the future
and there are seen no any sign of decrease.

As it is cost, time and resource saving it will help to survive for long term.
Online portals or websites are easy to access from everywhere in the world. You
don’t have to be worried anymore thinking what are the things taking place in
your locale while you are abroad. Online news portals bring you the updates
instantly. This easy access feature is tempting readers to avoid print media.
 Chapter – 2
Literature Review/Background Study
In this chapter, we will dive into a comprehensive literature review and
background study related to the problems faced by the persons that our "News
Online" Web application aims to address. This section provides us the valuable
insights into the historical context, existing solutions, and the significance of our
project.
2.1 Timeline of the reported problem
Here is a timeline of some significant developments and events in the history of
news websites up until my last knowledge update in September 2021:

1990s-2000s:
1990s: Slow Internet connections and limited bandwidth affect the user
experience for accessing news websites.
Early 2000s: Pop-up ads and intrusive advertising disrupt the reading
experience on many news websites.
2000s: The rise of online forums and comment sections leads to concerns about
the spread of hate speech, trolling, and misinformation in user-generated
content.

2010s:
2010s: Clickbait headlines and sensationalism become prevalent on many news
websites, undermining the credibility of journalism.
2010s: Concerns about online privacy and data collection emerge as news
websites track user behavior for targeted advertising.
2010s: The proliferation of ad-blockers poses challenges to the revenue models
of news websites, impacting their sustainability.
2010s: The spread of fake news and misinformation on social media platforms
and news websites becomes a major concern.
2010s: Digital platforms like Google and Facebook are criticized for capturing a
large share of advertising revenue, affecting the financial health of news
websites.
 2016: The term "fake news" gains prominence during the U.S. presidential
election, drawing attention to the issue of false information on news websites.
2018: The European Union's General Data Protection Regulation (GDPR) is
implemented, forcing news websites to comply with strict data privacy
regulations.

2020s
2020: The COVID-19 pandemic leads to a surge in online disinformation and
conspiracy theories on news websites.
2020: The economic impact of the pandemic results in layoffs and financial
difficulties for many news organizations, including digital news websites.
2020: The debate over content moderation on social media platforms spills over
to news websites, raising questions about free speech and censorship.
2021: Algorithms on social media and news websites are criticized for
promoting filter bubbles and echo chambers, where users are exposed only to
content that aligns with their existing beliefs.
2021: Misinformation and disinformation about vaccines spread on news
websites, hindering efforts to combat the pandemic.

In the present time

Our website will help to remove the inconsistencies present in this field and will
help the ordinary peoples.
The challenges in the field are not exhaustive, and the landscape of news
websites continues to evolve.

2.2 Existing Solutions:

There were numerous well-known and widely-used news websites across the
world. Please keep in mind that the online news landscape is dynamic, and the
popularity and prominence of news websites can change over time. Here are
some well-established news websites from various regions and with different
focuses:
 BBC News: The British Broadcasting Corporation (BBC) provides
comprehensive news coverage on international and UK-related topics.
CNN: Cable News Network (CNN) is a major global news network offering
breaking news, features, and analysis.
The New York Times: A leading American newspaper providing extensive
coverage of national and international news, as well as in-depth analysis and
features.
NPR: National Public Radio (NPR) in the United States offers in-depth news
reporting, features, and podcasts on a wide range of topics.
The Wall Street Journal: A leading American business and financial news
source known for its coverage of economic and financial markets.
The Times of India: One of India's largest English-language newspapers,
offering comprehensive news coverage.
BBC Sport: BBC's sports section, covering a wide range of sports events and
news.
ESPN: ESPN is a prominent sports news and entertainment website, providing
coverage of various sports and events.
BuzzFeed News: BuzzFeed News covers a wide range of topics, including
politics, culture, and entertainment, with a focus on digital media and trends.
National Geographic: Known for its exploration and science-focused content,
National Geographic provides news and features on topics related to nature,
science, and culture.

In News Online: This website is known for its wide variety of news. In this
website we are different sections for different types of news which makes it
different from others and its data is updated after a small interval of time which
will help the users to get time to time updated

2.3 Bibliometric analysis:

A bibliometric analysis offers valuable insights into the volume, trends, and
focus areas of research related to healthcare access, appointment scheduling,
and related topics. This section provides an overview of the bibliometric
analysis conducted to understand the existing body of literature in this
 domain. By analysing academic publications, research papers, and other
scholarly sources, we gain a deeper understanding of the academic landscape
and emerging research trends in healthcare access.
Methodology
The bibliometric analysis was conducted by searching relevant databases and
academic repositories for scholarly publications related to healthcare access and
related topics.
1. Define Your Research Question:
Determine the specific research question or objective of your analysis. For
example, you might want to understand the most frequently covered topics, the
popularity of authors or journalists, the citation patterns within news articles, or
the temporal trends in news coverage.
2. Data Collection:
Gather data from the news website. You can do this by web scraping or using
APIs if the website provides one. You'll need information such as article titles,
publication dates, author names, keywords, and any other relevant metadata.
Publication Trends: Over the last decade, there has been a notable increase in
publications related to healthcare access, appointment scheduling, and related
areas. This suggests a growing interest in addressing these challenges.
Emerging Topics: Recent research has explored emerging topics such as the
impact of power (e.g., mobile apps) on news websites, faulty data on the news
platforms and so on.

2.4. Review Summary

This section provides a concise summary of the key findings and insights
gathered from the literature review, existing solutions analysis, and bibliometric
analysis presented in the preceding sections. It serves as a bridge between the
background study and the project's specific problem definition and goals.

Key Findings and Insights

• Historical Context: The timeline of the reported problem reveals that
healthcare access challenges have persisted over time, with technology playing
an increasingly significant role in addressing them.
• Existing Solutions: The analysis of existing solutions highlights the
diversity of efforts to tackle news website issues. While several applications and
platforms aim to improve aspects of the user experience, there remains room for
more comprehensive, user-friendly solutions.
• Bibliometric Analysis: The bibliometric analysis underscores the growing
interest in News Websites and related areas within the academic and research
communities. It identifies key focus areas and emerging trends, emphasizing the
need for innovative solutions.

Implications for the "News Online" Project

The insights derived from the review process lay the foundation for the "News
Online" Web application project. They provide several implications and
considerations:
1. User-Centred Approach: The diverse landscape of existing solutions
emphasizes the importance of a user-centred approach. Our project will help to
benefit our users, convenience, and accessibility.
2. Technology Integration: As technology continues to play a pivotal role in
News, our project should leverage modern tools and technologies to deliver a
seamless user experience.
3. Comprehensive Information: The demand for comprehensive and real-
time availability information indicates the importance of providing users with a
wealth of information for informed decision-making.
4. Alignment with Research Trends: The emerging topics identified in the
bibliometric analysis, such as fake news impact and power of politics, align with
our project's goals and objectives.

In the subsequent sections of this report, we will define the problem of News
Websites problems more precisely, outline the specific goals and objectives of
the "News Online" Web application, and proceed to describe the development
and implementation process. This project aims to build upon the insights gained
from the review process and offer an innovative solution to the persistent
challenges news field.
2.5 Problem Definition
News websites face various challenges and problems in today's digital
landscape. These issues can impact their credibility, sustainability, and ability to
fulfil their roles as sources of information. Some common problems of news
websites include:

Misinformation and Fake News: The spread of false or misleading

information online is a significant concern. News websites may inadvertently
publish inaccurate stories, and fake news can spread rapidly, eroding public
trust in journalism.
Clickbait and Sensationalism: To attract online traffic and advertising
revenue, some news websites resort to sensationalized headlines and clickbait,
which can prioritize sensational stories over substantive journalism.
Declining Trust: Distrust in media is a growing problem. Readers often
question the credibility and objectivity of news websites, particularly when they
perceive political bias.
Competition from social media: Social media platforms often dominate the
distribution of news, making it challenging for news websites to stand out and
control their content's dissemination.
Lack of Quality Control: With the rapid pace of online news publishing, some
websites may prioritize speed over accuracy, leading to errors and poor fact-
checking.
Reader Engagement and Comments: Managing reader comments and
engagement can be problematic, as toxic comments and online harassment can
deter civil discourse and participation.
Content Aggregation and Plagiarism: News websites may face issues with
content aggregation and plagiarism when other sites republish their content
without permission or attribution.
Data Privacy and Security: News websites often collect user data for
advertising and analytics purposes, raising concerns about data privacy and
security breaches.
 Ad-Driven Content: Some news websites may prioritize content that generates
more clicks and advertising revenue, potentially compromising journalistic
integrity.
Legal and Ethical Challenges: News websites may encounter legal issues,
such as defamation lawsuits, and ethical dilemmas, such as protecting sources
while maintaining transparency.
Cybersecurity Threats: News websites can be targets of cyberattacks, which
can disrupt operations or compromise sensitive information.
Tech and Platform Dependence: News websites are often dependent on
technology platforms (e.g., content management systems, hosting providers)
that can be vulnerable to outages or technical issues.

Addressing these problems often requires a combination of journalistic ethics,

responsible business models, technological solutions, and proactive engagement
with readers. News websites must adapt to the changing media landscape to
maintain their credibility and relevance in the digital age.

Our News Online website is looking forward to optimize all these issues and
stand out from other websites.

2.6 Goals/Objectives
There are various goals of news websites. Some of them are listed below

Informing the Public: One of the primary goals of news websites is to inform
the public about current events, both locally and globally. They provide news,
articles, and multimedia content to keep people updated on important
happenings around the world.

Promoting Transparency: News website aim to promote transparency by

providing accurate and reliable information. It play a crucial role in
investigative journalism, uncovering issues of public interest and holding
institutions accountable.
Educating Readers: News websites educate readers by explaining complex
issues, providing analysis, and offering context to help audiences understand the
implications of news events. They often feature articles, opinion pieces, and
expert analyses to enhance public understanding of various topics.
Empowering Citizens: News websites empower citizens by providing them
with the information they need to make informed decisions about their lives,
communities, and societies.
Engaging Readers: While the primary goal of news websites is to inform, they
also aim to engage readers. They may feature human interest stories, lifestyle
content, and multimedia elements to keep readers engaged and coming back for
more.
Adapting to Digital Trends: With the rise of digital technologies, news
websites strive to adapt to changing trends, including mobile accessibility,
social media integration, and multimedia storytelling.
Ensuring Ethical Journalism: Upholding ethical standards in journalism is a
fundamental goal. News websites aim to maintain integrity, accuracy, and
fairness in their reporting, following established journalistic principles and
guidelines.
Building Trust: Establishing and maintaining trust with the audience is a key
goal for news websites. Trustworthy reporting and transparency in sourcing and
reporting contribute to building credibility and a loyal readership base.

Objectives of News Website:

The objectives of news website are
Promote Transparency: Many news organizations aim to hold governments,
businesses, and institutions accountable by reporting on corruption, abuse of
power, and other wrongdoing. This helps promote transparency and
accountability in society.
Provide Diverse Perspectives: News websites often strive to present a range of
viewpoints and perspectives on a given issue, allowing readers to make
informed judgments and decisions.
EnsureAccuracy and Objectivity: Maintaining accuracy and objectivity in
reporting is a fundamental objective. News organizations have editorial
guidelines and standards to ensure that their content is fair and unbiased.
Adapt to Changing Media Trends: News websites often need to adapt to new
technologies and changing media consumption habits, such as mobile device
usage and social media platforms.
Engage Audiences: Engaging with readers through multimediacontent,
interactive features, and user-generated content is an objective to keep
audiences interested and involved.
Promote Ethical Reporting: Ethical reporting, including responsible handling
of sensitive information and sources, is a key objective to maintain credibility
and trust.
Cover a Range of Topics: News websites aim to cover a broad spectrum of
topics, from politics and economics to culture, science, and technology, to cater
to diverse audience interests.
Reach a Global Audience: Many news websites seek to expand their reach
beyond their local or national boundaries to serve a global audience interested in
international news and affairs.
Combat Misinformation: In an era of fake news and misinformation, news
websites may have objectives related to fact-checking and combating false
information.
 Chapter – 3
Literature Review/Background Study
In this chapter, we will dive into a Design flow or the design process which
typically follows a structured series of steps to ensure that the project is well-
planned, executed, and documented. The design flow in a project report can
vary depending on the type of project and the specific requirements.

3.1 Evaluation & Selection of Specifications/Features

Here is a list of features that are ideally required for a news website:
1. Responsive Design:
Ensure the website is mobile-friendly and responsive to different screen sizes
and devices.
2. User-Friendly Navigation:
Clear and intuitive menu structure, Search functionality for easy content
discovery.

3. Content Management System (CMS):

An easy-to-use CMS for publishing, updating, and organizing articles. Support
for multimedia content (text, images, videos, etc.).

4. Categories and Tags:

Categorize and tag articles to help users find content related to specific topics.
A tag cloud or a list of popular tags can be helpful.

5. Featured Content:
Highlight important or breaking news stories, Prominent space for featured
articles and editor's picks.

6. Social Media Integration:

Share buttons for easy sharing of articles.
Social media feeds and widgets to display your social presence.

7. Commenting and Engagement:

User comments section for discussions.
 Voting, likes, or reaction buttons to gauge reader engagement.

8. Related Content:
Show related articles to keep readers engaged. Promote older articles to increase
their visibility.

9. Newsletter Signup:
Allow users to subscribe to newsletters. Send regular email updates with top
stories.

10. Security:
Implement security measures to protect against hacking and spam. Use SSL
encryption for secure connections.

11. Accessibility:
Ensure the website is accessible to all users, including those with disabilities.
Use alt text for images, provide keyboard navigation, and adhere to WCAG
guidelines.

12. Load Speed Optimization:

Optimize the website for fast loading times.
Compress images, minify code, and utilize content delivery networks (CDNs).

3.2 Design Flow

Design layout is basically how we design our user interface of an application
which will look attractive and make ui more interactive. This can help an
application to rank better and also can help to get good reviews from the users.
Basically, there are two different ways of design flow which we use to make ui
in application, these are:

Design Flow is basically a graphical representation of the flow of data through

an information system. DF can also be used for the visualization of data
processing.
The data flow diagram is a graphical description of a system’s data and how to
process transform the data is known as Design Flow.
BUSINESS TECHNOLOGY

NEWS
HEALTH ONLINE SCIENCE

ENTERTAINMENT SPORTS
Code of the Project
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/[Link]" />
<meta name="viewport" content="width=device-width,
initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description"
content="NewsOnline is a news app which can be
used to grab daily news, If you are interested in
news, weather forecast, etc then newsmonkey is for
you! " />
<link rel="apple-touch-icon"
href="%PUBLIC_URL%/[Link]" />
<link rel="manifest"href="%PUBLIC_URL%/[Link]"
/>
<link
href="[Link]
t/css/[Link]" rel="stylesheet"
integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqy
l2QvZ6jIW3" crossorigin="anonymous">
<title>NewsOnline - Get your daily dose of news
for free</title>
</head>
<body>
<noscript>You need to enable JavaScript to run
this app.</noscript>
<div id="root"></div>
 <script
src="[Link]
2/dist/umd/[Link]" integrity="sha384-
7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrP
a03rtR1zdB" crossorigin="anonymous"></script>
<script
src="[Link]
/js/[Link]" integrity="sha384-
QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl
5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>
[Link]
import React from 'react';
import ReactDOM from 'react-dom';
import './[Link]';
import App from './App';
import reportWebVitals from './reportWebVitals';
[Link](
<[Link]>
<App />
</[Link]>,
[Link]('root')
);
reportWebVitals();
[Link]
import './[Link]';
import React, {useState } from 'react'
import Navbar from './components/Navbar';
import News from './components/News';
import{BrowserRouter as Router, Routes, Route} from
"react-router-dom"
import LoadingBar from 'react-top-loading-bar';
const App = () => {
const pageSize= 5;
const apiKey = [Link].REACT_APP_NEWS_API
const[progress, setProgress] = useState(0)
return (
<div>
<Router>
<Navbar/>
<LoadingBar color='#f11946' progress={progress}/>
<Routes>
<Route exact path="/" element={<News
setProgress= {setProgress} apiKey={apiKey}
key="general" pageSize={pageSize} country="in"
category= "general"/>} />
<Route exact path="/business" element={<News
setProgress= {setProgress} apiKey={apiKey}
key="business" pageSize={pageSize} country="in"
category= "business"/>} />
<Route exact path="/entertainment"
element={<News setProgress= {setProgress}
apiKey={apiKey} key="entertainment"
pageSize={pageSize} country="in" category=
"entertainment"/>} />
<Route exact path="/general" element={<News
setProgress= {setProgress} apiKey={apiKey}
key="general" pageSize={pageSize} country="in"
category= "general"/>} />
<Route exact path="/health" element={<News
setProgress= {setProgress} apiKey={apiKey}
key="health" pageSize={pageSize} country="in"
category= "health"/>} />
<Route exact path="/science" element={<News
setProgress= {setProgress} apiKey={apiKey}
key="technology" pageSize={pageSize} country="in"
category= "science"/>} />
<Route exact path="/sports" element={<News
setProgress= {setProgress} apiKey={apiKey}
key="sports" pageSize={pageSize} country="in"
category= "sports"/>} />
<Route exact path="/technology"
element={<News setProgress= {setProgress}
apiKey={apiKey} key="technology" pageSize={pageSize}
country="in" category= "technology"/>} />
</Routes>
</Router>
</div>
)
}
export default App;
[Link]
import React from 'react'
import{Link} from "react-router-dom"
const Navbar = ()=> {
return (
<div>
<nav className="navbar fixed-top
navbar-expand-lg navbar-dark bg-dark">
<div className="container-fluid">
<Link className="navbar-brand"
to="/">NewsOnline</Link>
<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" id="navbarSupportedContent">
<ul className="navbar-nav me-
auto mb-2 mb-lg-0">
<li className="nav-item">
<Link className="nav-link"
aria-current="page" to="/">Home</Link> </li>
<li className="nav-item">
<Link className="nav-link"
to="/business">Business</Link></li>
<li className="nav-item">
<Link className="nav-link"
to="/entertainment">Entertainment</Link></li>
<li className="nav-item">
<Link className="nav-link"
to="/general">General</Link></li>
<li className="nav-item">
<Link className="nav-link"
to="/health">Health</Link></li>
<li className="nav-item">
<Link className="nav-link"
to="/science">Science</Link></li>
<li className="nav-item">
<Link className="nav-link"
to="/sports">Sports</Link></li>
<li className="nav-item">
<Link className="nav-link"
to="/technology">Technology</Link></li>
</ul>
</div>
</div>
</nav>
</div>
 )
}
export default Navbar

[Link]
import React, { useEffect, useState } from "react";
import Newsitem from "./Newsitem";
import Spinner from "./Spinner";
import PropTypes from "prop-types";
import InfiniteScroll from "react-infinite-scroll-
component";
const News = (props) => {
const[articles, setArticles] = useState([])
const[loading, setLoading] = useState(true)
const[page, setPage] = useState(1)
const[totalResults, setTotalResults] = useState(0)
const capitalizeFirstLetter = (string) => {
return [Link](0).toUpperCase() +
[Link](1);
};
const updateNews = async() => {
[Link](10);
const url = `[Link]
headlines?country=${[Link]}&category=${[Link]
tegory}&apiKey=${[Link]}&page=${page}&pageSize=$
{[Link]}`;
setLoading(true)
let data = await fetch(url);
[Link](30);
let parsedData = await [Link]();
[Link](70);
setArticles([Link])
setTotalResults([Link])
setLoading(false)
 const FetchMoreData = async () => {
const url = `[Link]
headlines?country=${[Link]}&category=${[Link]}&api
Key=${[Link]}&page=${page+1}&pageSize=${[Link]}`;
setPage(page+1)
let data = await fetch(url);
let parsedData = await [Link]();
setArticles([Link]([Link]))
setTotalResults([Link])
};

return (
<>
<h1 className="text-center" style={{margin:"35px 0px",
marginTop: "90px"}}>
NewsOnline - Top
{capitalizeFirstLetter([Link])} Headlines </h1>
{loading && <Spinner />}
<InfiniteScroll
dataLength={[Link]}
next={FetchMoreData}
hasMore={[Link] !== totalResults}
loader={<Spinner />}
>
<div className="container">
<div className="row">
{[Link]((element) => {
return (
<div className="col-md-4" key={[Link]}>
<Newsitem
title={[Link] ?
[Link](0, 45) : ""}
description={
[Link]
? [Link](0, 88)
: ""
 }
imageUrl={[Link]}
newsUrl={[Link]}
author={[Link]}
date={[Link]}
source={[Link]}
/>
</div>
);
})}
</div>
</div>
</InfiniteScroll>
);

[Link] = {
country: "in",
pageSize: 8,
category: "general",
};

[Link] = {
country: [Link],
pageSize: [Link],
category: [Link],
};

export default News;

return (
<>
<h1 className="text-center" style={{margin:"35px 0px",
marginTop: "90px"}}>
 NewsOnline - Top
{capitalizeFirstLetter([Link])} Headlines </h1>
{loading && <Spinner />}
<InfiniteScroll
dataLength={[Link]}
next={FetchMoreData}
hasMore={[Link] !== totalResults}
loader={<Spinner />}
>
<div className="container">
<div className="row">
{[Link]((element) => {
return (
<div className="col-md-4" key={[Link]}>
<Newsitem
title={[Link] ?
[Link](0, 45) : ""}
import React, { useEffect, useState } from "react";
import Newsitem from "./Newsitem";
import Spinner from "./Spinner";
import PropTypes from "prop-types";
import InfiniteScroll from "react-infinite-scroll-component";

const News = (props) => {

const[articles, setArticles] = useState([])
const[loading, setLoading] = useState(true)
const[page, setPage] = useState(1)
const[totalResults, setTotalResults] = useState(0)

const capitalizeFirstLetter = (string) => {

return [Link](0).toUpperCase() + [Link](1);
};

const updateNews = async() => {

[Link](10);
 const url = `[Link]
headlines?country=${[Link]}&category=${[Link]}&api
Key=${[Link]}&page=${page}&pageSize=${[Link]}`;
setLoading(true)
let data = await fetch(url);
[Link](30);
let parsedData = await [Link]();
[Link](70);
setArticles([Link])
setTotalResults([Link])
setLoading(false)
[Link](100);
}

useEffect(() => {
[Link] = `${capitalizeFirstLetter([Link])} -
NewsMonkey `;
updateNews();
// eslint-disable-next-line
}, [])

// const handlePrevClick = async ()=>{

// setPage(page-1)
// updateNews();
// }

// const handleNextClick = async ()=>{

// setPage(page+1)
// updateNews();
// }

const FetchMoreData = async () => {

const url = `[Link]
headlines?country=${[Link]}&category=${[Link]}&api
Key=${[Link]}&page=${page+1}&pageSize=${[Link]}`;
setPage(page+1)
let data = await fetch(url);
 let parsedData = await [Link]();
setArticles([Link]([Link]))
setTotalResults([Link])
};

return (
<>
<h1 className="text-center" style={{margin:"35px 0px",
marginTop: "90px"}}>
NewsOnline - Top
{capitalizeFirstLetter([Link])} Headlines </h1>
{loading && <Spinner />}
<InfiniteScroll
dataLength={[Link]}
next={FetchMoreData}
hasMore={[Link] !== totalResults}
loader={<Spinner />}
>
<div className="container">
<div className="row">
{[Link]((element) => {
return (
<div className="col-md-4" key={[Link]}>
<Newsitem
title={[Link] ?
[Link](0, 45) : ""}
description={
[Link]
? [Link](0, 88)
: ""
}
imageUrl={[Link]}
newsUrl={[Link]}
author={[Link]}
date={[Link]}
source={[Link]}
/>
 </div>
);
})}
</div>
</div>
</InfiniteScroll>
{/* <div className="container d-flex justify-content-
between">
<button disabled={page<=1} type="button"
className="btn btn-dark" onClick={handlePrevClick}> &larr;
Previous</button>
<button disabled ={page + 1 >
[Link](totalResults/[Link])}type="button"
className="btn btn-dark" onClick={handleNextClick}>Next
&rarr;</button>
</div> */}
</>
);

[Link] = {
country: "in",
pageSize: 8,
category: "general",
};

[Link] = {
country: [Link],
pageSize: [Link],
category: [Link],
};

export default News;

description={
 [Link]
? [Link](0, 88)
: ""
}
imageUrl={[Link]}
newsUrl={[Link]}
author={[Link]}
date={[Link]}
source={[Link]}
/>
</div>
);
})}
</div>
</div>
</InfiniteScroll>
{/* <div className="container d-flex justify-content-
between">
<button disabled={page<=1} type="button"
className="btn btn-dark" onClick={handlePrevClick}> &larr;
Previous</button>
<button disabled ={page + 1 >
[Link](totalResults/[Link])}type="button"
className="btn btn-dark" onClick={handleNextClick}>Next
&rarr;</button>
</div> */}
</>
);

}
import React, { useEffect, useState } from "react";
import Newsitem from "./Newsitem";
import Spinner from "./Spinner";
import PropTypes from "prop-types";
import InfiniteScroll from "react-infinite-scroll-component";

const News = (props) => {

 const[articles, setArticles] = useState([])
const[loading, setLoading] = useState(true)
const[page, setPage] = useState(1)
const[totalResults, setTotalResults] = useState(0)

const capitalizeFirstLetter = (string) => {

return [Link](0).toUpperCase() + [Link](1);
};

const updateNews = async() => {

[Link](10);
const url = `[Link]
headlines?country=${[Link]}&category=${[Link]}&api
Key=${[Link]}&page=${page}&pageSize=${[Link]}`;
setLoading(true)
let data = await fetch(url);
[Link](30);
let parsedData = await [Link]();
[Link](70);
setArticles([Link])
setTotalResults([Link])
setLoading(false)
[Link](100);
}

useEffect(() => {
[Link] = `${capitalizeFirstLetter([Link])} -
NewsMonkey `;
updateNews();
// eslint-disable-next-line
}, [])

// const handlePrevClick = async ()=>{

// setPage(page-1)
// updateNews();
// }
 // const handleNextClick = async ()=>{
// setPage(page+1)
// updateNews();
// }

const FetchMoreData = async () => {

const url = `[Link]
headlines?country=${[Link]}&category=${[Link]}&api
Key=${[Link]}&page=${page+1}&pageSize=${[Link]}`;
setPage(page+1)
let data = await fetch(url);
let parsedData = await [Link]();
setArticles([Link]([Link]))
setTotalResults([Link])
};

return (
<>
<h1 className="text-center" style={{margin:"35px 0px",
marginTop: "90px"}}>
NewsOnline - Top
{capitalizeFirstLetter([Link])} Headlines </h1>
{loading && <Spinner />}
<InfiniteScroll
dataLength={[Link]}
next={FetchMoreData}
hasMore={[Link] !== totalResults}
loader={<Spinner />}
>
<div className="container">
<div className="row">
{[Link]((element) => {
return (
<div className="col-md-4" key={[Link]}>
<Newsitem
title={[Link] ?
[Link](0, 45) : ""}
 description={
[Link]
? [Link](0, 88)
: ""
}
imageUrl={[Link]}
newsUrl={[Link]}
author={[Link]}
date={[Link]}
source={[Link]}
/>
</div>
);
})}
</div>
</div>
</InfiniteScroll>
{/* <div className="container d-flex justify-content-
between">
<button disabled={page<=1} type="button"
className="btn btn-dark" onClick={handlePrevClick}> &larr;
Previous</button>
<button disabled ={page + 1 >
[Link](totalResults/[Link])}type="button"
className="btn btn-dark" onClick={handleNextClick}>Next
&rarr;</button>
</div> */}
</>
);

[Link] = {
country: "in",
pageSize: 8,
category: "general",
};
[Link] = {
country: [Link],
pageSize: [Link],
category: [Link],
};

export default News;

[Link] = {
country: "in",
pageSize: 8,
category: "general",
};

[Link] = {
country: [Link],
pageSize: [Link],
category: [Link],
};

export default News;

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

import Newsitem from "./Newsitem";
import Spinner from "./Spinner";
import PropTypes from "prop-types";
import InfiniteScroll from "react-infinite-scroll-component";

const News = (props) => {

const[articles, setArticles] = useState([])
const[loading, setLoading] = useState(true)
const[page, setPage] = useState(1)
const[totalResults, setTotalResults] = useState(0)
 const capitalizeFirstLetter = (string) => {
return [Link](0).toUpperCase() + [Link](1);
};

const updateNews = async() => {

[Link](10);
const url = `[Link]
headlines?country=${[Link]}&category=${[Link]}&api
Key=${[Link]}&page=${page}&pageSize=${[Link]}`;
setLoading(true)
let data = await fetch(url);
return (
<>
<h1 className="text-center" style={{margin:"35px 0px",
marginTop: "90px"}}>
NewsOnline - Top
{capitalizeFirstLetter([Link])} Headlines </h1>
{loading && <Spinner />}
<InfiniteScroll
dataLength={[Link]}
next={FetchMoreData}
hasMore={[Link] !== totalResults}
loader={<Spinner />}
>
<div className="container">
<div className="row">
{[Link]((element) => {
return (
<div className="col-md-4" key={[Link]}>
<Newsitem
title={[Link] ?
[Link](0, 45) : ""}
description={
[Link]
? [Link](0, 88)
: ""
}
[Link]
import React from "react";
const Newsitem = (props) => {
let { title, description, imageUrl, newsUrl,
author, date, source } = props;
return (
<div className="my-3">
<div className="card">
<div
style={{
display: "flex",
justifyContent: "flex-end",
position: "absolute", right: "0",}}>
span className="badge rounded-pill bg-
danger">{source}</span>
</div>
<img src={ !imageUrl ? "Image Not Available"
: imageUrl } className="card-img-top"
alt="..." />
<div className="card-body">
<h5 className="card-title">
{title}...<span className="badge bg-
secondary">New</span>
</h5>
[Link]
import React from 'react'
import loading from './[Link]'
const Spinner = () => {
return (
<div className="text-center">
<img className= "my-3"src={loading}
alt="loading" />
</div>
)}
export default Spinner
 Chapter – 4
RESULTS ANALYSIS AND VALIDATION
In this chapter, we will discuss about the result analysis and validation of the
project and how the project is working with the help of screenshots of the
project.

Screenshots of the project

HOME

BUSINESS
ENTERTAINMENT

HEALTH
SCIENCE

SPORTS
TECHNOLOGY
 Chapter - 5

CONCLUSION AND FUTURE WORK

5.1. Conclusion
In conclusion, News Online, our News website, is poised to offer a user-friendly
platform for reading news daily. The expected results and outcomes of this
project are as follows:
Expected Results/Outcomes:
Enhanced User Experience: We anticipate a streamlined and user-centric
booking process, leading to increased user satisfaction and a higher conversion
rate.
Increased User Engagement: Through a user-friendly interface and effective
communication tools, we aim to foster user engagement, encouraging reviews
and repeat bookings.
Market Competitiveness: By aligning with industry best practices and
regulations, we expect Room Rover to be competitive in the accommodation
booking market.
Scalability: The platform is designed to handle a growing user base and
accommodate an increasing number of property listings.
Valuable Data Insights: With data analysis tools in place, we anticipate
valuable insights into user behaviour and market trends, helping us make data-
driven decisions.

Deviation from Expected Results and Reasons:

User Adoption: If initial user adoption is slower than expected, it may be due
to fierce competition in the market or a need for more aggressive marketing
efforts. Adjusting the marketing strategy may be required.
Technical Challenges: Deviations may occur if technical challenges arise
during development. We are prepared to address these by seeking expert advice
and applying effective solutions to ensure a smooth implementation process.
Regulatory Changes: Any significant changes in regulations may impact the
expected results. We will remain vigilant and adapt Room Rover to comply with
any new legal requirements.
User Feedback: User feedback may differ from initial expectations,
highlighting areas for improvement. We are committed to addressing user
 concerns and continuously enhancing the platform based on feedback.
Room Rover's success will depend on our ability to adapt to changing
conditions, user preferences, and market dynamics, ensuring that the platform
remains competitive and valuable to our users.

5.2. Future work

Future Work:
Looking ahead, there are several areas of focus and potential enhancements for
News online our news reading website:
Enhanced Mobile Experience: As mobile usage continues to grow, optimizing
the platform for mobile devices and potentially developing a dedicated mobile
app should be considered.
International Expansion: Expanding Room Rover to serve a global audience,
including support for multiple languages and currencies, can open up new
markets and opportunities.
Integration with Emerging Technologies: Incorporating emerging
technologies like augmented reality (AR) for virtual property tours and chatbots
for improved customer support can enhance user engagement.
Personalization and Recommendation Systems: Implementing AI-driven
recommendation engines can provide users with tailored property suggestions
based on their preferences and previous bookings.
Blockchain for Trust and Transparency: Utilizing blockchain technology for
transparent reviews and trust-building mechanisms can address concerns related
to fraudulent listings and fake reviews.
User Community and Social Features: Building a user community and
integrating social features can foster a sense of belonging and user loyalty.
Business Expansion: Exploring opportunities to expand beyond
accommodations, such as adding video news and many more, could diversify
News online’s services.
Feedback-Driven Iteration: Continuously collecting and acting on user
feedback to refine and improve the platform is crucial for long-term success.
In the future, we plan to prioritize adaptability, innovation, and responsiveness
to market trends, ensuring that
News online remains a competitive and user-centric platform in the ever-
evolving hospitality industry.
 REFERENCES
1. Youtube
2. StackOverflow
3. [Link]
4. [Link]