Kotlin Multiplatform with Compose –Build Real Cross-Platform

Build a simple todo application using Kotlin multiplatform with compose to understand how compose works across platforms and lay a foundation for cross-platform development.

Explore compose multiplatform, a declarative UI library inspired by Jetpack Compose, using Kotlin to build cross-platform interfaces with composable functions, state, and animated visibility across Android and iOS.

Master compose basics by creating composable functions and managing state with remember and mutable state. Build layouts with column and row, text fields, and modifiers to update the user interface.

Display data using a lazy column that renders only visible items, with cards and rows; provide an icon button to remove tasks and a centered box for the empty state.

Run and test a cross-platform to-do app built with compose multi-platform, exploring desktop and iOS previews, a column layout with lazy column, and add/remove tasks.

Build a cross-platform pet finder app with Kotlin Multiplatform and Compose, using the Pet Finder API to load pets, images, and detail views on desktop, iOS, and Android.

Sign in to the Petfinder developer portal, request elevated access, and copy your API key and secret key. Learn how OAuth keeps these credentials secure in your Kotlin multiplatform app.

Learn to test the Petfinder API with postman by configuring OAuth2 client credentials, obtaining an access token, and sending requests to the animals endpoint.

Set up a Kotlin multiplatform project in Android Studio using Gradle, with a starter code and essential libraries like data store, Kotlin serialization, Kotlin x date time, and compass navigation.

Configure the module compose app by defining libraries, plugins like kotlin serialization, and source sets to manage Android main, Apple main, and common main with lifecycle view model and API.

Explore how to use compose resources, including a pet background for dark and light themes, in a correctly configured Gradle script and start building from scratch.

Implement a pet finder module using mvvm and clean architecture, organize data and domain by feature, and generate remote models from json with a json-to-kotlin class plugin and kotlin serialization.

Implement OAuth 2 access token handling in a Kotlin Multiplatform Compose app by modeling the access token, building a token provider, persisting tokens with preferences, and authenticating Petfinder API calls.

Build and configure a Ktor HttpClient factory with engine selection, lazy token provider, content negotiation for JSON, timeout, logging, and OAuth2 bearer authentication with token refresh for API calls.

Design a safe network request pattern in Kotlin multiplatform with compose using a sealed response class with loading, success, and error states via ktor.

Learn to implement a cross-platform data store for local preferences using expect/actual, platform-specific paths, and a data store file named 'preferences_pb' across Android, iOS, macOS, Linux, and desktop.

Create a Petfinder api service with a suspend get animals function, returning a flow and handling api errors; configure http client, base url, and animal endpoint in a safe request.

Create domain models for data mapping by converting paid api data into domain objects, including pet photo, pet owner, and pet with id, age, breed, colors, and photos.

Build a domain-dto mapper in a Kotlin multiplatform app by creating an API mapper interface, implementing a pet mapper, and formatting contacts, addresses, and tags for domain data.

Create a domain pet repository with a data implementation that fetches Petfinder data, maps api responses to domain models, and emits a flow of pets with loading and error handling.

Build a service locator graph to provide dependencies for a Kotlin multiplatform app, wiring the Petfinder API service, API mapper, authentication manager, and token provider with platform-specific http engines.

Explore building a common view model for multiplatform apps with Jetpack Compose, using a pet repository, state flow, and dispatchers to manage loading and errors.

Build a home screen composable with state hoisting and unidirectional data flow. Use a scaffold with top and bottom bars, dark theme handling, a lazy column, and material 3 typography.

Develop a home screen featuring a reusable pet item card that loads images with coil, adapts to dark themes, and uses rows, columns, and modifiers for layout.

Build and test a Kotlin multiplatform compose home screen by wiring a view model, collecting state with lifecycle awareness, and addressing runtime crashes via manifest permissions and bounds checks.

Create a custom material 3 theme using the material theme builder, configuring colors and typography, exporting the theme for Android views and Jetpack Compose, then applying it in Android Studio.

Set up a Material3 theme across Android, desktop, and native with light, dark, and dynamic color schemes, typography, and edge-to-edge support.

Create the detailed screen to complement the home screen and enable seamless navigation from one screen to another, delivering a polished UI.

Create a detail screen inside a scaffold with a top app bar and navigation icon. Pass parameters, wire on navigate, and manage a loading state for an image.

