# 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](https://speednet.pl/kotlin-multiplatform-expectations-vs-reality-for-ios-and-android/), 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](https://github.com/mkonkel/GameShop)

## **Let’s start from scratch…**

… and use the project configuration wizard from [JetBrains](https://kmp.jetbrains.com/). 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.

![](https://speednet.pl/app/uploads/2024/01/Screenshot-2024-01-30-at-05.35.08-526x1024.png align="left")

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).

![](https://speednet.pl/app/uploads/2023/12/Screenshot-2023-11-16-at-21.59.09-2.png align="left")

![](https://speednet.pl/app/uploads/2023/12/Screenshot-2023-11-16-at-21.59.21-3.png align="left")

**Customizing the Web run**

We can add one thing in the **composeApp**`build.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.

```kotlin
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](https://kotlinlang.org/docs/wasm-get-started.html#troubleshooting).

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1720845957286/35c5d74a-c0cf-42ee-961d-85096d0cb860.gif align="center")

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](https://hashnode.com/post/clyichel900030al14zpe4e4i) – 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!