I firmly believe that the best motivation for learning new technology is a project that excites you that you can't wait to build. As an experienced developer, you've probably already built a number of successful commercial projects that share certain product features, design patterns, and even target audiences. In this book, I want you to build a project that feels like a breath of fresh air. A project, which you most likely wouldn't build in your day-to-day work. It has to be a fun endeavor, which will not only educate you but also satisfy your curiosity and stretch your imagination. However, assuming that you're a busy professional, this project shouldn't be a time-consuming, long-term commitment for you either.

Enter Snapterest—a web application that allows you to discover and collect public photos posted on Twitter. Think of it as a Pinterest (www.pinterest.com) with the only source of pictures being Twitter. We will implement a fully functional website with the...

Node.js is a platform that allows us to write server-side applications with a client-side language that we're all familiar with—JavaScript. However, the real benefit of Node.js is that it uses an event-driven, nonblocking I/O model, which is perfect for building data-intensive, real-time applications. It means that with Node.js, we should be able to handle an incoming stream of tweets and process them as soon as they arrive; just what we need for our project.

Let's install Node.js. We'll be using version 8.7.0 because at the time of writing this book, that's the latest version of Node.js. Jest is a testing framework from Facebook that you'll learn about in Chapter 9, Testing Your React Application with Jest.

Download the installation package for your OS from one of these links:

Run...

In this book, we'll be using Git to install Node.js modules. If you haven't installed Git yet, visit https://git-scm.com/book/en/v2/Getting-Started-Installing-Git and follow the installation instructions for your OS.

The data for our React application will come from Twitter. Twitter has a Streaming API that anyone can plug into and start receiving an endless flow of public tweets in the JSON format.

To start using the Twitter Streaming API, you'll need to perform the following steps:

In the Application Settings section of this page, you'll find two vital pieces of information:

Take a...

The amount of tweets that you'll receive via the Twitter Streaming API is more than you can ever consume, so we need to find a way to filter that stream of data into a meaningful set of tweets that we can display and interact with. I recommend that you take a quick look at the Twitter Streaming API documentation at https://dev.twitter.com/streaming/overview, and in particular, take a look at this page that describes the way you can filter an incoming stream at https://dev.twitter.com/streaming/reference/post/statuses/filter. You'll notice that Twitter provides very few filters that we can apply, so we need to find a way to filter that stream of data even further.

Luckily, there is a Node.js application just for this. It's called Snapkite Engine. It connects to the Twitter Streaming API, filters it using the available filters and according to the rules that you define, and outputs the filtered tweets to a web socket connection. Our proposed React application...

Now it's time to create our project structure. Organizing source files may sound like a simple task, but a well-thought-out project structure organization helps us understand the underlying architecture of our application. You'll see an example of this later in this book, when we'll talk about the Flux application architecture. Let's start by creating our root project directory named snapterest inside your home directory ~/snapterest/.

Then, inside it, we will create two other directories:

Now, inside ~/snapterest/source/, create the components/ folder so that your project structure would look like this:

Now when we have our fundamental project structure ready, let's start populating it with our application files. First, we need to create our main application file...