Hacker News Feed

Overview

The popular news site Hacker News (HN) run by YCombinator provides interesting links to news articles and blog posts that are related to information technology.

This project provides a more eye-pleasing version of the top 500 stories listed on HN.

The Design

This solution is implemented in JavaScript and CSS Grid using the library ReactJS.

The interface is designed for web big-screens using CSS Grid, but it is fully responsive and works flawlessly on small-screens (480px) in portrait orientation.

The stories are loaded using the HN official API: https://github.com/HackerNews/API.

The page is loaded on demand while scrolling the stories: it enhances the user experience with a faster loading time and reduces the data consumption.

Each Story contains:

Field	Description
score	The story's score
title	The title of the story
author	The username of the story's author.
text	The first comment

Each Story has two states: closed and expanded.

• While the story is closed the first comment contains a shortened text.
• While the story is expanded the first comment is fully visible, it is possible to visit the actual news clicking on the Title and to upvote it too clicking on the Score.

How to install the project

To install the dependencies of the project run the command below from the root of the project.

npm install

How to run the tests

The application has been developed using a Test Driven Development (TDD) approach.

To start the tests run the command below from the root of the project.

npm test

How to run the application

To start the application run the command below from the root of the project and visit the url http://localhost:3000/.

npm start

How it looks

The application shows the top 500 stories listed on HN. It shows each Story [score, title, author, text] loaded in a grid template with shortened text.

On the click event the grid items expand revealing the text with more text.

It also works on mobile resolutions.

How to run it as a Docker container

Build a Docker image

docker build -t hacker-news-feed .

Run as a Docker container

winpty docker run -it --rm -p 3000:3000 hacker-news-feed

What's next

• Complete the test suite with code refactoring
• Handle the double click for text selection on stories
• Create a configuration module for centralized url and constants handling