JetMVI-Template - GitLite

KO | EN

gitlite — search

#hacktoberfest #react #ai #typescript #linux #nodejs #java #windows #cli #awesome-list #vue #pytorch #ios #openai

JetMVI-Template

(★ 104)

Simple demo to use jetpack compose with MVI architecture with clean way.

File Explorer

Download Latest Version (.zip)

- - app_flow.yml
- .gitignore
- .name
- AndroidProjectSystem.xml
- appInsightsSettings.xml
- compiler.xml
- deploymentTargetSelector.xml
- gradle.xml
- graphql-settings.xml
- kotlinc.xml
- migrations.xml
- misc.xml
- runConfigurations.xml
- vcs.xml
- .gitignore
- build.gradle.kts
- proguard-rules.pro
- build.gradle.kts
- - gradle-wrapper.jar
  - gradle-wrapper.properties
- dark-theme.mp4
- light-theme.mp4
.gitignore
build.gradle.kts
gradle.properties
gradlew
gradlew.bat
LICENSE.md
README.md
settings.gradle.kts

# Installation Guide

1. Get the code

git clone https://github.com/myofficework000/JetMVI-Template

Downloads the entire project code from GitHub to your computer.

cd JetMVI-Template

Moves into the project folder you just downloaded.

2. Gradle (Java/Kotlin)

Medium Recommended

Prerequisites

Git Needed to download the project code from GitHub.
JDK (Java) Required to build and run Java/Kotlin projects.
Gradle If the repo includes gradlew (Gradle Wrapper), you don't need to install Gradle separately.

cd app

This project's files live in a subfolder, so move into it first.

./gradlew build

Builds the project using Gradle.

✅ A BUILD SUCCESSFUL message means it worked. The output is created under build/.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Github API's usecase
**Jetpack Compose with MVI architecture with Clean code,  TDD & MAD skill**

![Language](https://img.shields.io/github/languages/top/cortinico/kotlin-android-template?color=blue&logo=kotlin)
![GitHub repo size](https://img.shields.io/github/repo-size/myofficework000/JetMVI-Template)  
![GitHub stars](https://img.shields.io/github/stars/myofficework000/JetMVI-Template?style=social)  
![Contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)

**GitHubCompose** is a modern **Android showcase app** built using [**Jetpack Compose**](https://developer.android.com/jetpack/compose), **MVI architecture**, **[Kotlin Flow](https://developer.android.com/kotlin/flow)**, and **Clean Architecture** principles.  
It serves as a **production-grade reference project** focused on scalability, maintainability, and testability.

Designed as a reference for developers, this sample app highlights a **robust Android architecture**, seamlessly integrating state-of-the-art tools to create a **high-quality, production-ready code-base**.

## Description of tech Utilize

* UI/UX
    * [Compose](https://developer.android.com/jetpack/compose) declarative UI framework
    * [Material design](https://material.io/design)

* Tech/Tools
    * [Kotlin](https://kotlinlang.org/) 100% coverage
    * [Coroutines](https://kotlinlang.org/docs/reference/coroutines-overview.html) and [Flow](https://developer.android.com/kotlin/flow) for async operations
    * [Koin](https://insert-koin.io/) for dependency injection
    * [Jetpack](https://developer.android.com/jetpack)
        * [Compose](https://developer.android.com/jetpack/compose)
        * [Navigation](https://developer.android.com/topic/libraries/architecture/navigation/) for navigation between composables
        * [ViewModel](https://developer.android.com/topic/libraries/architecture/viewmodel) that stores, exposes and manages UI state
    * [Retrofit](https://square.github.io/retrofit/) for networking
    * [Coil](https://github.com/coil-kt/coil) for image loading

* Modern Architecture
    * Single activity architecture (with [Navigation component](https://developer.android.com/guide/navigation/navigation-getting-started)) that defines navigation graphs
    * MVI
    * [Android Architecture components](https://developer.android.com/topic/libraries/architecture) ([ViewModel](https://developer.android.com/topic/libraries/architecture/viewmodel), [Navigation](https://developer.android.com/jetpack/androidx/releases/navigation))
    * [Android KTX](https://developer.android.com/kotlin/ktx) - Jetpack Kotlin extensions
    
## Light and Dark mode compatible
<img src="misc/demo_light_mode.gif" width="360" height="820"> <img src="misc/demo_dark_mode.gif" width="360" height="820">

| Dark Theme UI                            | Light Theme UI                              |
|-----------------------------------------|----------------------------------------------|
| <video src ='https://github.com/myofficework000/MVI-JetpackCompose-Github/assets/51234843/cbcd4ac6-cca1-44ab-a55d-c8095f775ee1' width=200/> | <video src ='https://github.com/myofficework000/MVI-JetpackCompose-Github/assets/51234843/5728e268-be26-44fb-81d0-a27663aea07f' width=200/>

## Architecture
The project's architecture follows a clear division of responsibilities between its View, Presentation, and Model components, thoughtfully implementing the Model-View-Intent (MVI) pattern in conjunction with the powerful features of Jetpack Compose.

Architecture layers:
* View - Composable screens that consume state, apply effects and delegate events.
* ViewModel - that manages and reduces the state of the corresponding screen. Additionally, it intercepts UI events and produces side-effects. The ViewModel lifecycle scope is tied to the corresponding screen composable.
* Model - Repository classes that retrieve data. In a clean architecture context, one should use use-cases that tap into repositories.

![](https://i.imgur.com/UXwFbmv.png)

There are a three core components described:
* **State** - data class that holds the state content of the corresponding screen e.g. list of `User`, loading status etc. The state is exposed as a Compose runtime `MutableState` object from that perfectly matches the use-case of receiving continuous updates with initial value.

* **Event** - plain object that is sent through callbacks from the UI to the presentation layer. Events should reflect UI events caused by the user. Event updates are exposed as a `MutableSharedFlow` type which is similar to `StateFlow` and that behaves as in the absence of a subscriber, any posted event will be immediately dropped.

* **Effect** - plain object that signals one-time side-effect actions that should impact the UI e.g. triggering a navigation action, showing a Toast, SnackBar etc. Effects are exposed as `ChannelFlow` which behave as in each event is delivered to a single subscriber. An attempt to post an event without subscribers will suspend as soon as the channel buffer becomes full, waiting for a subscriber to appear.

Every screen/flow defines its own contract class that states all corresponding core components described above: state content, events and effects.

## Connect with Us
For more updates and contributions, connect with us on [![LinkedIn](https://img.shields.io/badge/LinkedIn-blue?style=flat&logo=linkedin)](https://www.linkedin.com/in/myofficework/).

<a target="_blank" href="https://medium.com/@myofficework000/mvvm-to-mvi-a-guide-to-migrating-your-android-architecture-8d3cb5bb9f06"><img src="https://github.com/user-attachments/assets/8ed2f0b7-f668-4c93-a519-44d74c5677d7" alt="Medium">

## Thank you :) 
If you like this repository, please give it a star ⭐.