Skip to content

Latest commit

Β 

History

80 Commits

Folders and files

Repository files navigation

News Kotlin Multiplatform App ✨

News Kotlin Multiplatform AppPreview

Click the image above to watch a demo of the News Kotlin Multiplatform App on YouTube.

Overview

The News KMP App is a Kotlin Compose Multiplatform (KMP) project that provides a seamless, consistent news-reading experience across Android, iOS, Windows, macOS, and Linux.

Built with AGP 9, Kotlin 2.4, and Compose Multiplatform 1.12, this project adopts a decoupled multi-module architecture adhering to Clean Architecture and the MVI (Model-View-Intent) state management pattern.


Project Structure πŸ—οΈ

News-KMP-App/
β”œβ”€β”€ shared/         # Multiplatform Library (common Compose UI, MVI, Domain, Data, Room, Ktor, Koin)
β”œβ”€β”€ androidApp/     # Android Host Application (MainActivity, MyApp, Splash API, System Bars)
β”œβ”€β”€ desktopApp/     # Desktop Host Application (JVM Main entry, Window state, Desktop packaging)
β”œβ”€β”€ iosApp/         # iOS Xcode Application (consuming Shared.framework)
β”œβ”€β”€ gradle/         # Version Catalog (libs.versions.toml) & Gradle 9 Wrapper
└── build.gradle.kts

Features & Technologies πŸš€

  • Top News Headlines: Stay updated with the day's top news stories.
  • Detailed Content: Dive deeper into articles with rich metadata and source links.
  • Personalized Search: Real-time debounce search for articles across various topics.
  • Offline Bookmarks: Save favorite articles locally with Room Database for offline reading.
  • Dark / Light Mode: Dynamic theme selection with system default fallback saved via DataStore Preferences.
  • Adaptive Navigation: Responsive layouts using Material 3 Adaptive Navigation Suite across mobile, tablet, and desktop form factors.
  • Design System & M3 Tokens: Production-grade Material Design 3 design system with standardized tokens (Spacing, NewsAppShapes, Elevation, tonal Color containers) and reusable atomic components (NewsCard, NewsButton, NewsCategoryChip, NewsSourceBadge, NewsStateView, NewsTopAppBar).
  • Clean Architecture & MVI: Decoupled Layers (core, data, domain, designsystem, ui) with unidirectional data flow (State, Intent/Event, Effect).
  • Multiplatform Networking: Asynchronous HTTP client communication via Ktor 3 with JSON serialization.
  • Image Caching: Asynchronous image loading and caching using Coil 3.
  • Dependency Injection: Multiplatform dependency injection using Koin.
  • Logging & Config: Centralized logging with Kermit and environment config with BuildKonfig.

Design System Architecture 🎨

The UI layer is built upon a standardized, accessible Material Design 3 design system:

  • Tokens (designsystem/theme/):
    • Spacing: 8dp-based geometric grid tokens (default, xs: 4dp, sm: 8dp, md: 12dp, lg: 16dp, xl: 24dp, xxl: 32dp, huge: 48dp) injected via LocalSpacing and accessible through MaterialTheme.spacing.
    • Shapes: Standardized NewsAppShapes from extraSmall (4dp) to extraLarge (24dp).
    • Elevation: Material 3 elevation levels (Level 0 through Level 5) accessible via MaterialTheme.elevation.
    • Colors: Complete M3 tonal color palette including surfaceContainerLowest through surfaceContainerHighest, surfaceDim, surfaceBright, inverseSurface, and scrim.
  • Reusable Components (designsystem/component/):
    • Cards: NewsElevatedCard and NewsOutlinedCard with customizable shapes and colors.
    • Buttons: NewsPrimaryButton, NewsOutlinedButton, and NewsTextButton supporting loading states, icons, and text labels.
    • Badges & Chips: NewsSourceBadge for article sources and NewsCategoryChip for category filtering.
    • State Views: Unified NewsLoadingView, NewsEmptyView, and NewsErrorView with retry action support.
    • Top App Bars: Standard NewsTopAppBar and NewsCenterAlignedTopAppBar with title overflow handling, M3 surface tinting, and action slots.

Tech Stack & Libraries πŸ› οΈ

