Kotlin Multiplatformで作る Luckin Coffee クローン
概要
Kotlin MultiplatformとCompose Multiplatformを組み合わせ、Luckin Coffeeアプリの見た目と操作感を再現したクローンプロジェクトです。1つのコードベースからAndroid・iOS・Web・Desktop向けにUIを共有することを目標としており、アニメーション、カード/カルーセル表示、モダンな配色やレイアウトといった「プレミアムなUI表現」に重点が置かれています。実装はUI寄りのサンプルが中心で、Composeの力を活かした画面構築やクロスプラットフォーム戦略の学習用途に最適です。
リポジトリの統計情報
- スター数: 51
- フォーク数: 20
- ウォッチャー数: 51
- コミット数: 3
- ファイル数: 8
- メインの言語: Kotlin
主な特徴
- Kotlin Multiplatform + Compose Multiplatformを用いた単一コードベースでのUI共有
- アニメーション、カルーセル、カードベースのプレミアムUI表現
- Android/iOS/Web/Desktopの4プラットフォーム対応を想定
- 学習用途やプロトタイピングに適したシンプル構成
技術的なポイント
本リポジトリは、Kotlin 2系とCompose Multiplatformを中心に据えたUIサンプルとして設計されています。Composeを使うことで宣言的にUIを記述し、状態管理やアニメーションを自然に組み込める点が大きな利点です。Kotlin Multiplatform(KMP)の活用により、ビジネスロジックやUIの一部を共有モジュールに配置し、各プラットフォーム固有の差分はプラットフォームモジュールで吸収する構成がとれます。本リポジトリでは特に「Composeでの見た目再現」に注力しており、カルーセルやカード、グラデーション、影などのビジュアル表現をComposeのModifierやアニメーションAPIで実現しています。
具体的には、Composeのレイアウト(Column/Row/Box)とModifierチェーンでレスポンシブな配置を行い、animate*系APIで滑らかなインタラクションを実装します。マルチプラットフォーム対応のために、共通コードでUIロジックを可能な限り抽象化し、プラットフォームごとの入力やレンダリング差分を最小化する方針が見て取れます。プロジェクトの依存管理はGradle Kotlin DSL(build.gradle.kts)で行われ、Compose Multiplatformのバージョンを指定して複数ターゲットをビルドする典型的な構成です。
ただし、コミット数が少なくファイル数も限定的なため、完全な実運用向けの構成(CI、テスト、モジュール分割の厳密な設計など)は整っていません。あくまで実例・プロトタイプとして、Composeの表現力やKMPを用いたクロスプラットフォームUI戦略を学ぶための良い出発点となるリポジトリです。実際にプロジェクトを発展させる際は、テストとプラットフォーム固有の実装(ステートハンドリング、ナビゲーション、アクセシビリティ対応など)を追加することを推奨します。
プロジェクトの構成
主要なファイルとディレクトリ:
- .gitignore: file
- README.md: file
- build.gradle.kts: file
- composeApp: dir
- gradle.properties: file
…他 3 ファイル
composeAppディレクトリにはComposeで書かれたUIコードやリソースが含まれている想定で、共通モジュールとプラットフォーム固有モジュールを分ける典型的なKMP+Compose構成になっています。ビルドはGradleで統一されており、設定はbuild.gradle.ktsで管理されています。
まとめ
Compose MultiplatformでのUI共有を学ぶための、視覚表現に優れた良質なサンプルプロジェクトです(約50字)。
リポジトリ情報:
- 名前: kmp-luckin-coffee-clone
- 説明: Kotlin Multiplatform Luckin Coffee clone with Compose Multiplatform - Premium UI with animations, carousels, and modern design patterns
- スター数: 51
- 言語: Kotlin
- URL: https://github.com/salem98/kmp-luckin-coffee-clone
- オーナー: salem98
- アバター: https://avatars.githubusercontent.com/u/39935119?v=4
READMEの抜粋: