Professional Documents
Culture Documents
Chinka Praveen
Chinka Praveen
Chinka Praveen
INTERNSHIP REPORT
On
DATA SCIENCE
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
CHINKA PRAVEEN
(20AJ1A0426)
i
CERTIFICATE
This is to certify that the internship report entitled “ DATA SCIENCE ” that is
being submitted by CHINKA PRAVEEN (20AJ1A0426) 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
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.
CHINKA PRAVEEN
(20AJ1A0426)
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.
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
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
vi
CHAPTER 4
API INTEGRATION 12
CHAPTER 5
ANALYSIS 16
CHAPTER 6
SOFTWARE SPECIFICATIONS 23
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.
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.
1
application, such as trending news, top stories, and category-specific articles,
enhancing the overall browsing experience.
Applications:
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:
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.
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.
7
3. 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.
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.
3.3 React.JS
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:
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
11
4. API INTEGRATION
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:
13
e-commerce businesses can automate processes, reduce manual effort, and provide a
smoother shopping experience for customers.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
22
6. SOFTWARE REQUIREMENTS SPECIFICATIONS
Google Meet for communication and coordination within our project team.
Backup Project Data and code to prevent data loss using cloud store.
23
7. CODING
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";
}
};
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";
27
// Add more countries as needed
],
selectedCountry: "Select Country",
mode: "danger",
};
}
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";
30
totalresults: 0,
carouselImages: [], // Store images for carousel
};
this.fetchNewsDebounced = _.debounce(this.fetchNews, 300); // debounce
fetchNews function
}
async componentDidMount() {
await this.fetchNews();
}
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);
};
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>
<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
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