A beautiful, modern Pokemon application built with Compose Multiplatform featuring MVI architecture, type-safe navigation, and dynamic theming. Explore Pokemon, manage favorites, and enjoy a seamless experience across Android, Desktop, and iOS platforms.
🎯 Core Features
- 📱 Multiplatform: Android, Desktop, and iOS support
- 🏗️ MVI Architecture: Clean, predictable state management
- 🧭 Type-Safe Navigation: Kotlin Serialization-based routing
- 🎨 Material 3 Design: Modern UI with dynamic theming
- 🌓 Theme Management: Dark mode + Android Dynamic Colors
- 💾 Offline Support: Room database for favorites
- 🔄 Reactive UI: Real-time updates with StateFlow
🐾 Pokemon Features
- 🔍 Pokemon List: Browse all Pokemon with infinite scrolling
- ❤️ Favorites Management: Add/remove Pokemon from favorites
- 📊 Detailed View: Stats, abilities, types, and more
- 🎨 Type-based Theming: Colors based on Pokemon types
- ✨ Shimmer Loading: Beautiful loading animations
🎭 UI/UX Features
- 🌊 Smooth Animations: Page transitions and micro-interactions
- 📱 Adaptive UI: Responsive design for all screen sizes
- 👆 Swipe Actions: Swipe-to-delete favorites
- 🌈 Dynamic Colors: Android 12+ Material You support
- ⚡ Performance: Optimized with lazy loading and caching
- Clone this repository:
git clone https://github.com/Coding-Meet/CMP-MVI-Template.git
- Open in the latest version of Android Studio or intellij idea.
- This project includes a demo of how to use BuildConfig.
(Note: The API key here is just a placeholder and not used in the app.)
Create or update your local.properties with:
API_KEY=API_KEY Is_Debug_Build=true
- For Android, run the
composeAppmodule by selecting theappconfiguration. If you need help with the configuration, follow this link for android - For iOS, run the
composeAppmodule by selecting theiosAppconfiguration. If you need help with the configuration, follow this link for Ios - For Desktop, run
./gradlew :composeApp:run - For Desktop with hot reload, run
./gradlew desktopRun -DmainClass=com.example.cmp_mvi_template.MainKt
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
📱 Presentation Layer (UI)
├── 🎭 Compose Screens
├── 🧠 ViewModels (MVI)
└── 📊 State Management
💼 Domain Layer (Business Logic)
├── 📋 Use Cases
├── 🏪 Repository Interfaces
└── 📦 Domain Models
💾 Data Layer (Data Sources)
├── 🌐 Remote (Ktor + PokéAPI)
├── 💿 Local (Room Database)
└── 🔄 Repository Implementation
- 🎯 UI: Compose Multiplatform + Material 3
- 🏗️ Architecture: MVI + Clean Architecture + Use Cases
- 🧭 Navigation: Compose Navigation + Type-safe routes
- 🌐 Networking: Ktor Client + JSON Serialization
- 💾 Database: Room + SQLite (multiplatform)
- 🎨 Theming: DataStore Preferences + Dynamic Colors
- 🔧 Dependency Injection: Koin
- 🖼️ Images: Coil3 (async image loading)
CMP-MVI-Template/
├── composeApp/ # ✅ Main Compose Multiplatform app module
│ ├── build.gradle.kts # ➕ Gradle config for this module
│ ├── setting.preferences_pb # 📦 Proto DataStore schema for user settings (theme, etc.)
│
│ └── src/
│ ├── androidMain/ # 🤖 Android-specific code
│ │ ├── AndroidManifest.xml # 📄 Manifest file for Android
│ │ └── kotlin/
│ │ └── com/example/cmp_mvi_template/
│ │ ├── MainActivity.kt # 🚀 Entry point for Android app
│ │ ├── MyApplication.kt # 🏁 Application class for Koin setup
│ │ └── core/platform/ # 🔌 Android actual implementations for platform interfaces
│
│ ├── iosMain/ # 🍎 iOS-specific code (uses Kotlin/Native)
│ │ └── kotlin/
│ │ └── com/example/cmp_mvi_template/
│ │ ├── MainViewController.kt # 🧭 iOS screen entry point (UIKit)
│ │ └── core/platform/ # 🔌 iOS actual implementations for platform interfaces
│
│ ├── desktopMain/ # 🖥 Desktop-specific entry point
│ │ └── kotlin/
│ │ └── com/example/cmp_mvi_template/
│ │ └── main.kt # 💻 Desktop launcher with ComposeWindow
│
│ ├── commonMain/ # 🔁 Shared code between all platforms
│ │ ├── composeResources/ # 🎨 Compose Multiplatform resources (fonts, strings, etc.)
│ │ └── kotlin/
│ │ └── com/example/cmp_mvi_template/
│ │
│ │ ├── di/ # 🧩 Dependency Injection modules using Koin
│ │ │ ├── AppModule.kt
│ │ │ └── PlatformModule.kt
│ │
│ │ ├── app/ # 🌐 App-level shared state (theme, scaffold, etc.)
│ │ │ ├── AppViewModel.kt
│ │ │ └── AppScaffold.kt
│ │
│ │ ├── core/ # 📚 Core layer for base domain, utils, and data sources
│ │ │ ├── utility/ # 🔧 Utility helpers (formatters, validators, etc.)
│ │ │ ├── domain/ # 📦 Base models like pagination, error handling
│ │ │ ├── data/ # 🗃️ Base local + remote source contracts or shared logic
│ │ │ └── platform/ # 🌍 Expect interfaces for platform-specific functionality
│ │
│ │ ├── ui/ # 🧱 Reusable UI components
│ │ │ ├── Button/
│ │ │ ├── Dialog/
│ │ │ ├── Layout/
│ │ │ └── Theme/ # 🎨 Theme definitions (Typography, Colors, Dimens)
│ │
│ │ └── feature/ # 🌟 Feature modules – each screen or flow has its own folder
│ │ ├── pokemon/ # 🐱 Pokemon feature (MVI pattern)
│ │ │ ├── domain/ # 🔁 Business logic interfaces & models
│ │ │ ├── data/ # 💾 Repository, fake/local/remote data
│ │ │ ├── presentation/ # 🎭 UI state, event, screen, and ViewModel
│ │ │ └── di/ # 🧩 Feature-specific DI
│ │
│ │ ├── setting/ # ⚙️ App settings (e.g., theme selection)
│ │ │ └── presentation/ # 🎭 UI state + screen for settings
│ │
│ │ └── sample_example/ # 🧪 Optional example/template feature
│ │ ├── presentation/
│ │ └── domain/
│ ├── commonTest/ # 🧪 Shared unit tests
│ │ └── com/example/cmp_mvi_template/
│ │ └── ComposeAppCommonTest.kt # ✅ Sample shared test
└── CMP-MVI-Template/
├── composeApp/
│ ├── setting.preferences_pb
│ ├── build.gradle.kts
│ └── src/
│ ├── androidMain/
│ │ ├── AndroidManifest.xml
│ │ ├── res/
│ │ │ └── values/
│ │ │ └── strings.xml
│ │ │
│ │ └── kotlin/
│ │ └── com/
│ │ └── example/
│ │ └── cmp_mvi_template/
│ │ ├── MyApplication.kt
│ │ ├── MainActivity.kt
│ │ └── core/
│ │ └── platform/
│ │ ├── theme/
│ │ │ └── PlatformTheme.android.kt
│ │ ├── datastore/
│ │ │ └── createDataStore.android.kt
│ │ ├── toast/
│ │ │ ├── AndroidToastManager.kt
│ │ │ └── ToastManager.android.kt
│ │ ├── http_engine/
│ │ │ └── GetHttpClientEngine.android.kt
│ │ └── database/
│ │ └── getDatabaseBuilder.android.kt
│ ├── commonMain/
│ │ ├── composeResources/
│ │ │ ├── values/
│ │ │ │ └── strings.xml
│ │ │ └── drawable/
│ │ │ └── compose-multiplatform.xml
│ │ └── kotlin/
│ │ └── com/
│ │ └── example/
│ │ └── cmp_mvi_template/
│ │ ├── di/
│ │ │ ├── initKoin.kt
│ │ │ └── CoreModule.kt
│ │ ├── app/
│ │ │ ├── presentation/
│ │ │ │ ├── App.kt
│ │ │ │ ├── AppThemeState.kt
│ │ │ │ └── AppViewModel.kt
│ │ │ └── di/
│ │ │ └── AppModule.kt
│ │ ├── core/
│ │ │ ├── utility/
│ │ │ │ ├── ComposableExtensions.kt
│ │ │ │ ├── UiText.kt
│ │ │ │ ├── IconResource.kt
│ │ │ │ ├── AppLogger.kt
│ │ │ │ └── StateController.kt
│ │ │ ├── domain/
│ │ │ │ ├── DataErrorToUiTextExtension.kt
│ │ │ │ ├── Paginator.kt
│ │ │ │ ├── DataError.kt
│ │ │ │ ├── Error.kt
│ │ │ │ └── ResultWrapper.kt
│ │ │ ├── data/
│ │ │ │ ├── datastore/
│ │ │ │ │ ├── ThemeMode.kt
│ │ │ │ │ └── ThemePreferences.kt
│ │ │ │ ├── local/
│ │ │ │ │ ├── PokemonDatabase.kt
│ │ │ │ │ ├── PokemonDatabaseConstructor.kt
│ │ │ │ │ └── dao/
│ │ │ │ │ └── PokemonDao.kt
│ │ │ │ └── network/
│ │ │ │ ├── NetworkExtensions.kt
│ │ │ │ └── HttpClientFactory.kt
│ │ │ └── platform/
│ │ │ ├── theme/
│ │ │ │ └── PlatformTheme.kt
│ │ │ ├── datastore/
│ │ │ │ ├── createDataStore.kt
│ │ │ │ └── AppSettings.kt
│ │ │ ├── toast/
│ │ │ │ ├── ToastManager.kt
│ │ │ │ ├── ToastManagerFactory.kt
│ │ │ │ └── ToastDuration.kt
│ │ │ ├── http_engine/
│ │ │ │ └── GetHttpClientEngine.kt
│ │ │ └── database/
│ │ │ └── getDatabaseBuilder.kt
│ │ ├── ui/
│ │ │ ├── theme/
│ │ │ │ ├── AnnotationPreview.kt
│ │ │ │ ├── Color.kt
│ │ │ │ ├── Theme.kt
│ │ │ │ └── Type.kt
│ │ │ ├── dialog/
│ │ │ │ ├── ToastPopup.kt
│ │ │ │ └── LoadingDialog.kt
│ │ │ ├── navigation/
│ │ │ │ ├── AppDestination.kt
│ │ │ │ ├── AdaptiveNavigation.kt
│ │ │ │ ├── NavigationExtensions.kt
│ │ │ │ └── bottom_navigation_bar/
│ │ │ │ ├── NavigationItem.kt
│ │ │ │ └── BottomNavigationBar.kt
│ │ │ ├── layout/
│ │ │ │ └── ErrorMessageLayout.kt
│ │ │ └── component/
│ │ │ ├── badges/
│ │ │ │ └── Badges.kt
│ │ │ ├── text/
│ │ │ │ └── Text.kt
│ │ │ ├── radio_button/
│ │ │ │ └── RadioButton.kt
│ │ │ ├── divider/
│ │ │ │ └── Divider.kt
│ │ │ ├── navigation_bar/
│ │ │ │ └── NavigationBar.kt
│ │ │ ├── progress_indicator/
│ │ │ │ └── ProgressIndicators.kt
│ │ │ ├── button/
│ │ │ │ └── Button.kt
│ │ │ ├── switch_custom/
│ │ │ │ └── Switch.kt
│ │ │ ├── slider/
│ │ │ │ └── Slider.kt
│ │ │ ├── icon_button/
│ │ │ │ └── IconButton.kt
│ │ │ ├── checkbox/
│ │ │ │ └── Checkbox.kt
│ │ │ ├── fab/
│ │ │ │ └── Fab.kt
│ │ │ ├── segmented_button/
│ │ │ │ └── SegmentedButton.kt
│ │ │ ├── bottom_app_bar/
│ │ │ │ └── BottomAppBar.kt
│ │ │ └── top_app_bar/
│ │ │ └── TopAppBar.kt
│ │ └── feature/
│ │ ├── setting/
│ │ │ ├── di/
│ │ │ │ └── SettingModule.kt
│ │ │ └── presentation/
│ │ │ ├── screen/
│ │ │ │ ├── SettingScreen.kt
│ │ │ │ ├── SettingEvent.kt
│ │ │ │ ├── SettingState.kt
│ │ │ │ ├── SettingViewModel.kt
│ │ │ │ └── SettingEffect.kt
│ │ │ └── component/
│ │ │ ├── DynamicThemeToggleAndroidOnly.kt
│ │ │ ├── ThemeSelectionRow.kt
│ │ │ ├── ThemeSelectionDialog.kt
│ │ │ └── ThemePreview.kt
│ │ ├── pokemon/
│ │ │ ├── di/
│ │ │ │ └── PokemonModule.kt
│ │ │ ├── presentation/
│ │ │ │ ├── component/
│ │ │ │ │ ├── PokemonCard.kt
│ │ │ │ │ └── ShimmerEffect.kt
│ │ │ │ ├── pokemon_details/
│ │ │ │ │ ├── screen/
│ │ │ │ │ │ ├── PokemonDetailsViewModel.kt
│ │ │ │ │ │ ├── PokemonDetailsEvent.kt
│ │ │ │ │ │ ├── PokemonDetailsScreen.kt
│ │ │ │ │ │ ├── PokemonDetailsEffect.kt
│ │ │ │ │ │ └── PokemonDetailsState.kt
│ │ │ │ │ └── component/
│ │ │ │ │ ├── PokemonAbilitiesSection.kt
│ │ │ │ │ ├── PokemonDetailsContent.kt
│ │ │ │ │ ├── PokemonStatsSection.kt
│ │ │ │ │ ├── PokemonBasicInfoSection.kt
│ │ │ │ │ └── PokemonImageSection.kt
│ │ │ │ ├── pokemon_list/
│ │ │ │ │ └── screen/
│ │ │ │ │ ├── PokemonListEvent.kt
│ │ │ │ │ ├── PokemonListViewModel.kt
│ │ │ │ │ ├── PokemonListScreen.kt
│ │ │ │ │ ├── PokemonListEffect.kt
│ │ │ │ │ └── PokemonListState.kt
│ │ │ │ └── favorites/
│ │ │ │ ├── screen/
│ │ │ │ │ ├── FavoritesState.kt
│ │ │ │ │ ├── FavoritesScreen.kt
│ │ │ │ │ ├── FavoritesEffect.kt
│ │ │ │ │ ├── FavoritesEvent.kt
│ │ │ │ │ └── FavoritesViewModel.kt
│ │ │ │ └── component/
│ │ │ │ ├── SwipeToDeletePokemonCard.kt
│ │ │ │ ├── FavoritesListContent.kt
│ │ │ │ └── EmptyFavoritesScreen.kt
│ │ │ ├── domain/
│ │ │ │ ├── usecase/
│ │ │ │ │ ├── GetFavoritesPokemonUseCase.kt
│ │ │ │ │ ├── GetPokemonDetailsUseCase.kt
│ │ │ │ │ ├── CheckIfFavoriteUseCase.kt
│ │ │ │ │ ├── GetPokemonListUseCase.kt
│ │ │ │ │ └── ToggleFavoriteUseCase.kt
│ │ │ │ ├── entity/
│ │ │ │ │ ├── PokemonEntity.kt
│ │ │ │ │ └── Pokemon.kt
│ │ │ │ └── repository/
│ │ │ │ └── PokemonRepository.kt
│ │ │ └── data/
│ │ │ ├── mapper/
│ │ │ │ └── toDomain.kt
│ │ │ ├── repository/
│ │ │ │ └── PokemonRepositoryImpl.kt
│ │ │ └── remote/
│ │ │ ├── api/
│ │ │ │ ├── PokemonApiServiceImpl.kt
│ │ │ │ └── PokemonApiService.kt
│ │ │ └── dto/
│ │ │ └── PokemonListResponseDto.kt
│ │ └── sample_example/
│ │ ├── di/
│ │ │ └── SampleExampleModule.kt
│ │ └── presentation/
│ │ └── screen/
│ │ ├── SampleEffect.kt
│ │ ├── SampleExampleScreen.kt
│ │ ├── SampleEvent.kt
│ │ ├── SampleState.kt
│ │ └── SampleExampleViewModel.kt
│ ├── desktopMain/
│ │ └── kotlin/
│ │ └── com/
│ │ └── example/
│ │ ├── .DS_Store
│ │ └── cmp_mvi_template/
│ │ ├── .DS_Store
│ │ ├── main.kt
│ │ └── core/
│ │ └── platform/
│ │ ├── theme/
│ │ │ └── PlatformTheme.desktop.kt
│ │ ├── datastore/
│ │ │ └── createDataStore.desktop.kt
│ │ ├── toast/
│ │ │ ├── RoundedPanel.kt
│ │ │ ├── ToastManager.desktop.kt
│ │ │ └── DesktopToastManager.kt
│ │ ├── http_engine/
│ │ │ └── GetHttpClientEngine.desktop.kt
│ │ └── database/
│ │ └── getDatabaseBuilder.desktop.kt
│ ├── commonTest/
│ │ └── kotlin/
│ │ └── com/
│ │ └── example/
│ │ └── cmp_mvi_template/
│ │ └── ComposeAppCommonTest.kt
│ └── iosMain/
│ └── kotlin/
│ └── com/
│ └── example/
│ └── cmp_mvi_template/
│ ├── MainViewController.kt
│ └── core/
│ └── platform/
│ ├── theme/
│ │ └── PlatformTheme.ios.kt
│ ├── datastore/
│ │ └── createDataStore.ios.kt
│ ├── toast/
│ │ ├── ToastManager.ios.kt
│ │ └── IosToastManager.kt
│ ├── http_engine/
│ │ └── GetHttpClientEngine.ios.kt
│ └── database/
│ └── getDatabaseBuilder.ios.kt
Here are the upcoming tasks and feature enhancements planned for the project:
-
Koin Annotations Integration
- Use Koin Annotation processing (@Single, @Factory, etc.) to simplify and reduce boilerplate for dependency injection.
-
🔄 GraphQL Support for Pokémon API
- Implement a GraphQL version of the Pokémon API using Ktor Client. Will be explored in a separate branch for experimentation.
-
🗃️ SQLDelight Sample Integration
- Integrate SQLDelight only as a working code sample in a separate module/branch.
- Purpose: Keep reusable code ready for future use or cross-platform Kotlin projects.
- ✅ Room will continue as the primary local storage solution for this app.
-
⚙️ Dev Tooling Scripts (Automation)
- Build Gradle or Kotlin-based scripts for:
- 🔁 Renaming package names along with folder structure
- 📦 Creating distributable builds per platform
- 🚀 Auto-generating feature modules with basic files (UI, ViewModel, State, Events) by providing just a feature name
- Build Gradle or Kotlin-based scripts for:
-
🧩 Component Showcase Screen
- All UI components are implemented but not visible inside the app.
- A new Component Explorer Screen will be added where:
- You can view all components (buttons, cards, inputs, etc.)
- Helpful for testing and design consistency on a real device
-
🧪 Unit & Instrumented Testing
- Add unit tests for core business logic and ViewModels
- Add instrumented UI tests for critical user flows
- Integrate test coverage tools for quality tracking
-
📱 Maestro Integration (UI Flow Testing)
- Set up Maestro to define UI flow test scripts
Feel free to contribute to this project by submitting issues, pull requests, or providing valuable feedback. Your contributions are always welcome! 🙌
Give a ⭐️ if this project helped you!
Your generosity is greatly appreciated! Thank you for supporting this project.
Meet