Skip to content

rajedev/CMPChatViewPractice

Repository files navigation

💬 Chat App UI on Compose MultiPlatform - Practice - Clean Architecture

A world-class Kotlin Multiplatform chat application demonstrating Clean Architecture principles with Component-Based UI design.

Kotlin Compose Multiplatform Clean Architecture Material 3

Features

  • 🎯 Clean Architecture with proper layer separation
  • 🧩 Component-Based UI with 6 reusable components
  • 💬 Real-time messaging with mock smart auto-responses
  • Animated typing indicators with smooth transitions
  • 👥 User switching to simulate conversations
  • 🎨 Material 3 Design with custom theming
  • 📱 Cross-platform (Android & iOS ready)

🏗️ Architecture

src/commonMain/kotlin/org/cmppractice/app/
├── 🎯 domain/              # Pure Business Logic
│   ├── model/              # Domain entities
│   ├── repository/         # Repository interfaces
│   └── usecase/            # Business use cases
├── 💾 data/                # Data Access Layer
│   ├── di/                 # Data dependencies
│   ├── model/              # Data entities (DTOs)
│   ├── mapper/             # Data ↔ Domain mapping
│   └── repository/         # Repository implementations
├── 🎨 presentation/        # UI Layer
│   ├── component/          # 6 Reusable UI components
│   ├── screen/             # Screen composables
│   ├── viewmodel/          # State management
│   ├── theme/              # Material 3 theming
│   └── di/                 # UI dependencies
└── 🚀 App.kt              # Composition root

🚀 Quick Start

Prerequisites

  • Android Studio Hedgehog+ (2023.1.1+)
  • JDK 17+
  • Android SDK 35+

Run the App

# Clone the repository
git clone https://github.com/yourusername/CMPPractice.git
cd CMPPractice

# Run on Android
./gradlew :composeApp:installDebug

# Or open in Android Studio and run

📱 Demo

  1. Send Messages: Type and send messages as User1
  2. Smart Responses: Watch auto-responses from User2
  3. Switch Users: Tap the person icon to switch perspectives
  4. Typing Indicator: See animated typing feedback
  5. Clear Chat: Use the clear button to reset

🎯 Key Benefits

  • Maintainable: Clear separation of concerns
  • Testable: Each layer independently testable
  • Scalable: Easy to add features
  • Reusable: Components work across screens
  • Professional: Industry best practices

📚 Documentation

Detailed documentation is available in the docs/ folder:

🛠️ Tech Stack

  • Language: Kotlin 2.2.0
  • UI Framework: Compose Multiplatform 1.8.2
  • Architecture: Clean Architecture + MVI (State & Event)
  • Design System: Material 3
  • State Management: Flow + StateFlow
  • Dependency Injection: Manual DI with modules
  • Testing: Kotlin Test + Coroutines Test

🎨 Screenshots

📱 UI - iOS & Android

Chat App - iOS and Android

The chat application running on both iOS and Android platforms, showcasing the unified Material 3 design and responsive UI components.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments


⭐ Star this repo if you found it helpful!

Contributors