Skip to content

YouTube clone using Kotlin Multiplatform. It supports the Android, iOS, Web and Desktop Application. A better version of Original Applications.

License

Notifications You must be signed in to change notification settings

KhubaibKhan4/Youtube-Clone-KMP

YouTube Clone Kotlin Multiplatform

YouTube Clone KMP

Overview

YouTube Clone KMP is a sophisticated project developed using Kotlin Multiplatform (KMP), enabling the creation of versatile applications across Android, iOS, Web, and Desktop platforms with shared code. This comprehensive YouTube clone mirrors the functionalities of the official YouTube app, offering a seamless user experience across various devices. A Better Version of Original App (A Big Bold Claim).

🚀 Key Features

  • Cross-Platform Compatibility (Android, iOS, Web & Desktop Applications)
  • Video Playback
  • Sharing Options
  • Download Capability
  • Playlist Viewing
  • Comprehensive Search
  • Video Detail
  • Trending Videos
  • Shorts With Reels view
  • Subscribe Channels
  • View Verified Channel Badges
  • Quick & Responsive Search for Videos & Channels
  • Channel Base Search
  • Comments Support
  • Offline Video Support
  • Smooth Interaction
  • Responsive UI
  • Latest Devices Compactiblity
  • Material Design Components
  • Server Driven Ui

🔥 Additional Features

  • Top Videos
  • Shorts Videos
  • Video Details
  • Channel Screen
  • Channel Home
  • Live Streams
  • Community
  • Playlists
  • Channel Details Screen
  • Share Channel, Videos, and Shorts
  • Like and Comment Features
  • Download Videos
  • Relevance Videos
  • Subscriptions
  • Library
  • Channel, Category and General Search.
  • Shimmer Loading Screen
  • Top Categories
  • Navigation Rail for Foldable Devices
  • Desktop and Web Version Support
  • YouTube Widgets on Android.
  • Channel Video Search
  • Pull to refresh.

🚀 Future Plans

  • TV and Wear OS Versions
  • Integration of Custom Server.
  • Custom UI Sdk
  • FCM Support
  • Video Caching Support

🌟 Contributions

If you wanna contribute, Please make sure to add new features & Then make a PR.Feel free to contribute to the project and stay tuned for more exciting updates!

Open To Work

Do you wanna Convert your thoughts into Physicall & Successfull Project Then I'm here for you. I'm open to work, available for Freelance or Remote Work Opportunities. Feel free to reach me out on Email.

Tech Stack Highlights

  • Kotlin Multiplatform: 2.0.0
  • AGP (Android Gradle Plugin): 8.2.2
  • Compose: 1.7.1
    • androidx-appcompat: 1.7.0
    • androidx-activityCompose: 1.9.3
    • compose-uitooling: 1.7.4
    • composeImageLoader: 1.7.1
  • Core Libraries: 12.1.0
  • Kotlinx Libraries:
    • kotlinx-coroutines: 1.9.0
    • kotlinx-serialization: 1.7.3
    • kotlinx-datetime: 0.6.1
  • Networking:
    • ktor: 3.0.1
  • Dependency Injection:
    • koin: 4.0.0
    • koinComposeMultiplatform: 4.0.0
  • UI/UX:
    • compose-uitooling: 1.9.3
  • Media Handling:
    • media3Ui: 1.4.1
    • media3ExoplayerDash: 1.4.1
    • media3Exoplayer: 1.4.1
  • Logging:
    • napier: 2.7.1
  • Database/Storage:
    • sql-delight: 2.0.2
  • JSON Parsing:
    • json: 1.6.3
  • Build Configurations:
    • buildConfig: 5.3.5
  • Cross-Platform Image Loading:
    • kamelImage: 1.0.1
    • kamelDefault: 1.0.1
  • Size Measurement:
    • size: 0.5.0
  • Firebase Bom
    • firebase-bom:33.5.1
  • Voyager Navigation: 1.1.0-beta03
  • Other Utilities:
    • official-viewmodel: 2.8.0-alpha10
    • compose-navigagtion: 2.8.3
  • JavaFX: 22-ea+16
  • AlertKMP: 1.0.7
  • MediaPlayer-KMP: 2.0.2

