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 to deliver 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. 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 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.

The function used to call APIs is in the index.js file, in the js folder; the main button features and a function to show release time of each story referred to current nowtime are developed in the services folder.

A golden shadow, developed in scrollShadow.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 bundled the app using Webpack. I used Axios for simpler API calls, Lodash to prevent unreadable properties during API calls, and Dotenv to recall hidden environment variables (as a studying purpose since HN API's are still public)

Html5
Css3
Sass
JavaScript ES6


Axios

Lodash

Dotenv

Webpack

(back to top)

Getting Started 🎬

This project was bootstrapped with Webpack, Axios, Lodash and Dotenv.
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 Webpack:

Prerequisites 📝

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

npm -v

(back to top)

Installation ⚙️

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

npm init -y

Then you will need to

• install webpack

npm i -D webpack webpack-cli

• initialize the project

npx webpack init

While answering initialization questions, make sure you select the SASS option for style compiling, since this is how I styled this app.

To use all the code's functionalities you will need to install also Axios (for API calls), Lodash (with the _.get function to prevent unreadable properties during API calls) and Dotenv (to recall environment variables from a .env file) libraries. Use these commands in terminal:

npm install axios

npm i --save lodash

npm install dotenv --save

At this stage you can run

npm run build

to build the app for production in the dist folder, and

npm run serve

to see the app in action in your local machine.

(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
• create .env file and insert it in the .gitignore list
• 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)