Stream Viewer Mobile App

This mobile application allows users to view YouTube live streams. We’ve wrapped up YouTube’s API to build this Android application with React Native.

Features

• Login with Google
• Watch YouTube Live Streams
• View and participate in it live chat
• View a user’s live chat messages

Stack

• React Native
• Redux
• Redux Saga

Barriers in building this

Compiling on an old machine

I had forgotten how high the computation load of compiling a React Native application is. Moreso during development mode. My 2011 MacBook Pro could barely handle the task. I need to make an upgrade if I’m going to continue building mobile apps.

Navigating APIs

Building this required tying together several of Google’s API endpoints. Getting authenticated and figuring out how to get the right ids was quite the challange. The huge amount of documentation took forever to work through. It was definitely worth while though!

Memory Usage

Although a real Android device would likely handle storing every live stream’s chat messages, my simulator couldn’t. I ended up only storing messages for the currently viewed stream and only the latest 200.

Areas for improvement

Censoring Messages

From the screens below, you can easily see that user messages need some filtering. YouTubers use some really unfriendly langauge!

Animating new messages

It’d be good to animate in new messages for a better user experience. Right now, I just replace the old messages with the new messages. It’s very abrupt.

Better storage of messages

It’d be nice to store more messages. Perhaps I could cache the latest 5000 messages for the last 5 streams viewed? I’m sure that would be accomplishable.

Gallery

Written by Peter Chau, a Canadian Software Engineer building AIs, APIs, UIs, and robots.