Getting Started

To use the app, follow these steps:

  1. Create YouTube API V3 credentials:

    • Navigate to the Google Cloud Console.
    • Create a new project or select an existing one.
    • Enable the YouTube Data API v3 for your project.
    • Generate an API key for your project.
  2. Add the credentials to composeApp/src/kotlin/com/company/app/utils/:

    • Open the Constant.kt file in your project.
    • Add the following line: API_KEY=Your_API_VALUE, replacing Your_API_VALUE with the API key generated in step 1.
  3. Ensure API Key Security:

    • Restrict your API key to prevent unauthorized usage.
    • Configure API key restrictions based on IP addresses, referrers, or Android app signatures to enhance security.
  4. Integrate API Key into the App:

    • Use the BuildConfig.API_KEY variable in your code to access the API key securely. (Removed for Now, due to some bugs)
    • Ensure that the API key is not hard-coded or exposed directly in your source code.
  5. Download Videos Setup

    • Use yt-dlp to perform download operation in the applications.
    • Download the yt-dlp.exe file from the official Repository and place that into you Mac, Linux & Windows and just provide it's path in the actual class VideoDownloader in each platforms.
  6. Start Using the App:

    • Build and run your app to start utilizing the YouTube Data API functionalities.
    • Implement features such as video search, playback, playlists, and more using the API key.

Feel free to reach out if you have any questions or need further assistance on the Discussion Tab!

🤝 Connect with Me

Let's chat about potential projects, job opportunities, or any other collaboration! Feel free to connect with me through the following channels:

LinkedIn Twitter Email

Download Installers

Web Preview

If you want to the live version of YouTube Clone KMP then checkout:

 https://khubaibkhan4.github.io/Youtube-Clone-KMP/

Android Screen Shots

Screenshot 1 Screenshot 2 Screenshot 3
Screenshot 4 Screenshot 5 Screenshot 6
Screenshot 7 Screenshot 8 Screenshot 9
Screenshot 10 Screenshot 11 Screenshot 12
Screenshot 13 Screenshot 14 Screenshot 15
Screenshot 16 Screenshot 17 Screenshot 18
Screenshot 19 Screenshot 20 Screenshot 21
Screenshot 22 Screenshot 23 Screenshot 24
Screenshot 25 Screenshot 26 Screenshot 27
Screenshot 28 Screenshot 29 Screenshot 30
Screenshot 31 Screenshot 32 Screenshot 33
Screenshot 34 Screenshot 34 Screenshot 34

iOS Screen Shots

Desktop Screen Shots

Screenshot 1
Screenshot 2
Screenshot 3
Screenshot 4
Screenshot 5
Screenshot 6
Screenshot 7
Screenshot 8
Screenshot 9
Screenshot 10
Screenshot 11
Screenshot 12
Screenshot 13
Screenshot 14
Screenshot 15
Screenshot 16
Screenshot 17
Screenshot 18
Screenshot 19
Screenshot 20
Screenshot 21
Screenshot 22
Screenshot 23
Screenshot 24
Screenshot 25
Screenshot 26
Screenshot 27
Screenshot 28
Screenshot 29

Web Screen Shots

Screenshot 1
Screenshot 2
Screenshot 3
Screenshot 4
Screenshot 4
Screenshot 4
Screenshot 4
Screenshot 4
Screenshot 4
Screenshot 4
Screenshot 4
Screenshot 4

Server Driven Ui Setup

To Setup the Server Driven UI using Firebase. You need to create a new firebase project and add Android, iOS, Web And Desktop inside your project. Make sure to provide the .json file in Your commonMain & also inside your iOS App as well. Moreover, Provide the projectId, apiKey, applicationId inside your jsMain & jvmMain Modules.

Star History

Star History Chart

Before running!

  • check your system with KDoctor
  • install JDK 17 on your machine
  • add local.properties file to the project root and set a path to Android SDK there
  • Make sure to Complete the Installation of Compose Multiplatform Before using this Project.
  • Official Setup Guide: ![Official KMP Setup Guide]

Android

