📱 WhatsApp clone project demonstrates modern Android development built with Jetpack Compose and Stream Chat SDK for Compose.

Overview

Whats-App-Clone-Project-1200x630px

License API Build Status Stream Feeds

This is a WhatsApp clone app built with Jetpack Compose and Stream Chat SDK for Compose.

The purpose of this repository is to demonstrate below:

  • Implementing entire UI elements with Jetpack Compose.
  • Implementation of Android architecture components with Jetpack libraries such as Hilt and AppStartup.
  • Performing background tasks with Kotlin Coroutines.
  • Integrating chat systems with Stream Chat SDK for real-time event handling.

✍️ Technical Content

If you're interested in the overall architecture, each layer, and Compose themes that are used in this project, check out Build a Real-Time WhatsApp Clone With Jetpack Compose.

💡 Additional Repositories

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

  • Slack Clone Android: 📱 A chat demo app built with Jetpack Compose and Stream Chat SDK following clean architecture principles.
  • Stream Draw Android: 🛥 Stream Draw is a real-time multiplayer drawing & chat game app built entirely with Jetpack Compose.
  • Facebook Messenger Clone: Facebook Messenger clone using Stream SDK & Jetpack Compose.

📲 Download APK

Go to the Releases to download the latest APK.

🛥 Stream Chat SDK

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

📷 Previews

drawing drawing drawing
drawing drawing drawing

🛠 Tech Sacks & Open Source Libraries

  • Minimum SDK level 21.
  • 100% Jetpack Compose based + Coroutines + Flow for asynchronous.
  • Compose Chat SDK for Messaging: The Jetpack Compose Chat Messaging SDK is built on a low-level chat client and provides modular, customizable Compose UI components that you can easily drop into your app.
  • Jetpack
    • Compose: Android’s modern toolkit for building native UI.
    • ViewModel: UI related data holder and lifecycle aware.
    • App Startup: Provides a straightforward, performant way to initialize components at application startup.
    • Navigation: For navigating screens and Hilt Navigation Compose for injecting dependencies.
    • Room: Constructs Database by providing an abstraction layer over SQLite to allow fluent database access.
    • Hilt: Dependency Injection.
  • Landscapist-Glide: Jetpack Compose image loading library that fetches and displays network images with Glide, Coil, and Fresco.
  • accompanist: A collection of extension libraries for Jetpack Compose
  • Retrofit2 & OkHttp3: Construct the REST APIs and paging network data.
  • Retrofit adapters: Retrofit adapters for modeling network responses with Kotlin Result, Jetpack Paging3, and Arrow Either.
  • ksp: Kotlin Symbol Processing API.
  • sealedx: Kotlin Symbol Processor to auto-generate extensive sealed classes and interfaces.
  • Timber: A logger with a small, extensible API which provides utility.
  • Baseline Profiles: To improve app performance by including a list of classes and methods specifications in your APK that can be used by Android Runtime.

🏛️ Architecture

WhatsApp Clone Compose follows the Google's offlicial architecture guidance.

architecture

WhatsApp 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.

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.

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

Modularization

modules

WhatsApp Clone Compose adopted modularization strategies below:

  • Reusability: Modulizing reusable codes properly enable opportunities for code sharing and limits code accessibility in other modules at the same time.

  • Parallel Building: Each module can be run in parallel and it reduces the build time.

  • Decentralized focusing: Each developer team can assign their dedicated module and they can focus on their own modules.

💯 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.
Also, follow maintainers on GitHub for our next creations! 🤩

License

Copyright 2022 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.
You might also like...
Instagram Clone built in Android using concept of Jetpack compose.
Instagram Clone built in Android using concept of Jetpack compose.

Instagram_Clone Instagram clone is an app build using new technologies/trends and other advanced Jetpack compose specific concepts. Following are the

Telegram ui clone built with Jetpack Compose

Telegram UI clone Make telegram ui with Jetpack Compose. Library Jetpack Compose v1.0.1 Compose Icon v1.0.3 Minimum requirements Android Studio Arctic

JetInstagram is an Instagram UI clone app built with Jetpack Compose.
JetInstagram is an Instagram UI clone app built with Jetpack Compose.

JetInstagram JetInstagram is an instagram clone app built with Jetpack Compose. This sample showcases: Home Screen Post Like Button Animation Photo Li

InstagramJetpackCompose is an Instagram UI clone app built with Jetpack Compose.
InstagramJetpackCompose is an Instagram UI clone app built with Jetpack Compose.

InstagramJetpackCompose is an Instagram UI clone app built with Jetpack Compose.

An android app that demonstrates Snapchat's Creative kit integration with Jetpack compose
An android app that demonstrates Snapchat's Creative kit integration with Jetpack compose

Snap Creative kit Sample An android app that demonstrates Snapchat's creative kit integration with Jetpack compose 💻 Requirements To try out this sam

Sample repo that demonstrates various options for testing Jetpack Compose applications.

Composing With Confidence This is the sample repository for the Composing With Confidence presentation from Droidcon NYC in 2022. If you run the sampl

Gmail clone project, that uses Jetpack Compose to draw UI content for gmail home screen
Gmail clone project, that uses Jetpack Compose to draw UI content for gmail home screen

Gmail clone project, that uses Jetpack Compose to draw UI content for gmail home screen following Udemy course: Android 12 Jetpack Compose Developer Course - From 0 To Hero

Breakout clone built with Compose

breakout-compose The classic Breakout game built with Jetpack Compose ✨ Demo JoyuyNijH2vgqgDy.mp4 🦿 Prerequisites Java 8 or above ⌨️ Usage Clone the

