foam

Foam is a Twitch mobile app that supports emotes, badges and user colors from 7TV, BetterTTV (BTTV), and FrankerFaceZ (FFZ) — third-party extensions for Twitch used by millions to aid in making the mobile chat experience more enjoyable.

This repository is managed as a monorepo with PNPM + PNPM workspaces

Why Foam?

The native twitch mobile app does not support emotes, badges and user colors from the above third-party extensions, resulting in only emote text names to be rendered rather than their actual image or GIF, resulting in a poor mobile chat experience.

Store links

TBA

Features

TBA

Environments

TBA

Applications

• foam - React Native app targeting IOS and Android

Tech stack

• React Native
• React Navigation
• Expo
• Tamagui
• React query

Getting started

You will need the following in order to run the project locally:

• Node.js
• NVM
• Xcode
• Android Studio
• PNPM

Once you have the above installed, you can run the following commands to get started:

Install correct node version

 nvm use
 nvm install

Install correct pnpm version

corepack enable

Install dependencies

pnpm i

Acquire Twitch API credentials

• Create a Twitch account if you do not have one already
• Go to the Twitch developer console and create a new application
• Copy the client ID and client secret and paste them into a .env file in the root of the project. See .env.example for an example of what this file should look like

How to run the app

Note: You will need to have an Android emulator running in order to run the app locally. You will need to use the AVD (android virtual device) manager in Android Studio to create a virtual device if you do not have one already.

Note: You'll need to have Xcode installed in order to run the iOS app locally.

cd apps/mobile && npx expo start

Contributing

Commiting code

This project follows the Conventional Commits specification. Husky is used to execute scrips according to git hooks in order to test if a developer is following the various linting rules and conventional commits. Run yarn commit to start an interactive commit.

Bug reports

If you encounter a problem with this project, please open an issue. Be sure to include:

• Node version
• OS
• Brief but thorough reproduction steps of the issue

High level design

TBA