News Explorer Project

In this project, you'll build an application that displays all the news items in one single webpage. You'll add features for sorting and filtering the news items. To get started, please scroll down and look at the tasks listed below.

  • Resources: neetoCode with the news data set

  • Things you need to know: Searching/Filtering/Sorting elements in an array. Flexbox, Grid, Semantic HTML and creating front-end using data.

Max Chat

Task 1

Implement News Card Layout
  • Create a card layout as per the wireframe design given below and populate the data with the news data set given as resources

  • Display a grid of 7 sample news cards on the dashboard.

Task 2

Implement "Show More" Functionality for News Articles
  • Make sure that only 7 news articles are visible at any given time.

  • Upon clicking the "Show More" button, reveal all available news articles for the user to browse through.

Task 3

Implement Debounced Search Functionality
  • A debounced search is a technique used to improve the performance of search functionality by delaying the execution of the search operation until a specified amount of time has passed since the last user input.

  • By delaying the search operation until the user has finished typing or has paused for a specified duration, we can prevent unnecessary filtering and rendering of data.

  • You should also highlight the searched word in the results in a different color of your choice as shown in the wireframe.

Task 4

Implement Filter Functionality by Tags
  • By default, the "All" tag is selected, displaying news from all categories.

  • Upon selecting a tag, it should be highlighted, and the dashboard updates with news from that category.

  • Users can select multiple tags simultaneously.

  • If "All" is selected, all other tags should be unchecked.

Task 5

Implement Sorting Functionality for News Articles
  • Make sure all displayed news articles are sorted with the latest news appearing first.

More Projects

These are some of the other projects you can build.