To run the application on android device/emulator:

  • open project in Android Studio and run imported android run configuration

To build the application bundle:

  • run ./gradlew :composeApp:assembleDebug
  • find .apk file in composeApp/build/outputs/apk/debug/composeApp-debug.apk

Desktop

Run the desktop application: ./gradlew :composeApp:run

iOS

To run the application on iPhone device/simulator:

Browser

Run the browser application: ./gradlew :composeApp:jsBrowserDevelopmentRun

Create Native Distributables

Android

  • to create .apk file for the Andorid. We simply need to 'build > Build Bundles > Build APK'.

Desktop

  • to create Native Distributable for the Desktop Windows, MacOS, Linux. We need to follow the procedure.

  • 'First of all following inside the 'build.gradle.kts' ' compose.desktop { application { mainClass = "MainKt"

      nativeDistributions {
          targetFormats(TargetFormat.Dmg, TargetFormat.Msi, TargetFormat.Deb)
          packageName = "org.company.app.desktopApp"
          packageVersion = "1.0.0"
          description = "YouTube Clone Using Kotlin Multiplatform"
          copyright = "© 2024 Muhammad Khubaib Imtiaz. All rights reserved."
          windows {
              iconFile.set(project.file("src/commonMain/resources/youtube_music.ico"))
          }
          macOS {
              iconFile.set(project.file("src/commonMain/resources/youtube_music.icns"))
          }
          linux {
              iconFile.set(project.file("src/commonMain/resources/youtube_music.png"))
          }
      }
    

    } } '

  • Now simply run the command 'gradle createDistributable or ./gradlew createDistributable'

JS

  • for the Js Web App, we simply need to execute the 'gradle jsBrowserWebpack'

Contribution Guidelines

We welcome contributions to the YouTube Clone project! To contribute, please follow these guidelines:

  • Reporting Bugs: If you encounter a bug, please open an issue and provide detailed information about the bug, including steps to reproduce it.
  • Suggesting Features: We encourage you to suggest new features or improvements by opening an issue and describing your idea.
  • Submitting Pull Requests: If you'd like to contribute code, please fork the repository, create a new branch for your changes, and submit a pull request with a clear description of the changes.

Code of Conduct

We expect all contributors and users of the YouTube Clone project to adhere to our code of conduct. Please review the Code of Conduct for details on expected behavior and reporting procedures.

Project Roadmap

Here's a brief overview of our project roadmap:

  • Upcoming Features: We're planning to add support for TV and Wear OS versions in future releases.
  • Milestones: We'll be releasing updates regularly to introduce new features and enhancements. Stay tuned for announcements about upcoming releases.

Community Resources

Join our community to connect with other users and contributors:

  • Documentation: Find more information and resources in our documentation.
  • Forums: Ask questions and discuss ideas in our community forums.
  • Chat: Join our community chat on Slack to chat with other users and contributors.

Acknowledgments

We'd like to thank the following individuals and organizations for their contributions to the YouTube Clone project:

  • No Contributor Yet.
  • Checkout Other cool projects on my profile as well.

Stargazers

Stargazers repo roster for @KhubaibKhan4/Youtube-Clone-KMP

Forkers

Forkers repo roster for @KhubaibKhan4/Youtube-Clone-KMP

FAQs

Here are some frequently asked questions about the YouTube Clone project:

  1. How do I run the application on Android?

    • Follow the instructions in the README to set up your development environment and run the app on an Android device or emulator.
  2. Can I contribute to the project if I'm new to Kotlin Multiplatform?

    • Yes! We welcome contributions from developers of all skill levels. Check out our Contribution Guidelines for more information on how to get started.

Performance & Optimization Tips

To optimize performance in the YouTube Clone project, consider the following tips:

  • Lazy Loading: Implement lazy loading for images and videos to reduce initial load times.
  • Cache Optimization: Use caching strategies to minimize network requests and improve data loading performance.
  • Code Profiling: Profile your code to identify and optimize performance bottlenecks.
  • Resource Management: Ensure efficient use of system resources, such as memory and CPU, to improve overall performance.

Disclaimer

This project is for educational purposes. All the Design Credit Goes to YouTube Official Team.