React on Express Tutorial: The Twitter Timeline Game (Part 1)

In this tutorial we’ll build a game that interacts with the Twitter API and challenges users to match a given Tweet with its author. The game is called Following, and you can play the fully-built version of it here:

Following: The Twitter Timeline Game

The game’s front end is React, and its backend is Node with Express. In all, we’ll be using (and learning) the following technologies:

Front end: React and JSX, Bower, functional JavaScript, LESS, Bootstrap, EJS, Browserify

Back end: Node, Express, NPM, Twitter’s API, oAuth, Nodemon, Heroku

This tutorial is split into 7 parts, each released about a week apart:

  1. Project creation (you are here)
  2. Base webserver and communication with Twitter
  3. Data modeling and formatting
  4. Setting up our front end JavaScript
  5. The component in depth
  6. Managing the game lifecycle and scoring
  7. Deploying to Heroku

Ok! Without further ado, let’s dive right into section #1, project creation.

Create a folder for our project with a package.json

First we need to create a package.json file inside our game directory. This sets up the basic properties of our Node app, including npm commands (in the scripts object) and all our dependencies. Do the same thing for our bower.json file, where we require our front-end packages. Don’t worry about researching each dependency right now, their use will become clear throughout the tutorial.

Install our command line utils globally

There are a few node packages that we need to install globally. These don’t go in our package.json file, we just install them manually:

npm install -g nodemon

npm install -g watchify

npm install -g express-generator

npm install -g bower

NPM install and Bower install

Now we’re ready to fetch our Node and Bower packages:

npm install

bower install

Generate the app with express

Express is Node framework that forms the basis of our application. It responds to web requests, maintains browser session, does all that basic plumbing that a web site or application needs. Express can generate all the initial files we need to be up and running:

express --ejs followingapp

Grunt tasks

We’ve almost got our basic app up and running. Back in package.json, we have a scripts object; those are commands we can run. Running npm run server will run our /bin/www file with nodemon. /bin/www is the entry point to start our web app, which nodemon runs. Nodemon will also restart our server every time we change a file, making sure we’re always serving the latest code.

npm run server

You should now be able to visit your app in a browser at the URL

That’s it for this installment. Next week, we’ll continue setting up our webserver and add some communication with Twitter.