Engineering
 Challenge

Creating a web-based news feed

Submitted by 
Cuperre
, 
August 4, 2023
Requirements
Read challenge brief
Allow users to search for articles related to a specific topic
Hired through SkillsRobin
Show a feed of recent news articles
Hired through SkillsRobin
Description
Code
Demo

What I Built

This is a news web application that allows users to view news and search for news articles relating to a topic they are interested in. Additionally, every thirty seconds the page is updated to search for articles relating to the topic entered by the user to ensure they view the latest news.

How I Built It

This was built using

Here's the code sample of all news articles the user searched passed as a prop to be rendered onto the page

return ( <div className="all-news"> {allNews && allNews.length > 0 ? ( allNews.map((news) => { return <div className="news-block" key={news.url}> <div className='split-left'> <p>{news.source.name}</p> <p>{howLongAgo(news.publishedAt)}</p> {news.urlToImage != null ? (<a href={news.url}><img className='news-img' src={news.urlToImage}></img></a>) : (<div></div>)} </div> <div className='split-right'> <a href={news.url}><h3>{news.title}</h3></a> <p>{news.description}</p> </div> </div> }) ) : ( <h1>No news related to your searched topic.</h1> )} </div>
)
export default NewsContents;

Why I Built It This Way

My approach to this was to view it as a website that retrieved news articles via a public API and displayed the main content of the articles for the users. This way I can focus purely on retrieving the news articles relevant to the users' searched topic and display them in a suitable manner. The website layout was designed this way to be simple and was inspired by other well-known news websites where they showed only the important information for the news articles such as name, title, description and image. If they wished to read more they would be able to click on it to view the full article on the same website however for my implementation if they wished to read more about the news article they would click on the article where they will be redirected to the actual article itself. This way it also provides credit to the website that published the article themselves.

The News API was used as it was free for up to 100 API calls every 24 hours. If I wish to make more API calls I can pay a fee or subscription which makes this web application scalable as well.

Additionally, in my code solution, I had the NEWS_API key be in a .env file which was included inside the .gitignore file so it wouldn't be pushed onto the repository. This provides a layer of security so that if the source code was accessed or viewed by someone who didn't have permission to it they won't be able to abuse the number of API calls as they would need their own API key.

Axios request with API key retrieved from .env file

axios .get(`https://newsapi.org/v2/everything?q=${topic}&from=${yesterdaysDate}&sortBy=recent&apiKey=${process.env.REACT_APP_NEWS_API_KEY}`) .then((res) => { setNewsContent(res.data.articles); }) .catch((err) => console.log(err));

What Would I Do Differently

What would you do to improve or extend your solution

While the current implementation fulfils the requirements, there are several future enhancements that could be made to improve my solution. Here are just a few possible enhancements:

  1. User Authentication and Personalization: Allowing users to create an account to personalise their news feed. This could enable saving favourite topics, setting preferences, and receiving tailored recommendations based on their interests.
  2. Search Filters and Advanced Sorting: Adding filters so users can narrow down results by date range, news sources, or categories. Additionally, implementing more sorting options, such as sorting by relevance or popularity, improves the user experience.
  3. Multilingual Support: Provide multilingual support to cater to a broader audience by translating news articles into different languages or allowing users to specify their preferred language for the content display.
  4. Different API: Use a different news API that adds news articles more regularly than the current one used to get more up-to-date news.
  5. Adding Routes: Having multiple routes for web applications is a standard practice that provides multiple advantages. Includes improved user experience, modularity and code organisation, SEO and accessibility, better performance and many more.

‍

Interactive demo

Recorded Demo

Challenge completed by:
Junior software developer looking to leverage my strong problem-solving skills, coding proficiency in various languages, and passion for new technologies.
Actively looking
Looking for sidehustle
$
80000
 /year
$
 /hour
Based in: 
Sydney
SkillsRobinID: 
Cuperre
View profile
Connect
Get their LinkedIn profile, real name, contact details and portfolio on connection
Submissions from other candidates
Engineering

Creating a web-based news feed

closed 
due 
August 25, 2023

Requirements

  • Show a feed of recent news articles
  • Allow users to search for articles related to a specific topic

Brief

In today’s world it can be difficult to filter through the news to find things you’re interested in.

We want you to build an application or service that allows users to enter a news topic they want to hear about. The application provides them with recent news stories about that topic, and updates them on new stories as they’re released.

They could view these stories on a webpage, or receive updates through email or another channel (and unsubscribe if they wish). Perhaps they can filter the news sources they wish to receive updates from. You can decide how users receive these news stories, and what they can do with it.

You can choose which programming languages and/or frameworks to use based on your expertise and chosen approach. Our advice is to complete this task in a way which shows your strengths.

Submission Criteria

Your submission should have 3 parts:

  1. Your code
  2. An audioless screen recording of your solution in action
  3. A written summary of what you have created detailing:
  • What your solution is and what it does
  • How did you build your solution?
  • Why did you build it that way?
  • What would you do to improve or extend your solution
Close