web development news API full-stack

News Headlines Hub

Implement a web application for displaying news headlines from different sources.

โฑ๏ธ Time Breakdown

๐Ÿ“‹
Planning
~1 hours
๐Ÿ’ป
Coding
~2 hours
๐Ÿงช
Testing
~1 hours

๐Ÿ“Š Difficulty

easy

๐ŸŽ“ Learning Outcomes

  • โ€ข Working with REST APIs
  • โ€ข Managing application state
  • โ€ข Creating responsive layouts

News Headlines Hub

Are you interested in staying up-to-date with the latest news from a variety of sources? This project is perfect for you! In this project, you will implement a web application for displaying news headlines from different sources using a news API.

Users will be able to view the top headlines from a selection of news sources, filter news by category and search for specific keywords. The application will display the headline, a brief summary, and a link to the full article.

Project Checklist

  • Integrate a news API to fetch news headlines
  • Create a simple front-end using HTML, CSS and JavaScript
  • Build a server-side application using Node.js and Express
  • Implement a feature to filter news by category
  • Add a search feature to search for specific keywords
  • Display the news headlines, summary and link to the full article

Bonus Project Checklist Items

  • Implement a feature to allow users to select their preferred news sources
  • Add a feature to save articles for later reading
  • Implement a feature to share articles on social media

Inspiration (Any companies/libraries similar)

  • NewsAPI.org
  • Google News
  • BBC News

Hint/Code snippet to start

// Example code for fetching news headlines using Node.js and Express
app.get('/headlines', (req, res) => {
    const {category, keyword} = req.query;
    axios.get(`https://news-api.com/v2/top-headlines?category=${category}&q=${keyword}&apiKey=YOUR_API_KEY`)
        .then(response => res.json(response.data))
        .catch(err => res.status(400).json(err))
});

This code snippet is an example of how to use the GET method to fetch news headlines using category and keyword as parameters, and an API key, and then returning the data in JSON format.

โ˜ฐ

Project Requirements

Progress Tracker 0 of 7 completed

Share Project