Scribd
Upload
19 views

Frontend LP Task 3

Uploaded by

Anish Jaiswal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
19 views

Frontend LP Task 3

Uploaded by

Anish Jaiswal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

Frontend LP Task 3

Objective: Learn functional React, hooks, React Router and Material UI.
Task: Third task of your learning period involves creating an e-reporting/media platform
using functional React. You need to fetch news data using axios and async-await over
callbacks. These news data you need to display on your application using Material UI Cards
and use Grids for responsive layout of the cards. Use Pagination to display 10-15 news cards
on each page, if possible, try to implement your own pagination or use Material UI.
We shall start using React Router, the home page should have all news cards in grid layout,
on clicking on a card the user is directed to another route with a custom news slug in the url.
On this page show all news specific details.
You can also create filters to display news from a certain date, etc.
Make sure you reach these checkpoints during the course of making this web application:
• GET news data - NewsAPI
• Use axios and async-await - Axios,
• Styling with Material UI Cards, Grid and Pagination - Material UI documentation
• Create a home page route and a dynamic individual news routes - React Router
• Deploy your application using Netlify - Netlify
Deadline: 13th October
Additional Resources:
React –
• React Crash Course (freeCodeCamp)
• Learn React (scrimba)
• ReactJS Tutorial for Beginners
• React Hooks Tutorial
• Create React App
Material UI –
• Material UI playlist
Axios –
• Making Asynchronous HTTP Requests in JavaScript with Axios

You might also like