tanem / chirp

:bird: Stream tweet data from Twitter's public stream all the way through to the browser.

chirp

Stream tweet data from Twitter's public stream all the way through to the browser.

Requirements

• Node.js version 0.11.x (for the harmony flag which exposes generators)
• Keys obtained from dev.twitter.com after setting up a new app.

Installation

Create a .env file in the root of the project which contains the key information from Twitter:

export CHIRP_CONSUMER_KEY=[consumer key]
export CHIRP_CONSUMER_SECRET=[consumer secret]
export CHIRP_TOKEN=[token]
export CHIRP_TOKEN_SECRET=[token secret]

Then:

$ npm install -g bunyan; npm install

Run

Build the bundle, then start the server (see this article for information on the track phrases you can use). port will default to 3000 if it is not specified:

$ npm run build
$ node --harmony server --track=[phrases] --port=[port]

To prettify the log output, pipe it through the Bunyan tool:

$ node --harmony server --track=[phrases] --port=[port] | bunyan

Tests

watch this space

Implementation

Server

• The Stweam module is used to connect to Twitter's public stream using the track keywords provided on startup
• The key information required for the Twitter connection is loaded by habitat
• Shoe is used to stream the response back to connected browsers.

Browser

• Browserify is used to package up the various browser modules
• The browser-specific stream module is used to deal with the server response
• Rendering is then carried out by React
• The total number of tweet avatars rendered is dependant on the size of the window
• Once the tweet avatar total is maxed, new tweet data is added to the front of the list, and old data is removed
• Hovering over a tweet avatar for a certain amount of time will render the associated tweet text in a popup
• If the app is idle, random Tweets will be shown every ten seconds.

License

MIT