This is the 4th post in the 8 part tutorial series created by getstream.io. The final result is your own feature-rich, scalable social network app built with React and Redux! Visit getstream.io/cabin for an overview of all 8 tutorials and a live demo.

Visit getstream.io/cabin for an overview of all the tutorials, as well as a live demo. The source code can be found on the Stream GitHub repository for Cabin, and all blog posts can be found at their respective links below:

Introduction

We’re using Stream to power the feeds in Cabin. Stream allows you to build newsfeeds and activity streams without worrying about the scalability, reliability, or maintenance of your feeds. Many companies have invested years in building their feed tech. (If you’re interested in learning more about this problem set, check out the papers mentioned on the stream-framework github repo.) For a more in-depth look at the features behind Stream, click here, or try the five minute tutorial.

A Little Background

By the end of this tutorial, we will have built a fully-fledged social application. Cabin relies on three specific feeds that power the application. Learn about these three feed types:

Timeline

The timeline is the main page of Cabin and shows you the uploads from the people you follow.

Notification

The second feed is the Notification Feed. If someone comments on your picture, likes it, or follows you it shows up in this feed.

Incoming Activity

Lastly, we have our Incoming Activity Feed. The Incoming Activity Feed shows the likes, comments and follow activities from the people you follow.

Activities

Now that we have an understanding of the feeds that power Cabin, let’s take a look at an example activity:

https://gist.github.com/nparsons08/6143bd0a5cbf84ebca1e41980ab421a1

The actor, verb and object fields are a standard way to represent activities. It follows the official activity stream spec. You might display this in your app as: “Jack added a photo of The Hill to Great Hill Photos – with @Jill.” The “to” field offers us the ability to essentially CC someone in a notification. For more information about this functionality, check out our info on “targeting” in the Stream documentation.

Setting Up Stream

Let's get started. Head over to GetStream.io and create an account! Next, create a new application in the dashboard with the following feed groups and types:

user_posts (flat)

user (flat)

timeline_flat (flat)

timeline_aggregated (aggregated)

notification (notification)

Note: You’ll want to make sure to turn on notifications on all of your feed groups as we’ll be utilizing realtime functionality in this application. Now that we’ve setup our feed groups, let’s collect the following information, as we’ll need it to initialize the application on both the client and server sides:

App ID

API Key

API Secret

Next up, we’ll need to clone the repository from GitHub:

https://gist.github.com/nparsons08/65251335d3fd8a15cd2ca2c9cab4094e

Then, add your credentials to the env.sh file located in the root directory by modifying the value and sourcing the file:

https://gist.github.com/nparsons08/570f1171e646ac9c6987f7272823ed84

Okay, nicely executed. Now your environment is setup to run with your Stream credentials! The last thing we’ll need to do is install Stream from npm. Run the following command from both the /app and /api directories:

https://gist.github.com/nparsons08/7407702ea194e8797ae8246e77066994

Note: You’ll also want to make sure that wherever you’re using Stream, you require it at the top of your file:

https://gist.github.com/nparsons08/d84fa204ae510baca3309a19208485eb

Adding Activities to Feeds

There are two sections where we utilize Stream in the Cabin application, the first being the API, the second being the client (a.k.a. app). In our case, the API handles the heavy lifting – it adds activities to Stream, in addition to enriching the data when the client makes a request. “Enriching data” refers to the to task of taking an object like the one we referenced in our example above, looking up the associated data, and returning a complete object to be shown to the user. Take a look at an example of the client side view for uploading a photo: Now, take a look at the server side (API) code that powers an “upload” activity to the feed:

https://gist.github.com/nparsons08/529d430747f2ccb50ace0f5371076379

Breaking it down:

Instantiate a new API client using our Stream API key and secret.

Then instantiate a new feed class using user_posts and the actor’s user id (from the database).

Build an activity object: “actor” is the user creating the activity. “verb” is the action being taken. “object” is a descriptor of the action being taken, with the database id of the action (concatenated by a colon). “foreign_id” is the database ID for reference during enrichment. “time” is a timestamp of when the action occurred (in our case, we’re using “now”).

Add the activity to the feed.

For more information on adding activities, visit the Stream documentation.