HackerNews

An awesome Tech News Reader powered with Hacker News service.
Try the app!

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. License
6. Contact

About The Project ❓

The goal of the project is delivering an application to democratize the sharing of information in the tech field, through the use of the Hacker News service.

At its startup the application displays the list of the latest news available by showing title, link, author and date of the story. Then it contacts APIs of the external Hacker News service to retrieve the list of latest news IDs. For each ID, the application recalls another API of the Hacker News service to obtain the information to be displayed such as the title, link, author and date of the news.

Note: the first API useful to get the list of the latest news (newstories) returns about 500 elements. In order to avoid performance problems, after having retrieved the list of the latest news, the application will show only details of the first 10 news. Through a button Load more the application will allow the user to go and view information of the next 10 news.

Functions to call APIs are in the services folder; the main button features are developed in the hooks folder; a function to show release time of each story referred to current nowtime can be found in the mappers folder.

A golden shadow, developed in ./src/styles/headerStyle.js and in ./src/styles/buttonStyle.js shows up to inform the user that there are new available stories above/below her/his viewport.

(back to top)

Built With 🧱

JavaScript is basically all I used to bootstrap this project. I created the app using React: every html element and css/sass style is developed through JavaScript files.

Html5
Css3
Sass
JavaScript ES6
Webpack
React

(back to top)

Getting Started 🎬

This project was bootstrapped with Create React App.
I published this code at the link https://hackernews-api-react-egidiosalinaro.netlify.app/ so you can use it, but if you want you can also install it in your device using React:

Prerequisites 📝

You need to have Node and npm installed. You can check the version you have installed running:

• npm

  npm -v

(back to top)

Installation ⚙️

Once downloaded this repo, in the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser. The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

(back to top)

Usage 🕹️

At its startup the application displays a list of the latest 10 tech news available by showing title, link, author and release date of each story. The user can read them by clicking on the title or on the relative open-in-a-new-tab button. User can decide to load ten more stories with the bottom LOAD MORE button, or to refresh the page using the NEW STORIES button. Golden shadows shows up from the header and the footer to inform the user that there are new available stories above/below her/his viewport.

(back to top)

Roadmap 🗺️

• call newstories API
• call APIs for each stories' details
• time functions
• Load More button to call 10 new stories
• styles improvements
  • shadows to inform about new available stories
  • colors and buttons images

(back to top)

License

Distributed under the MIT License. See LICENSE for more information.

(back to top)

Contact

egidiosalinaro@gmail.com

(back to top)