<div align="center"> <img alt="Compose multiplatform charts" src="./screenshots/compose_multiplatform_logo.png"/> <h1>🚀 Example project to show SpaceX data built with Kotlin Multiplatform and Compose UI Multiplatform</h1> </div>

Compose Multiplatform Sample (KMP) that serves as a comprehensive example demonstrating the integration of Compose Multiplatform, GraphQL data consumption, and SQLDelight for local data persistence.

Using data from the GraphQL endpoint SpaceX-GraphQL

Current supported Platforms are:

1. Android
2. Desktop
3. iOS

<img width="800" src="./screenshots/summary.png" />

Features

Home Screen 🚀

• List of SpaceX launches: Displays a list of SpaceX launches retrieved from a GraphQL endpoint.
• Show favorite Launches: retrieve data from local database to show your favorite launches
• Apollo GraphQL Integration: Utilizes GraphQL to fetch and display SpaceX launch data efficiently.
• SQLDelight Integration: Integrates SQLDelight for managing and persisting favorite launch data.
• Responsive UI: Provides a responsive user interface for seamless navigation and interaction across devices.
• Error Handling: Provides informative error messages and graceful handling of network and database errors.

Detail Screen 🛸

• Detailed View: Navigate to a detailed view of each launch for more information.
• Save Favorites: Enables users to save their favorite launches to a SQLDelight database for persistence.

Built With 🛠

• Kotlin Multiplatform
• Compose Multiplatform: Enables cross-platform UI development with JetBrains' Compose framework.
• Koin - DI: Dependency injection framework for Kotlin Multiplatform
• Kotlin Coroutines: Provides asynchronous programming utilities in Kotlin.
• SQLDelight: Generates Kotlin APIs from SQL statements for safer database interactions.
• Apollo GraphQL: Offers client-side tools for consuming GraphQL APIs.
• Kotlin Multiplatform Navigation: Provides navigation components for Kotlin Multiplatform projects using Compose.
• Kotlin Multiplatform ViewModel: Manages UI-related data and state in Kotlin Multiplatform projects using Compose.
• ConstraintLayout Multiplatform: Brings ConstraintLayout functionality to Kotlin Multiplatform projects with Compose.
• Coil: Efficient image loading library for Compose multiplatform projects.
• Logger: Logging library for Kotlin Multiplatform projects.
• Unit Tests: Automated tests to verify the behavior of individual code units.

Android 🤖

| <img width="240" src="./screenshots/android/home.png" /> | <img width="240" src="./screenshots/android/detail.png" /> | <img width="240" src="./screenshots/android/loading.png" /> | |-------------------------------------------------------------|--------------------------------------------------------------|---------------------------------------------------------------| | <img width="240" src="./screenshots/android/graph.png" /> | | |

Desktop 🖥️

To execute the Desktop app run this gradle command:

./gradlew desktop:run

| <img width="240" src="./screenshots/desktop/home.png" /> | <img width="240" src="./screenshots/desktop/detail.png" /> | <img width="240" src="./screenshots/desktop/loading.png" /> | |-------------------------------------------------------------|--------------------------------------------------------------|---------------------------------------------------------------| | <img width="240" src="./screenshots/desktop/graph.png" /> | | |

iOS 🍎

Steps to setup your iOS app:

1. Create your iosApp using XCode
2. Add to your Build phases

cd "$SRCROOT/.."
./gradlew :modules:feature-home-shared:embedAndSignAppleFrameworkForXcode

<img width="800" src="./screenshots/ios/buildPhases.png" />

3. Add to Search Paths:

$(SRCROOT)/../modules/feature-home-shared/build/xcode-frameworks/$(CONFIGURATION)/$(SDK_NAME)

More details JetBrains official documentation

| <img width="240" src="./screenshots/ios/home.png" /> | <img width="240" src="./screenshots/ios/detail.png" /> | <img width="240" src="./screenshots/ios/loading.png" /> | |-------------------------------------------------------------|--------------------------------------------------------------|---------------------------------------------------------------| | <img width="240" src="./screenshots/ios/graph.png" /> | | |

Get the latest version of the GraphQL schema

./gradlew :module:library-network-api:downloadApolloSchemaFromIntrospection

Contributing 🤝

Issues or Pull request for any bugs/improvements are well received