Lovers Not Haters is a storytelling, technology and strategy loving boutique advertising agency based in Miami, Florida.

I have had the pleasure to work with them as one of their Technology Consultant and as a Web Developer for a couple of projects. One of them, and my favorite so far, was the development of their website and the Realtime Daily Score of Love vs Hate displayed on it.

The raw idea for this project was to:

Develop a program that listens to peoples public sentiment on the internet, to be able to display in real-time a relative score of each day's fight between love and hate in the world.

Although, the part of listens to peoples public sentiment on the internet is pretty broad, we narrow our focus and efforts on using Twitter. This social network was selected for to main reason: (i) The information published is public and (ii) It offers a convenient API that allows us to retrieve tweets, with a specific set of terms, as they are posted on this platform.

Back-end:

The back-end of this project was develop using Node.js, and the following packages:

  • Express: Fast, unopinionated, minimalist web framework for node.
  • Socket.io: Real-time, bidirectional and event-based communication.
  • Twitter: An asynchronous client library for the Twitter REST and Streaming API's.
  • Sentiment A Node.js module that uses the AFINN-165 wordlist and Emoji Sentiment Ranking to perform sentiment analysis on arbitrary blocks of input text.

The implementation of this idea using these awesome open-source tools is relatively simple. The following code is a simplification of it:

let count = {"1":0, "-1":0}
let client = new Twitter(Auth...)
let stream = client.stream('statuses/filter', {track: streamString, language: 'en' });
stream.on('data', (tweet)=> {
  if( sentiment(tweet.text).score * direction >  2 ){ //where direction is 1:love and -1:hate
    count[direction]++;
    socketio.emit(LoveOrHate, {count, tweet});
  }
});

In basic terms, the twitter client allows us to subscribe to a real-time filter on twitter (stream), using a set of specific words such as Love and Hate. Each new tweet published that includes those terms is send to us, in the event data. The sentiment of tweet is analyzed and scored, to avoid false positives. This assumes that Love is linked to positive statements, while Hate to negative ones. The score value is updated and sent it, with the tweet information to the front-end clients (people looking to the website).

In practice, several more considerations were made to reduce the amount of information transmitted through socket.io, as several hundred of tweets can arrive each second on both sides, and to deal with special cases data events from Twitter.

Front-end:

The front-end for its part was develop using Vue.js and MaterializeCss for the web's logic and style respectively, while a socket.io client was used to retrieve the real-time information of the counter. Vue.js was develop as a lightweight and easier to learn reactive framework for web apps, in comparison to React from Facebook. Although, I have never used React, Vue.js really change my perspective of front-end development and I just Love it. With these reactive user interfaces, the information is automatically updated from the JavaScript variables to the web interface (DOM). Other even more interesting benefits are obtained using the latest trends of web development (Pug, Sass, VueCli, PWA, etc), but this belong to other post.

The first draft of the interface for the daily global score that I presented to the team is still posted on my CodePen. Showing how easy is can be implemented the user interface reacting to the real-time information provided from the server.

Much more love and dedication was put on the online website. Working with the high standard designers from Lovers was an exquisite experience and a beautiful end-result, which I'm proud of have been participant.