Major Project Report

On Topic:

Live-news by Newspuppet
website.
Using Reactjs and vanilla js with api

MCA 2nd SEMESTER

 Index

1. Abstract
2. Aim
3. Introduction
4. Dependencies
5. Tools & Software Used
6. Project Structure
7. Project Workflow
8. Conclusion
 CANDIDATE’S DECLARATION

I hereby declare that the work which is being presented in

this report titled “Project Report on NEWS WEBSITE” in
partial fulfilment of the requirements for the award of MCA
Degree of and submitted to Department of computer
application, Suresh Gyan Vihar University Jaipur is an
authentic record of my own work carried out by me during
the period of 3 months under the guidance and
supervision of Mr. Anil Pal.

The matter presented in this report embodies the results

of my own work and has not been submitted anywhere
else for award of any other qualification. This is to certify
that the above statement made by me is correct to the
best of my knowledge and belief.

Vidhi jain - 100063

 Acknowledgement

First and foremost, I would like to express my deepest

gratitude to Suresh Gyan Vihar University, Jaipur for
giving me an opportunity to work under the guidance of
learned faculty members. I am really thankful for their
strong commitment to keep in touch despite of their busy
schedule, and also for the time spent during the
discussion. I express my gratitude to Mr. Anil Pal for
their external support and guidance throughout the
project. I would like to convey my thanks to the
university personnel for helping me in gathering data
and also giving me a better understanding of the current
situation of the IT infrastructure. Above all, I would like to
thank God, my family and friends who have supported
me throughout the duration of the project and allowed
me to focus my attention on completing this project.
 AIM

To make a Fully Responsive platform where we get

current news updates along with the source of the news
and a single click on “Read more” button will direct you
to a different page having a complete content of that
news.

To achieve the result HTML, CSS, JavaScript with its

libraries are used.
Java Script Libraries:
• React.js

This website will deal with a complete live news panel

where user can sort the news category by switching the
tab like from “General” to “Sports”.
 MAJOR PROJECT REPORT
MCA 2nd SEM.

News-Puppet Website
By
Vidhi jain – 100063

Abstract:

React is a JavaScript library used to build user

interfaces on the frontend. An open-source project
originally created by Facebook, it’s one of the most
popular JavaScript libraries. The project aims to provide
broad compatibility with React alternatives, but will
continue to evolve with React as APIs

1. Introduction

React was primarily used to render views in web or

mobile applications. It allowed developers to create
reusable components that are independent of each
other. So when any critical feature of a web
application broke, they were still better off with the
remaining elements. Also, React brought this fantastic
feature called Virtual DOM that enabled developers to
 implement SSR without needing to update the whole
view each time during an update.

The rest of the paper has the following organization.

React is introduced and using it to develop a web
application which can run on any platform just using a
single codebase with detailed modules and libraries.
Conclusion and future scope are outlined.

This Project is built with the use of React.JS Library

and using news API for Frontend work.

2. Project Dependencies:

This Project required some dependencies or the

modules which helped in building the project. They
are mentioned below:
“Package.json”: “Version”
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
"@material-ui/core": "^4.12.4",
"@mui/material": "^5.9.1",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.1.1",
"@testing-library/user-event": "^13.5.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-infinite-scroll-component": "^6.1.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"react-tabs": "^5.1.0",
"web-vitals": "^2.1.4"
3. Libraries :

▪ React JS :
React is a JavaScript library used to build
user interfaces on the frontend. An open-
source project originally created by
Facebook, it’s one of the most popular
JavaScript libraries, with over 180,000
stars on Github. The goal of React is to
allow developers to quickly build out their
interfaces.

To explain all about React.js, we’ll start by

introducing JavaScript libraries
themselves. Next, we’ll learn more about
React by exploring what it was designed
as a solution to, and its major features. Of
these features, one of the most important
ones is components. These are custom,
reusable features which resemble HTML-
like elements. Using state and props,
React organizes how data is stored and
handled in your application.
 4. Project Structure :

Navbar Component:
It consists of 8 tabs from which user can choose a
category of news to render.
News Component:
It consists of multiple single News Item component
which renders a single new on a single card.
 1. Project Workflow:

Home page:
On switching the tab from Home to business app
renders the business news only
Similarly by switching the tabs the app will sort the news
accordingly as like switching the tab from “business” to
“sports” .

The app contains two buttons at its footer “previous” and

“next” which helps to navigate through number of news
category wise.
The “Read more” button on a single NewsItem will direct
to a page showing a complete content regarding to that
particular news.

And with that this app shows the source of news like the
above news is taken from the NDTV NEWS
“Read more” will direct to the following page:
6.Conclusion:

By this Project we had successfully built a fully

responsive dynamic website with proper
workflow.
To make it a single page application , I used
ReactJS which helps to minimise lines of code and
increase the reusability of code
Also to show the live news I used the news API
which helps me to render the current news
With that I used basic HTML and CSS concepts to
finish the work.
At last I committed my project code to GitHub

A Special Thanks to Mr. Anil Pal sir for Guiding us

throughout the project.