Mova

Movie Showcase App Using Compose Multiplatform
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Tech Stack
2. Getting Started
   • Set up the environment
   • Check your environment
3. Examine the project structure
   • kmm
   • app
   • iosApp
4. Run the Application
   • On Android
   • On IOS
     • Running on a simulator
     • Running on a real device
5. Screenshots
6. Roadmap
7. Contributing
8. License
9. Contact

About The Project

Mova is a multiplatform movie showcase application that allows users to search and explore movies using The Movie Database API. It also provides authentication features, allowing users to create and manage their accounts within the app. The app is built using Compose Multiplatform, a UI toolkit from JetBrains that enables the creation of cross-platform native applications using a single codebase.

(back to top)

Tech Stack

• Compose Multiplatform
• Koin
• Ktor
• Voyager - Navigation Library
• Firebase Authentication
• Coil - Android Only
• Beagle - Debug/Android Only

UI Design Inspiration

• Mova - Movie Streaming App UI Kit Community Edition

(back to top)

Getting Started

Set up the environment

Warning You need a Mac with macOS to write and run iOS-specific code on simulated or real devices. This is an Apple requirement. To work with this project, you need the following:

• A machine running a recent version of macOS
• Xcode
• Android Studio
• The Kotlin Multiplatform Mobile plugin
• The CocoaPods dependency manager

Check your environment

Before you start, use the KDoctor tool to ensure that your development environment is configured correctly:

1. Install KDoctor with Homebrew:

   brew install kdoctor
   

2. Run KDoctor in your terminal:

   kdoctor
   

   If everything is set up correctly, you'll see valid output:

   Environment diagnose (to see all details, use -v option):
   [✓] Operation System
   [✓] Java
   [✓] Android Studio
   [✓] Xcode
   [✓] Cocoapods
   
   Conclusion:
     ✓ Your system is ready for Kotlin Multiplatform Mobile development!
   

Otherwise, KDoctor will highlight which parts of your setup still need to be configured and will suggest a way to fix them.

(back to top)

Examine the project structure

Open the project in Android Studio and switch the view from Android to Project to see all the files and targets belonging to the project:

The App includes 3 main modules:

kmm

This is a Kotlin module that contains the logic common for both Android and iOS applications,

Under the kmm you can find the following modules:

• kmm/service Provides data for the application. This is the module witch contains third-party service intergation, like Firebase.

• kmm/domain Responsible for the app's business logic, contains the UseCases.

• kmm/shared: This is a Kotlin module that contains the logic common for both Android and iOS applications, that is, the shared code & entry point between platforms.
  This kmm/shared module is also where is the Compose Multiplatform code. In kmm/shared/src/commonMain/kotlin/, you can find the shared @Composable functions for the app.
  It uses Gradle as the build system. You can add dependencies and change settings in kmm/shared/build.gradle.kts. The kmm/shared module builds into an Android library and an iOS framework.

app

This is a Kotlin module that builds into an Android application. It uses Gradle as the build system. The android module depends on and uses the kmm/shared module as a regular Android library.

iosApp

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

(back to top)

Run the Application

On Android

To run the application on an Android emulator:

1. Ensure you have an Android virtual device available. Otherwise, create one.

2. In the list of run configurations, select app.

3. Choose your virtual device and click Run:

   
   

Alternatively, use Gradle

To install an Android application on a real Android device or an emulator, run ./gradlew installDebug in the terminal.

On iOS

Running on a simulator

To run the application on an iOS simulator in Android Studio, modify the iosApp run configuration:

1. In the list of run configurations, select Edit Configurations:

   

2. Navigate to iOS Application | iosApp.

3. In the Execution target list, select your target device. Click OK:

   

4. The iosApp run configuration is now available. Click Run next to your virtual device:

Running on a real device

You can run a Compose Multiplatform application on a real iOS device for free. To do so, you'll need the following:

• The TEAM_ID associated with your Apple ID
• The iOS device registered in Xcode

Note Before you continue, we suggest creating a simple "Hello, world!" project in Xcode to ensure you can successfully run apps on your device. You can follow the instructions below or watch this Stanford CS193P lecture recording.

How to create and run a simple project in Xcode

1. On the Xcode welcome screen, select Create a new project in Xcode.
2. On the iOS tab, choose the App template. Click Next.
3. Specify the product name and keep other settings default. Click Next.
4. Select where to store the project on your computer and click Create. You'll see an app that displays "Hello, world!" on the device screen.
5. At the top of your Xcode screen, click on the device name near the Run button.
6. Plug your device into the computer. You'll see this device in the list of run options.
7. Choose your device and click Run.

(back to top)

Finding your Team ID

In the terminal, run kdoctor --team-ids to find your Team ID. KDoctor will list all Team IDs currently configured on your system, for example:

3ABC246XYZ (Max Sample)
ZABCW6SXYZ (SampleTech Inc.)

Alternative way to find your Team ID

If KDoctor doesn't work for you, try this alternative method:

1. In Android Studio, run the iosApp configuration with the selected real device. The build should fail.
2. Go to Xcode and select Open a project or file.
3. Navigate to the iosApp/iosApp.xcworkspace file of your project.
4. In the left-hand menu, select iosApp.
5. Navigate to Signing & Capabilities.
6. In the Team list, select your team.

If you haven't set up your team yet, use the Add account option and follow the steps.

To run the application, set the TEAM_ID:

1. In the template, navigate to the iosApp/Configuration/Config.xcconfig file.
2. Set your TEAM_ID.
3. Re-open the project in Android Studio. It should show the registered iOS device in the iosApp run configuration.

(back to top)

Screenshots

(back to top)

Roadmap

• Convert the existing android app to Kotlin Multiplatform
• Convert the UI into Compose Multiplatform
• Convert Firebase into Multiplatform
• Handle back navigation on IOS
• Implement Social Login (Google/Facebook) on IOS
• Improve Resources with MOKO library
• Implement Offline support using SQLDelight
• Implement for Web

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

This software is licensed under GNU GPL 3.0. Any derivative works must follow the same open-source license.

(back to top)

Contact

Your Name - @zsolt_barabasi - barabasi.robert.zsolt@gmail.com

Project Link: https://github.com/barabasizsolt/Mova

(back to top)