Home

Awesome

Twitch-Clone-Project-1200x640px

<p align="center"> <a href="https://opensource.org/licenses/Apache-2.0"><img alt="License" src="https://img.shields.io/badge/License-Apache%202.0-blue.svg"/></a> <a href="https://android-arsenal.com/api?level=24"><img alt="API" src="https://img.shields.io/badge/API-24%2B-brightgreen.svg?style=flat"/></a> <a href="https://github.com/skydoves/twitch-clone-compose/actions/workflows/android.yml"><img alt="Build Status" src="https://github.com/skydoves/twitch-clone-compose/actions/workflows/android.yml/badge.svg"/></a> <a href="https://getstream.io?utm_source=Github&utm_medium=Jaewoong_OSS&utm_content=Developer&utm_campaign=Github_Dec2023_Jaewoong_TwitchCompose&utm_term=DevRelOss"><img src="https://img.shields.io/endpoint?url=https://gist.githubusercontent.com/HayesGordon/e7f3c4587859c17f3e593fd3ff5b13f4/raw/11d9d9385c9f34374ede25f6471dc743b977a914/badge.json" alt="Stream Feeds"></a> </p>

This is a Twitch clone app built with Stream Chat SDK for Compose to implement messaging systems and Stream Video SDK for Compose using Jetpack Compose

The purpose of this repository is to demonstrate below:

:bulb: Additional Repositories

If you're interested in additional repositories that were built with Jetpack Compose and Stream SDK, check out the repositories below:

📲 Download APK

Go to the Releases to download the latest APK.

📷 Previews

<p align="center"> <img src="previews/preview0.png" alt="drawing" width="272" /> <img src="previews/preview1.png" alt="drawing" width="272" /> <img src="previews/preview2.png" alt="drawing" width="272" /></br> <img src="previews/preview5.png" alt="drawing" width="272" /> <img src="previews/preview4.png" alt="drawing" width="272" /> <img src="previews/preview3.png" alt="drawing" width="272" /> </p> <a href="https://getstream.io/chat/sdk/compose?utm_source=Github&utm_medium=Jaewoong_OSS&utm_content=Developer&utm_campaign=Github_Dec2023_Jaewoong_TwitchCompose&utm_term=DevRelOss"> <img src="https://user-images.githubusercontent.com/24237865/138428440-b92e5fb7-89f8-41aa-96b1-71a5486c5849.png" align="right" width="12%"/> </a>

🛥 Stream Chat & Video SDK

Twitch Clone Compose is built with Stream Chat SDK for Compose to implement messaging systems and Stream Video SDK for Compose. If you’re interested in adding powerful In-App Messaging to your app, check out the Android Chat Messaging Tutorial or Android Video Chat Tutorial.

Stream Chat

Stream Video

💻 Build Your Own Twitch Project

<details> <summary> If you want to build your own chat project, you should follow the instructions below:</summary>
  1. Go to the Stream login page.
  2. If you have your GitHub account, click the SIGN UP WITH GITHUB button and you can sign up within a couple of seconds.

stream

  1. If you don't have a GitHub account, fill in the inputs and click the START FREE TRIAL button.
  2. Go to the Dashboard and click the Create App button like the below.

stream

  1. Fill in the blanks like the below and click the Create App button.

stream

  1. You will see the Key like the figure below and then copy it.

stream

  1. Create a secrets.properties file on the root project directory with the text below using your API key:
STREAM_API_KEY=REPLACE WITH YOUR API KEY
  1. Build and run the project.
</details>

🛠 Tech Stack & Open Source Libraries

🏛️ Architecture

Twitch Clone Compose follows the Google's official architecture guidance.

architecture

Twitch Clone Compose was built with Guide to app architecture, so it would be a great sample to show how the architecture works in real-world projects.<br>

The overall architecture is composed of two layers; UI Layer and the data layer. Each layer has dedicated components and they each have different responsibilities. The arrow means the component has a dependency on the target component following its direction.

Architecture Overview

layer

Each layer has different responsibilities below. Basically, they follow unidirectional event/data flow.

UI Layer

layer

The UI Layer consists of UI elements like buttons, menus, tabs that could interact with users and ViewModel that holds app states and restores data when configuration changes.

Data Layer

layer

The data Layer consists of repositories, which include business logic, such as querying data from the local database and requesting remote data from the network. It is implemented as an offline-first source of business logic and follows the single source of truth principle.<br>

For more information about the overall architecture, check out Build a Real-Time WhatsApp Clone With Jetpack Compose.

💯 MAD Score

summary

🤝 Contribution

Most of the features are not completed except the chat feature, so anyone can contribute and improve this project following the Contributing Guideline.

Find this repository useful? 💙

Support it by joining stargazers for this repository. :star: <br> Also, follow maintainers on GitHub for our next creations! 🤩

License

Copyright 2023 Stream.IO, Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.