Engineering
 Challenge

Creating a web-based news feed

Submitted by 
July 11, 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

What I Built

A search aggregator that retrieves news articles based on user-selected topics. The solution is web-based, responsive to various screen sizes, and displays the search results sorted by the time of release, ensuring that the latest new is always presented.

How I Built It

HTML, CSS, and JavaScript were utilised to provide the structure, styling, and interactivity for the static webpage.

jQuery: to simplify DOM manipulation and AJAX requests.

News API: to fetch news articles based on user-selected topics.

const API_KEY = "34ffe08a39904daba6baf72d27635bf2";
const URL = "https://newsapi.org/v2/everything?language=en&q=";
...
var result = await fetch(`${URL}${query}&sortBy=publishedAt&apiKey=${API_KEY}`);

Why I Built It This Way

I chose to build a static webpage without a backend server or database to keep the development process simple and efficient, considering the time constraints of this coding challenge.

The solution provides popular topics for users to choose from, allowing them to explore widely discussed subjects. Additionally, users can search for specific topics they are interested in. The articles are sorted based on their published date to ensure that the latest news stories are always displayed first.

To optimise the performance and avoid overwhelming the user with a large number of articles, I implemented pagination. The solution displays 15 articles at a time, and more articles are loaded as the user scrolls to the bottom of the page.

By adjusting the header and number of columns displayed on the screen, as well as implementing flexbox, it is responsive to different screen sizes, allowing users to access it from both desktops and mobile devices.

What Would I Do Differently

More efficient searching experience:

Provide auto-complete for the search bar so that the users could find relevant topics more efficiently. Implement search filters allowing the users to select date ranges, sources, or sorting orders to refine the search results.

User authentication and customisation:

By incorporating a database to store authentication information as well as each user's preferences such as their favourite news sources and interested topics, the website could potentially provide personalised recommendations.

Interactive demo

Recorded Demo

Challenge completed by:
Junior UX designer with front-end experience.
Actively looking
Looking for sidehustle
$
75000
 /year
$
40
 /hour
Based in: 
Sydney
SkillsRobinID: 
Grantry
View profile
Connect
Get their LinkedIn profile, real name, contact details and portfolio on connection
Submissions from other candidates