Twitter Realtime Visualization

This is a demo powering the live Twitter streaming dashboard. This is an active collaboration between UNC Chapel Hill Computer Science, IBM Watson, and UNC Basketball's GoHeels Media team.

Integration w/ UNC Basketball Video Board

Backend Architecture

Client-side Architecture Diagram

Technologies used

Uses Vue.js as client, Twitter API for streaming, Watson Tone Analyzer, redis chacheing for RSS feed, and socket.io to tie server and client.

Quickstart

$ git clone https://github.com/fabiandev/vue-twitter-stream-app.git
$ cd vue-twitter-stream-app
$ cp server/.env.example server/.env
$ yarn

Now fill in your credentials in server/.env and run yarn start.

Live Example

http://vue-twitter-stream-watson.mybluemix.net/

Credits

Primary development team: Victor Cui, Greer Glenn, Amogh Sharma, Michael Gu

Our app depends on:

• Vue as a front-end framework.
• Express with twit for the server.
• socket.io for realtime websockets.
• redis.io for cache storage to produce RSS feed (found at /rss route)
• Twitter API for live data.
• Highcharts for visualizations.
• Materialize for styling.
• Material icons and Icons8 Flat Color Icons for icons.