Develop a responsive detail user interface with Compose by managing state, loading images, handling dark themes, and building reusable pet info components in a lazy column.

Design a mystery item composable in Kotlin Multiplatform with Compose, reusing a title component and applying text styles, paddings, and a description to build a clean, cross-platform UI.

Create a reusable pet info item composable in Kotlin Multiplatform with Compose, using a surface and info card to display pet age, breed, and an adopt button.

Run the testrun detail screen to verify the app launches safely with non-empty pets, and refine the primary text with a marquee and system padding for a clickable button.

Introduce navigation between screens in Jetpack Compose, moving from one screen to another. Learn how Jetpack Compose navigation connects screens and enables seamless screen-to-screen flows.

Implement type-safe navigation in a Kotlin multiplatform compose app by defining serializable screens for home and detail (with an int index) and wiring a nav host controller.

Determine adaptive navigation in Kotlin Multiplatform with Compose by using the window size class to select bottom navigation, navigation rail, or navigation drawer via a helper.

The testrun app launches, loads successfully, and demonstrates click-to-navigate across items. Opening the browser from Adoptme shows more information, and the adoption action completes with smooth navigation.

Build a custom paginator for Kotlin Multiplatform with Compose by defining a paginator state, a paginator result, and a coroutine-based load next page flow, handling idle, loading, and error states.

Modify the home view model to implement a paginator that loads first and next pages from a repository, observes paginator state, and updates the home state for infinite scrolling.

Implement pagination in compose by adding a list state and detecting bottom scroll to enable infinite scrolling, with a load more button and a loading indicator.

Launch the completed cross-platform Kotlin Multiplatform compose app on iOS, Android, and desktop, configure Gradle runs, and explore Coin for dependencies in the next section.

Explore why dependency injection scales an application, compare libraries, and learn how Coin provides a lightweight, simple solution you can implement easily.

Koin di for pet finder by creating shared and platform modules, binding dependencies such as http client, token provider, repository, api mapper, and view model, and initializing the graph.

Learn to implement local storage in Kotlin multiplatform by using Room on top of SQLite to save favorites, like pets, for easy future reference.

Set up Room database in a Kotlin multiplatform project by adding Gradle dependencies for Room and SQLite, and CSV symbol processing, then define a schema directory and sync the project.

Define a local models entity as a data class, map it to a Room table named pet, and configure a primary key with type converters for custom data types.

Define a data access object as the bridge between Room database and SQLite, using suspend functions, insert and delete operations, on conflict strategies, query, transactions, and flow.

Define a Kotlin multiplatform Room database for the pet finder app by creating an abstract class annotated with @Database, listing entities, and handling versioning and migrations.

Define a multiplatform room database constructor by implementing a platform-specific database definition, suppressing the no actual expect warning, and using factories to create the database differently per platform.

Construct a cross-platform room database using a database factory that builds the database path on Android, iOS, and desktop via context, document directory, and user home paths.

Configure dependency injection with Koin to wire a sqlite database via a database factory, then set up platform modules for Android, desktop, and native, and apply type converters.

Utilize room type converters in a Kotlin Multiplatform project by annotating converter functions, encoding lists to JSON strings and decoding back to lists for database storage.

Explore two-way domain and entity mapping using Kotlin extensions, converting entities to domain models and back, with an extension-based approach for saving to database and handling pet and owner data.

Implement and wire update and query operations in the pet repository using a flow of favorite pets, mapping entities to domain models, and prepare the ViewModel to use the database.

Update the home view model to expose an api function for upset favorite, delete by id, and load all favorites, using coroutines and viewModelScope to manage state.

Create a favorites screen in a Kotlin Multiplatform compose app by building a favorites UI, wiring view model, top bar with back navigation, and loading and deleting favorite items.

Update the home screen composable to handle favorites and navigation by adding a favorite boolean and pet, and introducing a row with an icon button to navigate to favorites.

Update the navigation by passing the view model to screens and handling favorite toggling. Navigate to the favorite and detail screens and support a state-driven three-screen layout.

Run cross-platform tests across Android and iOS to demonstrate Kotlin Multiplatform and Compose in action, launch the app, navigate favorites and details, and save data to a Room database.

Celebrate completing a multi-platform Kotlin project by using Ktor for API communication, destructuring with Kotlin serialization, displaying via Jetpack Compose, and storing with Room and Datastore.