Engineering
 Challenge

Creating a web-based news feed

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

Web application to help users filter news topics of interest.

Users can enter a topic, and the app will display recent news stories and update them on new releases.

How will I get news

Limitation:

  • 100 requests per day
  • Search all articles and get live top headlines
  • Articles available with 24 hour delay
  • Search articles up to a month old
  • CORS enabled for localhost

Choose programming languages and frameworks to showcase strengths.

  • Javascript, Next.js, tailwind css

How I Built It

I used javascript, Next.js, and tailwind css to create a simple web application.

run npm install
npm run dev
# create .env.local
# add NEWS_API_KEY="e236630228ab459187557d1033ef99b1" into .env.local

I implemented Next.js version 13.4 with an "app" directory and "serverActions." This allowed me to structure separate layouts for the client side and server side. To manage the response, I utilized the useState hook, which led me to create the "Body" component. For the initial state, I utilized serverActions from the main layout to call the API. Subsequently, when the client clicks the filter button, the server API will be triggered with the specified filter string parameter.

// @/components/body.tsx
"use client"; // declaration for using react hooks and more
...
import { useState } from "react";
...
// initNews is the initial API reaponse props from main Page.tsx
const [news, setNews] = useState<Article[] | null>(initNews); // @/services/getNews.ts
"use server"; // declaration for all of functions are using on server
import "server-only"; // safety check for serverActions

Why I Built It This Way

I had to build fullstack application because I cannot call news API from frontend with CORS issue. And Next.js is my ideal choice for the fullstack web applications with built-in routing, automatic code splitting, and CSS-in-JS support further streamline development, while a strong community and documentation provide valuable resources for building the web application.

What Would I Do Differently

I would like to implement lazy loading news contents. So, when client scroll the page, and it will show 10 by 10 or more pages. Also I want to add local storage hooks that can save search histories, favorite and more features.

Interactive demo

Recorded Demo

Challenge completed by:
Proactive and positive front-end developer with 3 years of experience in finance and security companies.
Actively looking
Looking for sidehustle
$
80000
 /year
$
 /hour
Based in: 
Sydney
SkillsRobinID: 
Socrest
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