React Native

Social Music App

LAST EDIT Oct 07 2024

This tutorial explains how to use Stream to build a scalable social network for music. In this example app, you can follow your friends, artists and playlists. We're going to support the following features:

  • Timeline/News Feed

  • Hashtags

  • @mentions

  • Likes & Comments

  • Notification Feed

  • Realtime Changes

Step 1: Setting Up The Feed Groups

Copied!

First of all, we need to create feed groups for everything you can follow. For this app that will be: "user", "artist" and "playlist". Next, we'll need feeds to display the data. So we'll create the "timeline", "notification" and "tag" feeds groups. Take a moment to go to the dashboard and create these 6 feed groups. The "notification" feed group should be the "notification" feed type. The other 5 feed groups can be of the "flat" type.

Step 2: Follow Users, Artists and Playlists

Copied!

The example below shows you how to follow users, artists and playlists.

Step 3: Posting An Update

Copied!

Let's dive straight into an example of how to add an activity:

First of all, note how easy it is to add an activity. Certain fields like actor, verb and object are mandatory. Message is a custom field. You can add as many custom fields as you like. You can store numbers, strings, lists, and even objects.

The TO field is comparable to how CC works for email. For a production app, we recommend storing the activity in your database and syncing it to Stream.

Step 4: Likes & Comments

Copied!

When a user likes an activity or writes a comment, you'll want to do two things:

  • Notify the author of the original activity

  • Show the like/comment to followers

The example below uses the TO support to write both to the user:chris and notification:jack feeds:

Step 5: Reading a Feed

Copied!

It's easy to read a feed. You can use either offset or id_lt based pagination. For larger apps, we recommend filtering using id_lt as it performs much better.

The notification feed also includes the count of unseen and unread activities.

Step 6: Realtime Changes

Copied!

Stream allows you to listen to feed changes in realtime. You can use either websocketsSQS queues, or Webhooks to receive notifications. The following code creates a web socket connection to receive feed updates: