Compose Multiplatform Sample App

Designed by Bhanit Gaurav

This is a comprehensive Compose Multiplatform sample application designed to demonstrate the power and flexibility of shared UI and logic across Android and iOS platforms using Kotlin Multiplatform (KMP) and Jetpack Compose.

It serves as a reference implementation for modern mobile development practices, showcasing a wide range of Material Design 3 components, architectural patterns, and essential mobile functionalities.

🚀 Features

This application includes a robust set of features and components, ensuring a complete overview of modern mobile app capabilities:

UI & Components

• Material Design 3: Fully implemented Material 3 design system for consistent, adaptive, and beautiful UI across platforms.
• Theme & Appearance:
  • Dynamic Theme: Support for Light and Dark modes.
  • Customizable Colors: Users can select custom Primary, Secondary, and Tertiary colors.
  • Typography: Dynamic font family switching (Default, Serif, SansSerif, Cursive, Poppins, etc.) with preview.
• Components Showcase: A dashboard section demonstrating various UI components.
• Grids: Examples of Vertical, Horizontal, and Staggered grids using LazyGrid.
• Animations: Shared Element Transitions and smooth navigation animations.

Functionality

• Video Player: Integrated ExoPlayer for Android and AVPlayer for iOS for seamless video playback.
• Permissions:
  • Camera: Native implementation using ActivityResultLauncher (Android) and UIImagePickerController (iOS).
  • Gallery: Native Photo Picker integration.
  • Biometrics: Native secure authentication using androidx.biometric and LocalAuthentication.
  • Notifications: Runtime permission handling using Moko Permissions.
• Swipe Refresh: Custom and robust "Pull to Refresh" implementation for lists.
• Pagination: Infinite scrolling with efficient data loading.
• Image Loading: Efficient image loading using Coil for Compose Multiplatform.
• Biometric Authentication: Secure login using native biometrics (Fingerprint/FaceID).

Architecture & Data

• Clean Architecture:
  • Presentation Layer: Jetpack Compose UI + ViewModels.
  • Domain Layer: UseCases and Repository Interfaces.
  • Data Layer: Repository Implementations, Data Sources (API/DB).
• Navigation: Implemented using Navigation3 (Jetpack Navigation Compose for KMP) with type-safe routing.
• Networking: REST API integration using Ktor Client.
• Data Persistence: Secure local data storage using DataStore (Preferences).
• Dependency Injection: Fully modularized dependency injection using Koin.

Architecture Design Flow

graph TD
    UI[Compose UI] --> VM[ViewModel]
    VM --> UC[UseCase]
    UC --> Rep[Repository Interface]
    Rep --> RepImpl[Repository Implementation]
    RepImpl -->|Remote| API[Ktor API]
    RepImpl -->|Local| DB[DataStore/Database]

Loading

🛠 Tech Stack

• Language: Kotlin
• UI Framework: Jetpack Compose Multiplatform
• Architecture: MVVM + Clean Architecture
• DI: Koin
• Network: Ktor
• Async: Kotlin Coroutines & Flow
• Navigation: Jetpack Navigation Compose
• Persistence: DataStore
• Image Loading: Coil 3.0
• Permissions: Moko Permissions & Native
• Bio-Auth: Native Implementation (Expect/Actual)

👤 Author

Bhanit Gaurav

• 🌐 Website: bhanit.com
• 🐙 GitHub: ComposeMultiplatformSamples
• 📝 Medium: bhanitgaurav

---

This project is intended for educational purposes and as a reference for Compose Multiplatform development.