DemoListApp

Hello World! 👋🏽
This project is a simple Compose Multiplatform app (Android + Desktop + Web) that demonstrates my Android and Kotlin Multiplatform skills. It contains two screens: user list and user details.

In this app I focused on architecture, modularization, tests, and compromised on the UI - it is very basic. Although such a small application does not need so many modules, I tried to apply patterns I would use in much bigger applications.

Web live demo: https://burnoo.github.io/DemoListApp/

Used technologies

• UI Framework: Compose Multiplatform
• Dependency injection / Service locator: Koin + cokoin
• Asynchronous programming: Kotlin Flow/Coroutines
• Unit Tests: Kotlin test + Kotest assertions
• UI Tests: Compose Testing (Multiplatform and Android)
• JSON Serialization: Kotlin Serialization
• Network: Ktor
• Style: Compose Material 3 (hardly used)
• Image loading: Kamel
• Navigation (for Android): Compose Navigation
• Dependency management in project: Gradle Version Catalog
• Dependency management bot: Renovate Bot
• CI: Github Actions
• Static code analyser/formater - ktlint (used locally with git hooks)

Architecture and modules

In app there are two layers - Data and UI. Modules are split by layer and by feature. This approach is inspired by talk from recent Android Dev Summit.

There are two ui modules: userlist and userdetails (both with MVVM architecture) and single data module: users.

Diagram of modules used in the app (core and test modules are omitted):

Modules

• :core
  • :core:designsystem - contains AppTheme and common UI elements
  • :core:data - contains core data logic (e.g. Pager class)
  • :core:ui - contains core ui logic (e.g. multiplatform ViewModel)
  • :core:utils - contains simple util functions
  • :core:compose-utils - contains Jetpack Compose utils for tests and previews
• :data
  • :data:users:core - contains repository, includes :model via api()
  • :data:users:model - contains models used in the application
  • :data:users:network - contains network data sources with JSON parsing
  • :data:users:coretest, :data:users:networktest - contains test utils and fake implementations
• :ui - module for all features in app
  • :ui:userlist - user list feature
  • :ui:userdetails - user details feature
• :app - module that connects all features, contains platform applications with navigation
  • :app:android - Android application
  • :app:desktop - Desktop application

Tests

• Unit Tests
  • for ViewModels (UserDetailsViewModelTest and UserListViewModelTest)
  • for utils functions (TitleParserTest)
  • for Api and JSON parsing (UsersApiTest)
  • for Repository (UsersRemoteRepositoryTest)
  • for core data logic (PagerTest)
• UI Tests:
  • [JVM Compose] Screen tests (UserListContentTest and UserDetailsContentTest
  • [JVM Compose] E2E test - running whole app with mocked JSON responses (DesktopAppTest)
  • [Android Compose] E2E test - running whole app with mocked JSON responses (AndroidAppTest)

Next steps

1. Support for Landscape layout
2. Screenshot tests
3. Better, custom UI
4. Configure ktlint on CI
5. (maybe) iOS app

Video

video1.mp4

Special thanks

to @MiSikora and @AlexKrupa for doing a code review. Following commits were added: b99c348, f4a621b, 794985f, 5301f47, 8a72e19, 424e905, 6b8be27, a0958a3