Build a Mobile Twitch Clone

People long for connection, and technology has allowed us to connect with those who aren't physically near in increasingly many ways over the last few decades. With applications like text messaging, and then group messaging, with our music, photos and movies moving to the cloud, we've been able to share more and more across great distances.

What if we were to build an app that seamlessly combined two wildly popular technologies: sharing over chat and watching videos online? (Okay. Fine. Twitch already did that... But, can you do it better...?)

In this tutorial, we'll be describing how to build a Twitch-style app with Stream Chat's "livestream" functionality. The application we will build will include both a video view and chat view!

Prerequisites

A Stream account
A working React Native installation
MongoDB

The application will consist of two parts:

A server (the backend): We are going to be making use of an opensource API server, so we won’t be needing to build this ourselves. You can find the server on Stream's own Nick Parsons' Github!
A client (the frontend): this what we'll build using React Native.

Creating a Stream Application

Before proceeding with the tutorial, you will need to get your credentials from Stream Chat. Once you’ve created your account, you can grab your credentials from Stream by:

Navigating to your Stream Dashboard
Creating a new application
Clicking on "Chat" in the top navigation
Scrolling down to "App Access Keys", where you can view your credentials

Once you've found them, save them somewhere safe, as they will be used to build the server!

Setting Up Your Environment

We need to create a directory to hold both the API and the mobile app. We can do this simply by executing the following command:

mkdir twitch-stream-app

Well, that was easy...

Setting Up the Server

As mentioned earlier, we are not going to be building the server, as that has been done and open sourced (no use in recreating the wheel...). With that said, we will need to configure it a bit:

cd twitch-stream-app
git submodule add git@github.com:nparsons08/stream-chat-api.git server
cd server
cp .env.example .env

Now that you've created your .env file, update it with secure details, like your credentials, that you don't want flying around on the interwebs.

Since we will be building a "livestream" application with Stream Chat, we will also need to make a tiny, simple, one-line change to the file located at server/src/controllers/v1/auth/init.action.js:

const channel = await client.channel("livestream", "General");

If you're curious about what other types of channels you can create, all supported channel types can be found here.

Once the above has been updated, we can run the server:

yarn && yarn build
yarn start

Setting Up the Client

To set up the client, we'll create a new directory to house the application, and then create a new React Native project, which will reside in the client directory. Finally, we'll add the opensource Stream server API project as a git submodule. All of this can be done using this series of commands:

cd twitch-stream-app
git init
react-native init client

Building the Client

The next step is to build the actual app. To get started, let's install a few packages:

cd client
yarn add axios react-native-video stream-chat stream-chat-react-native
yarn add @react-native-community/netinfo
yarn add react-native-image-picker react-native-document-picker
cd ios && pod install && cd ..
react-native link react-native-image-picker
react-native link react-native-document-picker
react-native link @react-native-community/netinfo

Once all of our packages have been installed, we can move on to building out the screens! The application is going to have 2 pages:

The Authentication Page: The user will be asked to provide his/her email address and password. This doubles as the login and registration process. If the email already exists, the provided password will be checked against what exists in the database, after which (s)he will be logged into the application. Else, a new user is added to the database.
The Video and Chat Page: This page is a split view, containing both the video currently showing and the livestream chat with other users.

The authentication page is going to be the entry page of the app. By default, React Native includes an App.js file (which you now have, after running the nifty commands above); you will need to overwrite that file with the following content:

import React, {Component} from 'react';
import {Alert, StyleSheet, View, SafeAreaView} from 'react-native';
import {StreamChat} from 'stream-chat';
import Signup from './Signup';
import VideoPlayer from './VideoPlayer';
import Chat from './Chat';
import axios from 'axios';

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isAuthenticated: false,
      id: '',

If you take a look at lines 4 through 6, you will notice we import three local files which do not exist yet; let's create those:

touch Signup.js VideoPlayer.js Chat.js

In the newly created Signup.js file, you will need to copy and paste the following code:

import React, {Component} from 'react';
import {Alert, Button, TextInput, View, StyleSheet} from 'react-native';

export default class Login extends Component {
  constructor(props) {
    super(props);

    this.state = {
      email: '',
      password: '',
    };
  }

  render() {
    return (

In the newly created VideoPlayer.js, you'll need to add the content below:

import React, {Component} from 'react';
import {StyleSheet} from 'react-native';
import Video from 'react-native-video';

export default class VideoPlayer extends Component {
  render() {
    return (
      <Video
        source={{
          uri:
            'https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_480_1_5MG.mp4',
        }}
        ref={ref => {
          this.player = ref;
        }}

Finally, Chat.js should be updated to contain the following:

import React, {Component} from 'react';
import {SafeAreaView, View} from 'react-native';
import {
  Chat,
  Channel,
  MessageList,
  MessageInput,
} from 'stream-chat-react-native';

export default class ChatView extends Component {
  render() {
    const channel = this.props.chatClient.channel('livestream', 'General');
    channel.watch();

    return (

Great work! Before you move on, make sure the following values have been updated to match your actual credentials:

STREAM_KEY_FROM_DASHBOARD : The actual key you copied from the dashboard.
AUTHORIZATION_HEADER: This can be found in the .env file in the server directory

Once you've completed all of the steps above, you can spin up the app by running the following command:

react-native run-ios
react-native run-android

The above command will start a new simulator with the application running! You can manually start another simulator and run them side by side using the following command:

react-native run-ios --simulator "iPhone 8 Plus"

With your two simulators running, you should have something like this:
User-uploaded image: v4P18BNcSh.gif

Wrapping Up

In this tutorial, we made use of Stream Chat to build a fully-functional chat application that allows users to communicate while watching a video. One way in which you can take your app even further is to make the video part of the application live (e.g. all users regardless of when they log into the application view the same thing rather than watching the video from the start). What else would you do to improve this app?

If you got a little stuck, or are simply curious, you can find the full source code for our app on GitHub.

Thanks for joining us, and happy coding!