From Swedish
From Swedish "Öppettider", an app to quickly access your favorite places' opening times. Built to practice Android development and try out Jetpack Compose.

Appettider From Swedish "Öppettider", an app to quickly access your favorite places' opening times. Built to practice Android development and try out

Comments
  • Unresolved reference:

    Unresolved reference: "WhatsAppUserUiState".

    The class at "io.getstream.whatsappclone.uistate.WhatsAppUserUiState" is missing.

    Opened the module "core-uistate" and I haven't found the file WhatsAppUserUiState.kt

    Am I missing something here?

    opened by Ahmad-Hamwi 2
  • core and features modules moved to sub-folders

    core and features modules moved to sub-folders

    🎯 Goal

    Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request. If it fixes a bug or resolves a feature request, be sure to link to that issue. Improved code maintainability.

    🛠 Implementation details

    Describe the implementation details for this Pull Request. i have moved the core and feature module's in subfolder for better code maintainability.

    ✍️ Explain examples

    Explain examples with code for this updates.

    Preparing a pull request for review

    Ensure your change is properly formatted by running: i have applied spotlessApply before commit.

    $ ./gradlew spotlessApply
    

    Please correct any failures before requesting a review.

    opened by AndroidPoet 0
Releases(1.0.2)
  • 1.0.2(Nov 1, 2022)

    What's Changed

    • Configure build-logic and version catalog by @skydoves in https://github.com/GetStream/whatsApp-clone-compose/pull/5
    • Migrate buildSrc to the version catalog by @skydoves in https://github.com/GetStream/whatsApp-clone-compose/pull/6
    • Update Compose Compiler to 1.3.2 and Kotlin to 1.7.20 by @skydoves in https://github.com/GetStream/whatsApp-clone-compose/pull/7
    • Migrate landscapist to 2.0.3 the by @skydoves in https://github.com/GetStream/whatsApp-clone-compose/pull/8
    • core and features modules moved to sub-folders by @AndroidPoet in https://github.com/GetStream/whatsApp-clone-compose/pull/9

    New Contributors

    • @AndroidPoet made their first contribution in https://github.com/GetStream/whatsApp-clone-compose/pull/9

    Full Changelog: https://github.com/GetStream/whatsApp-clone-compose/compare/1.0.1...1.0.2

    Source code(tar.gz)
    Source code(zip)
    app-debug.apk(24.15 MB)
  • 1.0.1(Aug 25, 2022)

    What's Changed

    • Introduce SealedX KSP library by @skydoves in https://github.com/GetStream/whatsApp-clone-compose/pull/1
    • Migrate Gradle files to kts files by @skydoves in https://github.com/GetStream/whatsApp-clone-compose/pull/2
    • Implement core-uistate module to generate restartable and skippable UI states based on KSP by @skydoves in https://github.com/GetStream/whatsApp-clone-compose/pull/3

    New Contributors

    • @skydoves made their first contribution in https://github.com/GetStream/whatsApp-clone-compose/pull/1

    Full Changelog: https://github.com/GetStream/whatsApp-clone-compose/compare/1.0.0...1.0.1

    Source code(tar.gz)
    Source code(zip)
    app-debug.apk(23.11 MB)
  • 1.0.0(Aug 8, 2022)

Owner
Stream
Build scalable newsfeeds, activity streams, chat and messaging in a few hours instead of weeks
Stream
a Facebook Messenger clone using Stream SDK & Jetpack Compose

Messenger Clone Built for Android using Stream SDK & Jetpack Compose This project is developed by MathRoda for more projects GitHub . Showcase Video w

MathRoda 90 Dec 22, 2022
This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Compose.

JetBMICalculator This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Co

BHAVNA THACKER 3 Dec 31, 2022
PapriCoin demonstrates Jetpack Compose usage to build modern app based on Clean Architecture and newest Tech-Stack

PapriCoin demonstrates Jetpack Compose usage to build modern app based on Clean Architecture and newest Tech-Stack. Repository also has loca

Malik Mukhametzyanov 15 Nov 9, 2022
Mpesa-UI-clone-JetpackCompose - A Mpesa Ui Clone using Jetpack Compose

Mpesa-UI-clone-JetpackCompose Let's Challenge ourselves and build this Mpesa App

Felix Kariuki 9 Sep 17, 2022
A simple Twitter Spaces clone app with Jetpack Compose and 100ms SDK

A simple Twitter Spaces clone app with Jetpack Compose and 100ms SDK to demonstrate the use of 100ms SDK in creating an Audio call feature in your apps.

Joel Kanyi 21 Dec 13, 2022
Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.

Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.

MindOrks 382 Jan 5, 2023
Build a StateFlow stream using Jetpack Compose

Molecule Build a StateFlow or Flow stream using Jetpack Compose1. fun CoroutineScope.launchCounter(): StateFlow<Int> = launchMolecule { val count by

Cash App 1.3k Dec 29, 2022
Jetpack Compose WhatsApp UI for Android

android-jetpackCompose-whatsapp Jetpack Compose is Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on An

Emad Seliem 7 Feb 26, 2022
Facebook clone built using Jetpack Compose, Firebase Authentication and Firebase Firestore.

facebook-compose Facebook clone built using Jetpack Compose, Firebase Authentication and Firebase Firestore. Setup Create a Firebase project and add t

Alex Styl 27 Dec 3, 2022
JetFlix - A clone of Android NetFlix app in Android built using Jetpack compose.

JetFlix A clone of Android NetFlix app in Android built using Jetpack compose. This sample app showcases the following: MVVM Architecture (ViewModel +

Pushpal Roy 40 Dec 6, 2022