Complete Guide to Becoming a Fullstack Kotlin Developer - project setup

When perusing job listings, you’ll often come across the ubiquitous phrase “Fullstack developer wanted.” If you are a mobile developer with a good Kotlin background, you are about one step away from becoming a full-stack Kotlin developer. That superpower is at your fingertips, so grab it!

In this blog series, I would like to show you how to create a Kotlin multiplatform project based on Compose Multiplatform that will share common business logic and UI with Android, iOS, and Web applications. Moreover, we will use the same shared business logic on the backend side of our KTOR application. We can share API interfaces, domain objects, validation rules, and more!

So… as everyone knows, the beginnings can be tough, but the results of your work will be absolutely astonishing! Let me guide you through the project setup that will be our foundation for amazing future development.

The complete project is avaiable on GitHub

Let’s start from scratch…

… and use the project configuration wizard from JetBrains. Check Android, iOS, and Backend, fill in the project name and ID, and click download. Run this project from the latest version of Android Studio or IntelliJ.

In our Kotlin Multiplatform project, we need to use the latest compose-plugin with warm support, which is still experimental (at the time of writing this blog post, the most recent version is 1.6.0-alpha01). Add it to the project and sync it. The compose plugin version is in the gradle folder in the libs.versions.toml, where all dependencies are located.

While the project is syncing, we can inspect the generated template. It is divided into two main sections: shared and composeApp. ComposeApp is for the code holding our applications’ Compose Multiplatform code (mostly UI).

These subfolders correspond to the targets for which we will be launching the application:

• commonMain is shared code for all platforms

• IosMain is for iOS-specific code e.g. apple cryptography

• androidMain is for Android code

• WasmJsMain is for WebAssembly code

The same rules apply to the shared module where we will hold our business/domain logic, API requests, and responses, or even the HTTP client. If there is a need to add specific behaviors depending on the platform, we can also use some of the generated subfolders.

The server module is a place where the KTOR backend application is located. It is independent and does not use code from composeApp or shared. If we properly structure our code with some additional modules, then we can share part of it even with the backend application (for example, some API models).

Last but not least…

… is the iOSApp module, which contains an iOS application. It’s an entry point for running the application on Apple devices and a place for the SwiftUI code to be added (if needed).

Customizing the Web run

We can add one thing in the composeAppbuild.gradle.kts that will run our desired browser for the wasm application; we need to locate the wasmJs code block and add Google Chrome dev (or another browser) as a starting point.

wasmJs { 
    moduleName = “gameshopwasmapp” 
    browser { 
        commonWebpackConfig { 
            outputFileName = “gameshopwasmapp.js” 
            devServer = (devServer ?: KotlinWebpackConfig.DevServer()).apply { 
                open = mapOf( 
                    “app” to mapOf( 
                        “name” to “google chrome dev” 
                    ) 
                ) 
            } 
        } 
    } 
    binaries.executable() 
}

Before launching the WASM application, we need to enable its support in our browser. Please follow these instructions.

Now, we can use the ./gradlew :composeApp:wasmJsBrowserDevelopmentRun command to run our application in the browser. To run the Android and iOS apps, you must start the appropriate Android Studio configurations.

If everything goes well, you can see something like this: click the button to see how the UI changes

Running the generated project was straightforward. We almost did nothing to make it run. This is a great point to start your project. Get benefits from writing code once and covering three platforms. In the next post, we will add some code to the backend application based on my previous post about the KTOR – we will extend the existing GameShop with the mobile and frontend applications.

In the following articles, I will dive deep into the KTOR Server and Client setup for our application. We will explore the app architecture using the Decompose library, which helps in managing the lifecycle and state of our components efficiently. Additionally, we will cover the Compose Multiplatform UI, which allows us to create beautiful and responsive user interfaces for client applications across different platforms. We will provide step-by-step guides, code snippets, and best practices to ensure you can implement these features seamlessly.

Stay tuned!