Learn how to build a realtime dashboard for monitoring and comparing keywords on Twitter.
This article is part of the Building Realtime Apps Tutorials series, updated on a regular basis.
Every so often at Pusher we hold a hack event to give everyone a chance to try something new; to take a risk they might not otherwise take, or simply to learn something they’ve wanted to learn.
In our latest hack event I decided to build something that’s been sitting in my notebook for a couple of years now—I wanted to build a realtime dashboard for monitoring and comparing keywords on Twitter.
It took a little longer than expected (as does everything) but it works great and has already proven incredibly useful in monitoring the trends of keywords throughout the day.
In true Pusher fashion, I’ve released both the API server and graph demo for you to take and use as you wish. We’d love to hear what you make with it!
The realtime tweet statistics API and graphs use a variety of technologies. Here’s a selection of the most important:
Node.js is my go-to technology when quickly putting something together. Both the API server and front-end demo use Node.js to act as a data processor and Web server.
The Pusher Node.js library is used to hook Pusher’s realtime API into the Node.js server.
The Node.js server itself is powered by Express, allowing you to quickly build up a REST API without any hassle.
Tweets are retrieved from the Twitter Streaming API using the Twitter Node.js package.
Bower is used to manage the front-end libraries that need to be installed. It can be quite an odd experience if you’re not used to it, though it’s worth trying to see if you like it.
Realtime graphs are produced using the Epoch library. It’s great for throwing in large quantities of realtime data and not having to worry about building a performant method of visualisation.
Finally, front-end magic is performed using the CSS flexbox to allow a dynamic number of graphs to fit perfectly in any size window. Nifty!
The first thing you need to do is set up the API server so you can start scraping and counting tweets. There are a few steps but it shouldn’t take too long:
config.example.jsand name it
node index.jsand checking an API endpoint
The final step is set up the demo so you can see the results of your hard work:
node index.jsand checking the graphs
At this point you should already be enjoying monitoring your favourite keywords on Twitter. However this is just the beginning; there are countless ways to take this to the next level.
Have you used this? Or perhaps you’ve extended it to do something new? Let us know about it!
For more about building realtime applications, check out our tutorials library, updated on a regular basis.