Introducing Grade_News! Sentiment Analysis powered News Reader

Hello 👋

Welcome to my first ever article about the first full stack app I have build, for my first Hackathon I have ever participated in.

I am incredibly excited to present my virtual baby - the Grade_News! app.

Have you been feeling lately that reading news every morning or even scanning headlines becomes more and more depressing?

What if you could skip the bad news and read the good ones only?

Grade_News! app to the rescue. My app is a news reader that classifies information into mood graded categories, allows you decide which ones you want to see and which ones are more likely make you feel miserable.

Motivation behind Grade_News!

An idea for this app was born a few years ago when my best friend was going through an incredibly stressful and unexpected postpartum depression. It made her incredibly sensitive to any form of suffering in the world. I thought to myself that one day I will build her an app which filters out all the bad information and keeps the good ones in.

I have always been curious of how much of an objectively bad information news providers are feeding us. Grade_News! statistics panel gives you a helpful idea of how much positivity really is out there.

Features

• uses AFINN-165 wordlist to perform sentiment analysis and categorise articles into three tabs:

  1. positive (sentiment analysis score > zero)
  2. neutral (SA score === zero)
  3. negative (SA score < zero)
  

• gives you a choice of how far down the bad news rabbit hole you’d like to descent each day

• aggregates news headers and atomises them into a monthly sum for an easy visual analysis that helps you see which months are happy and which are going downhill and require a news quarantine for a while
• each of news providers in: USA, Great Britain, Canada and Australia gets categorised by mood percentage; gives you an insight into which country is the most negative news generator
• each of news titles gets their own mood statistics that helps you decide which news providers to avoid

Technology

• auth0 : great authentication service that keeps statistics behind the login/signup wall
• news_api: gives access to large number of news articles
• node.js and express on the server side of life
• react: for easy interaction
• postgreSQL: database that makes statistics possible
• heroku: application host

UI/UX

I aimed at minimalistic and clean design; used Material Icons and got to create some fun svg graph-ics.

Code

Navigate to the github repo 🔗

I have used eslint and typescript to ensure code quality.

User Instruction

Navigate to the grade_news! 🔗

1. left side menu gives you an option of choosing desired mood and country as a source of news
2. once clicked, new menu of titles appears.
3. choose a news title and then on the right hand side the news reader articles aggregate
4. mood icons have little indicators for how many articles of each category there are

1. in order to see statistics and make a more informed choice about which button configuration to avoid, a user needs to create an account through a very easy to fill up form
2. the statistics tab gives an insight into the overall mood in the world calculated by collecting numbers of headers for each of the categories over a period of one month ; the highest number of headlines in each of mood category directs the trend

1. statistics for countries and titles reveal percentage of mood flavour, displaying the dominant one.

Challenges

I’ve never created a full stack app before hence the challenge started right off the bat while setting up a working dev environment.

I wanted to create an app with React fronted and express on the back serving files and making statistical calculations. Putting together working news API, auth0, postgreSQL database and deploying it to heroku took a large chunk of my time this month. Making each part communicate to the other took a lot of research and testing.

Here is my ready to use initial setup for a react express client side rendered app.

I have learnt about big differences in setup for a client and server side rendering.

On the client side the initial HTML is rendered by the server as a placeholder and the entire UI is rendered in the browser once all the scripts load.

On the server side the HTML rendered and contains the UI as it should be and there is no need for any scripts to load.

Although server side rendering is more popular, client-side is much easier to setup.

Another challenging moment was deployment to Heroku when I got to discover that there is a big difference between development and production environment. Turns out React routing needs and extra .htaccess file for an Apache HTTP Server, and a special bit of wild card setup on the server side in order to work.

.httaccess:

    Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]

Conclusion

I really, really enjoyed taking part in this hackathon challenge and I am sure it is not the last time I am participating. Thank you Auth0 and Hashnode for a month of great fun!

Thank you to my wonderful girlfriend for her patience and support and thank you to my friend for inspiration.