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.
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!
Relevant Courses
Use the following content to review prerequisites or explore specific concepts in detail.