Travel APP (Compose Multiplatform)

Travel App demonstrate the use of Compose Multiplatform for developing IOS, Android, MacOS, Window & Web applications using Jetpack Compose 🚀.

<img width="90%" alt="Cover-Travel-App-KMM" src="https://github.com/Realtime-Coding/TravelAppKMM/assets/21146457/a3d06c1e-cfa8-4b4f-99e0-4bb8288a37c9">

📱 Preview

Currently, the app looks like this on platforms:

▶️ Android, IOS & Desktop

https://drive.google.com/file/d/1aDrhqpvc4XUdEaO-6aBZrE6HRFglDnl_/view?usp=sharing

---

Built with

• Kotlin: Programming language
• Kotlin Multiplatform: For building multi-platform applications in the single codebase.
• Jetpack/JetBrains Compose Multiplatform: For a shared UI between multi-platforms i.e. IOS, Android, MacOS, Window and Web in this project.
• Compose Resource: Compose Resource is a structured approach for managing and accessing UI resources (such as strings, colors, and images) in Jetpack Compose across multiple platforms. When used in conjunction with libraries like Moko Resources, it allows for a unified and type-safe way to work with localized and platform-specific assets in Kotlin Multiplatform projects. This setup ensures that resources are accessible in a Compose-friendly way across Android, iOS, macOS, the JVM, and JS (Browser), with full support for system localization and consistent design.
• Compose Image Loader: Compose Image library for Kotlin Multiplatform.

TODOs

✅ Completed

• [x] Home screen UI.
• [x] Destination Detail screen UI.
• [x] Favorite Detail screen UI.
• [x] Coil(Image loading from Url).
• [x] Bottom Navigation Menu.
• [x] Compose resources e-g images, strings and fonts.
• [x] Voyager (Navigation).
• [x] Cart Screen Design.
• [x] Gemini Chat Screen Design.
• [x] Support for MacOS, Window, Web.
• [x] CI/CD Configure for IOS, Android, MacOS, Window, Web.
• [x] CI/CD generate artifacts to download
• [x] CI/CD to publish web app on github pages

🚧 Work in progress

• [ ] Room setup for adding favorites.
• [ ] Switch for dark/light theme.
• [ ] Shifting content to github repo then fetch details through ktor client library.
• [ ] MVVM Implementation
• [ ] Testing

Project structure

This Compose Multiplatform project includes three modules:

composeApp

This is a Kotlin module that contains the common UI/logic for both Android and iOS applications, the code you share between platforms. This shared module is also where you write your Compose Multiplatform code. In composeApp/src/commonMain/kotlin/App.kt, you can find the shared root @Composable function for your app. It uses Gradle as the build system. You can add dependencies and change settings in composeApp/build.gradle.kts. The shared module builds into an Android library and an iOS framework.

iosApp

This is an Xcode project that builds into an iOS application. It depends on and uses the shared module as a CocoaPods dependency.

Setting up project 👨🏻‍💻

• Refer to the "Setting up environment" section of this repository for knowing the setup guidelines
• After validating requirements as per the above guide, clone this repository.
• Open this project in Android Studio Electric Eel or newer version.
• Build project 🔨 and see if everything is working fine.
• Run App
  • Select "androidApp" as run configuration and you'll be able to run the Android app.
  • Select "iosApp" as run configuration and you'll be able to run the iOS app (XCode can also be used to run the app).
  • Desktop <img width="968" alt="Screenshot 2024-07-24 at 1 29 16 PM" src="https://github.com/user-attachments/assets/69bc6a8d-f169-402d-ac73-05c3af821f26"> <img width="353" alt="Screenshot 2024-07-24 at 1 29 49 PM" src="https://github.com/user-attachments/assets/e423e531-ab38-4a79-b716-f02fd40b2660">

---

Contribute

If you want to contribute to this library, you're always welcome!

Acknowledgements

• Philipp Lackner - How to Share Resources in KMM (Strings, Images, etc.): For understanding Share resources
• Fimga Design By Michelle Setiyanti: For cloning the design into compose.

Want to create Project in KMM? Step by Step Documentations

Notion file: Documentations