This device is not compatible.

PROJECT


Create a News Portal Analytics App in React

In this project, we'll learn how to build a news portal with analytics by using the News API. We’ll ask about user preferences regarding the date, country, and news categories, and then display the filtered news articles on the portal.

Create a News Portal Analytics App in React

You will learn to:

Use the functional components of React.

Integrate APIs with a React application.

Use React Hooks to develop the application.

Display the fetched data from the API to the React application.

Skills

Web Development

React Components

API Integration

Prerequisites

Good understanding of JavaScript

Basic knowledge of Node.js and Express

Basic understanding of fetching data in React

Technologies

React

Express

Javascript

Project Description

In this project, we’ll build a news portal with analytics where a user can filter news based on date, country, and category. To do that, we’ll use the News API, which enables us to fetch generic news from the internet. We can also get news about a specific topic.

We’ll use the Express framework on Node.js to develop the server API. After implementing the front-end components and adding the filter functionalities, we’ll set up a server to process the requests. The finalized product will fetch news from the News API, allowing users to see different news stories, filter news based on certain filters, and follow up on each trending news story.

The components in the application are styled to provide an initial template of the application. It’s possible to style and customize them according to our own preferences.

Project Tasks

1

Introduction

Task 0: Getting Started

Task 1: Get and Add the API Key

Task 2: Set up a Node.js Server

2

Fetch and Display News Articles

Task 3: Create News Filters

Task 4: Create Request URLs

Task 5: Fetch News from the API

Task 6: Display the News Articles

Task 7: Render News Data in Card

3

Display Followed and Related News Articles

Task 8: Follow and Unfollow a News Article

Task 9: Show Followed News

Task 10: List Related News

Congratulations!