Technology / Library Purpose
Compose Multiplatform (1.12.1) Declarative UI for Android, Desktop, and iOS
Material Icons Extended (1.7.3) Unified multiplatform vector icon set replacing static XML drawables
Kotlin (2.4.20) Programming language and multiplatform toolchain
Android Gradle Plugin (9.1.1) Android & KMP build toolchain
Koin (4.2.2) Pragmatic lightweight dependency injection
Ktor (3.6.0) Multiplatform asynchronous HTTP client
Coil 3 (3.6.3) Multiplatform image loading and caching
Room (2.8.5) & SQLite (2.7.1) Multiplatform local persistence with type-safe DAO
DataStore (1.3.0) Key-value preferences storage
Jetpack Compose Navigation Type-safe multiplatform navigation
BuildKonfig (0.23.0) BuildConfig generator for multiplatform targets
Kermit (2.2.0) Centralized multiplatform logger
kotlinx.coroutines (1.11.0) Asynchronous programming and reactive streams
kotlinx.serialization (1.10.0) JSON parsing and serialization

Getting Started

Prerequisites πŸ“‹

  • JDK 17 or JDK 21
  • Android Studio (latest stable or Ladybug / Meerkat+) or IntelliJ IDEA
  • Xcode (for iOS build)
  • macOS (if building for iOS / macOS desktop target)

Installation πŸ› οΈ

  1. Clone this repository:

    git clone https://github.com/Coding-Meet/News-KMP-App.git
  2. Obtain News API Key:

  3. Configure local.properties:

    • Create or open local.properties in the root folder and add your key:
    API_KEY=YOUR_API_KEY_HERE

Running the App πŸš€

  • Android: Run the :androidApp module by selecting the androidApp configuration in Android Studio.
  • Desktop:
    ./gradlew :desktopApp:run
  • Desktop (Package Distribution):
    ./gradlew :desktopApp:packageDmg   # On macOS
    ./gradlew :desktopApp:packageMsi   # On Windows
    ./gradlew :desktopApp:packageDeb   # On Linux
  • iOS: Open iosApp/iosApp.xcodeproj in Xcode or run the iosApp run configuration in Android Studio / Fleet.

Screenshots πŸ“Έ

Android (Google Pixel 9) πŸ€–

Dark Mode Light Mode
Headlines Dark Headlines Light
Shimmer Dark Shimmer Light
Article Detail Dark Article Detail Light
Search Empty Dark Search Empty Light
Search Results Dark Search Results Light
Bookmarks Empty Dark Bookmarks Empty Light
Bookmarks Saved Dark Bookmarks Saved Light
Settings Dark Settings Light
Theme Dialog Dark Theme Dialog Light
Delete Dialog Dark Delete Dialog Light

iOS (Apple iPhone 16 Pro) 🍎

Dark Mode Light Mode
iOS Headlines Dark iOS Headlines Light
iOS Shimmer Dark iOS Shimmer Light
iOS Article Detail Dark iOS Article Detail Light
iOS Search Empty Dark iOS Search Empty Light
iOS Search Results Dark iOS Search Results Light
iOS Bookmarks Empty Dark iOS Bookmarks Empty Light
iOS Bookmarks Saved Dark iOS Bookmarks Saved Light
iOS Settings Dark iOS Settings Light
iOS Theme Dialog Dark iOS Theme Dialog Light
iOS Delete Dialog Dark iOS Delete Dialog Light

macOS / Desktop (Adaptive Desktop Window) πŸ–₯️

Dark Mode Light Mode
Desktop Headlines Dark Desktop Headlines Light
Desktop Article Detail Dark Desktop Article Detail Light
Desktop Search Dark Desktop Search Light
Desktop Bookmarks Dark Desktop Bookmarks Light
Desktop Settings Dark Desktop Settings Light
Desktop Theme Dialog Dark Desktop Theme Dialog Light

Web (Chrome Browser Adaptive Frame) 🌐

Dark Mode Light Mode
Web Headlines Dark Web Headlines Light
Web Article Detail Dark Web Article Detail Light
Web Search Dark Web Search Light
Web Bookmarks Dark Web Bookmarks Light
Web Settings Dark Web Settings Light
Web Theme Dialog Dark Web Theme Dialog Light

Contributing 🀝

Feel free to contribute to this project by submitting issues, pull requests, or providing valuable feedback. Your contributions are always welcome! πŸ™Œ

❀ Show your support

Give a ⭐️ if this project helped you!

Buy Me A Coffee

Your generosity is greatly appreciated! Thank you for supporting this project.

Connect with me

Author

Meet