Inspiration

Already had knowledge of a up to date news api which one member of our group was already considering using for a project. Given The challenge set to help the environment this seemed like a perfect project to attempt.

What it does

A backend requests news information from the aforementioned api (node js backend). This returns some information about the article and a link to the source. We use this information to request the html from the site, then using cheerio we perform some rudimentary webscraping to grab an estimate for the location of that news article. As fallback the program simply uses the website publisher's location.

This is served to a react frontend which displays the information on both a feed and a dynamic globe. The globe can be clicked on, moved around, and clicking on a marker reveals more information about that news article.

How we built it

Built with a nodejs backend, which utilises axios and cheerio to perform the requests and webscraping of the apis/sources. Setup as a RESTful API using express (currently only one endpoint but has scope to expand).

Frontend is built in react, all components are custom built with the exception of the globe. Globe comes from 'react-globe'. We use this provided api to display the markers.

Challenges we ran into

Had some trouble finding a globe api which worked smoothly (and not hidden behind paywall) and did everything we wanted it to. Web scraping was inconsistent hence the implementation of the backup method of grabbing location. Additionally locations had to be converted to coordinates which provided a challenge in itself.

Accomplishments that we're proud of

Very happy with the entire site given the time scale of the project. We believe this is a great foundation for a project with lots of room to expand in the future. Site functionality is nearly exactly what we envisioned with only a few bugs.

What we learned

How to use react-globe. How to embed media into a site. How to use "cheerio" web scraping library. Enhanced our react skills.

What's next for Honua

Backend

Enhance web scraping - maybe use machine learning More endpoints and possible requests Web socket to provide auto loading of new articles

Frontend

Improve UI and add more features Add web socket implementation to update automatically

Built With

Share this project:

Updates