Skip to content
/ KMP-ECommerce Public

Compose Multiplatform App for Andorid, iOS, Desktop and Web

2 stars 2 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

azlaan95/KMP-ECommerce

BranchesTags

Repository files navigation

KMP E-Commerce App

A comprehensive Kotlin Multiplatform E-Commerce Application built with Compose Multiplatform, targeting Android, iOS, Desktop, and Web platforms.

🏗️ Project Architecture

This project follows Clean Architecture principles with clear separation of concerns:

Domain Layer (domain/)

  • Entities: Core business models (Product, Cart, User, Category, etc.)
  • Use Cases: Business logic operations (Login, Product fetching, Cart management)
  • Repositories: Abstract interfaces for data access
  • Utils: Common utilities like Result wrapper for error handling

Data Layer (data/)

  • Remote API: HTTP client implementations using Ktor
  • Local Storage: Platform-specific secure storage implementations
  • Repository Implementations: Concrete implementations of domain repositories
  • DTOs & Converters: Data transfer objects and mapping logic

Presentation Layer (presentation/)

  • Screens: Compose UI screens for different features
  • ViewModels: State management using Compose ViewModel
  • Navigation: Type-safe navigation using Compose Navigation
  • UI Components: Reusable UI components

🎯 Target Platforms

Android (androidMain/)

  • Native Android app with Material Design 3
  • Uses Android-specific dependencies like ktor-client-android
  • Secure storage via androidx.security.crypto

iOS (iosMain/)

  • Native iOS app framework
  • Uses Darwin-specific Ktor client
  • Platform-specific secure storage implementation

Desktop (desktopMain/)

  • Desktop application using Compose Desktop
  • Supports Windows (MSI), macOS (DMG), and Linux (DEB) distributions
  • Uses Java-based Ktor client

Web (wasmJsMain/)

  • Web application compiled to WebAssembly
  • Modern web deployment with Kotlin/Wasm
  • Accessible via browser

📦 Key Dependencies & Technologies

Core Framework

  • Kotlin Multiplatform (2.2.0): Cross-platform development
  • Compose Multiplatform (1.8.2): Declarative UI framework
  • Compose Hot Reload (1.0.0-alpha11): Development productivity

Networking & Serialization

  • Ktor Client (3.0.3): HTTP client for API communication
    • ktor-client-core: Core HTTP functionality
    • ktor-client-content-negotiation: JSON serialization
    • ktor-serialization-kotlinx-json: Kotlinx serialization
    • ktor-client-logging: Request/response logging
    • Platform-specific engines: Android, Darwin, Java
  • Kotlinx Serialization (1.7.3): JSON serialization

State Management & Navigation

  • Androidx Lifecycle (2.9.1): ViewModel and lifecycle management
  • Androidx Navigation (2.9.0-beta03): Type-safe navigation
  • Kotlinx Coroutines (1.10.2): Asynchronous programming

Dependency Injection

  • Koin (4.1.0): Lightweight dependency injection
    • koin-core: Core DI functionality
    • koin-compose: Compose integration
    • koin-android: Android-specific features

Image Loading

  • Coil (3.0.x): Async image loading
    • coil-compose: Compose integration
    • coil-network-ktor3: Ktor networking
    • coil-svg: SVG support

Security & Storage

  • Androidx Security Crypto (1.1.0-alpha06): Encrypted storage for Android
  • Platform-specific secure storage: Custom implementations per platform

Testing

  • JUnit (4.13.2): Unit testing framework
  • Mockito (5.14.2): Mocking framework
  • Turbine (1.2.0): Flow testing utilities
  • Kotlinx Coroutines Test (1.10.2): Coroutine testing

Development Tools

  • Android Gradle Plugin (8.7.3)
  • Kotlin Gradle Plugin (2.2.0)
  • Compose Compiler Plugin: Integrated with Kotlin compiler

🚀 Features Implemented

Authentication

  • User login with session management
  • Secure token storage across platforms
  • Session validation and auto-logout

Product Catalog

  • Product listing with pagination
  • Category-based filtering
  • Product search functionality
  • Detailed product views with images and reviews

Shopping Cart

  • Add/remove items from cart
  • Quantity management
  • Cart persistence across sessions
  • Real-time cart updates

Navigation

  • Type-safe navigation between screens
  • Deep linking support
  • Back stack management

UI/UX

  • Material Design 3 theming
  • Responsive layouts for different screen sizes
  • Loading states and error handling
  • SVG icon support

📁 Project Structure

KMP-ECommerce/
├── composeApp/                          # Shared Compose Multiplatform module
│   ├── src/
│   │   ├── commonMain/                  # Shared code for all platforms
│   │   │   ├── kotlin/azl/kmp/ecommerce/
│   │   │   │   ├── data/                # Data layer
│   │   │   │   │   ├── local/           # Local storage implementations
│   │   │   │   │   ├── remote/          # API services and DTOs
│   │   │   │   │   └── repository/      # Repository implementations
│   │   │   │   ├── domain/              # Domain layer
│   │   │   │   │   ├── entity/          # Business entities
│   │   │   │   │   ├── repository/      # Repository interfaces
│   │   │   │   │   ├── usecase/         # Business use cases
│   │   │   │   │   └── util/            # Domain utilities
│   │   │   │   ├── presentation/        # Presentation layer
│   │   │   │   │   ├── cart/            # Cart feature
│   │   │   │   │   ├── dashboard/       # Home/Dashboard
│   │   │   │   │   ├── login/           # Authentication
│   │   │   │   │   ├── navigation/      # Navigation logic
│   │   │   │   │   ├── productdetail/   # Product details
│   │   │   │   │   ├── search/          # Product search
│   │   │   │   │   └── splash/          # Splash screen
│   │   │   │   └── di/                  # Dependency injection
│   │   │   └── composeResources/        # Shared resources
│   │   │       ├── drawable/            # Vector drawables
│   │   │       └── files/               # SVG icons
│   │   ├── androidMain/                 # Android-specific code
│   │   ├── iosMain/                     # iOS-specific code
│   │   ├── desktopMain/                 # Desktop-specific code
│   │   └── wasmJsMain/                  # Web-specific code
│   └── build.gradle.kts                 # Module build configuration
├── iosApp/                              # iOS application wrapper
├── gradle/                              # Gradle configuration
│   └── libs.versions.toml               # Version catalog
├── build.gradle.kts                     # Root build configuration
└── settings.gradle.kts                  # Project settings

🔧 Build Configuration

Gradle Version Catalog (gradle/libs.versions.toml)

Centralized dependency management with version catalogs for:

  • Platform versions (Android SDK levels, compilation targets)
  • Library versions (Ktor, Compose, Koin, etc.)
  • Plugin versions (AGP, Kotlin, etc.)

Multiplatform Targets

  • Android: minSdk 24, targetSdk 35, compileSdk 35
  • iOS: iosX64, iosArm64, iosSimulatorArm64
  • Desktop: JVM target with Java 11 compatibility
  • Web: WebAssembly with modern browser support

Build Features

  • Compose Compiler: Integrated Kotlin compiler plugin
  • Kotlin Serialization: JSON serialization plugin
  • Hot Reload: Development productivity enhancement
  • Resource Management: Compose resources for shared assets

🌐 API Integration

DummyJSON API

The app integrates with DummyJSON for:

  • Authentication: /auth/login
  • Products: /products, /products/categories, /products/search
  • Cart Management: /carts, /carts/user/{id}

HTTP Client Configuration

  • Content Negotiation: Automatic JSON serialization/deserialization
  • Logging: Request/response logging for debugging
  • Platform Engines: Optimized HTTP engines per platform
  • Error Handling: Comprehensive error handling with Result wrapper

🔒 Security Features

Secure Storage

  • Android: EncryptedSharedPreferences with AES encryption
  • iOS: Keychain Services integration
  • Desktop: Platform-specific secure storage
  • Web: Secure browser storage APIs

Network Security

  • Certificate Pinning: Custom certificate validation
  • HTTPS Enforcement: Secure communication only
  • Network Security Config: Android network security policies

🧪 Testing Strategy

Unit Testing

  • Domain Layer: Use case testing with mocked repositories
  • Repository Testing: API integration testing with mocked services
  • ViewModel Testing: State management and business logic testing

Testing Tools

  • Mockito: Mocking framework for dependencies
  • Turbine: Flow testing for reactive streams
  • Coroutine Testing: Async operation testing

🚀 Running the Application

Android

./gradlew :composeApp:assembleDebug

iOS

Open iosApp/iosApp.xcodeproj in Xcode and run

Desktop

./gradlew :composeApp:run

Web

./gradlew :composeApp:wasmJsBrowserDevelopmentRun

📱 App Features & Screen Implementation

6 Core Screens Implemented

1. 🚀 Splash Screen (presentation/splash/)

Purpose: App initialization and session validation

  • Components:

    • SplashScreen.kt: UI with app logo and loading indicator
    • SplashViewModel.kt: Session validation logic
    • SplashUiState.kt: Loading, navigation, and user states
    • SplashNavigation.kt: Navigation setup

  • Key Features:

    • Session Check: Validates existing user sessions on app start
    • Auto Navigation: Routes to Dashboard (valid session) or Login (no session)
    • Loading States: Shows progress indicator during session validation
    • Error Handling: Gracefully handles session validation failures

  • Flow: App Start → Session Check → Navigate to Login/Dashboard

2. 🔐 Login Screen (presentation/login/)

Purpose: User authentication and session creation

  • Components:

    • LoginScreen.kt: Material Design 3 login form
    • LoginViewModel.kt: Authentication logic with validation
    • LoginUiState.kt: Form state, loading, and error management
    • LoginNavigation.kt: Navigation integration

  • Key Features:

    • Form Validation: Email and password input validation
    • Secure Authentication: Integration with DummyJSON API
    • Session Creation: Establishes user session after successful login
    • Error Handling: Displays authentication errors to users
    • Loading States: Shows progress during login process

  • Flow: Enter Credentials → Validate → Create Session → Navigate to Dashboard

3. 🏠 Dashboard Screen (presentation/dashboard/)

Purpose: Main product catalog with categories and navigation

  • Components:

    • DashboardScreen.kt: Main product listing interface
    • DashboardViewModel.kt: Complex state management for products and categories
    • DashboardUiState.kt: Categories, products, pagination, and user state
    • DashboardNavigation.kt: Navigation hub
    • components/CategoryTabBarSimple.kt: Category selection tabs
    • components/ProductItem.kt: Individual product card component

  • Key Features:

    • Category Filtering: "All" + dynamic categories from API
    • Product Grid: Responsive grid layout with product cards
    • Pagination: Infinite scroll with load more functionality
    • Search Integration: Quick access to search functionality
    • Cart Badge: Real-time cart item count display
    • User Session: Displays current user information
    • Logout Functionality: Session termination

  • Flow: Load Categories → Display Products → Filter by Category → Navigate to Details/Search/Cart

4. 🔍 Search Screen (presentation/search/)

Purpose: Product search with real-time results

  • Components:

    • SearchProductScreen.kt: Search interface with results
    • SearchProductViewModel.kt: Search logic and state management
    • SearchProductUiState.kt: Search query, results, and pagination
    • SearchProductNavigation.kt: Search navigation setup

  • Key Features:

    • Real-time Search: Dynamic search as user types
    • Paginated Results: Infinite scroll for search results
    • Search History: Maintains search state across navigation
    • Empty States: Handles no results scenarios
    • Loading States: Shows search progress indicators
    • Product Navigation: Direct navigation to product details

  • Flow: Enter Search Query → API Search → Display Results → Navigate to Product Details

5. 📦 Product Detail Screen (presentation/productdetail/)

Purpose: Detailed product information and cart operations

  • Components:

    • ProductDetailScreen.kt: Comprehensive product display
    • ProductDetailViewModel.kt: Product loading and cart operations
    • ProductDetailUiState.kt: Product data, cart operations, and loading states
    • ProductDetailsNavigation.kt: Detail screen navigation
    • components/ProductImageSlider.kt: Image carousel component
    • components/MultiImageViewer.kt: Advanced image viewing

  • Key Features:

    • Image Gallery: Multiple product images with slider
    • Product Information: Price, description, ratings, reviews
    • Quantity Selection: Adjustable quantity picker
    • Add to Cart: Direct cart integration with feedback
    • Stock Information: Availability and stock levels
    • Product Reviews: Customer reviews and ratings display
    • Related Information: Shipping, warranty, return policy

  • Flow: Load Product → Display Details → Select Quantity → Add to Cart → Success Feedback

6. 🛒 Cart Screen (presentation/cart/)

Purpose: Shopping cart management and checkout preparation

  • Components:

    • CartScreen.kt: Cart items list and summary
    • CartViewModel.kt: Cart operations and state management
    • CartUiState.kt: Cart data, totals, and operation states
    • CartNavigation.kt: Cart navigation setup
    • components/CartItemComponent.kt: Individual cart item with controls
    • components/CartSummaryComponent.kt: Order summary and totals

  • Key Features:

    • Cart Items List: Displays all products in cart
    • Quantity Management: Increase/decrease item quantities
    • Item Removal: Remove products from cart
    • Price Calculations: Subtotal, discounts, and total calculations
    • Empty Cart State: Handles empty cart scenarios
    • Checkout Navigation: Proceeds to checkout process
    • Real-time Updates: Instant cart updates across the app

  • Flow: View Cart Items → Modify Quantities → Remove Items → View Totals → Proceed to Checkout

🔄 Common Components & Patterns

Pagination State Management

  • PaginationState.kt: Centralized pagination logic
  • Features: Load more, refresh, error handling, page management
  • Usage: Dashboard and Search screens for infinite scrolling

Navigation Architecture

  • Type-Safe Navigation: Using Compose Navigation with serializable destinations
  • Deep Linking: Support for direct navigation to specific screens
  • Back Stack Management: Proper navigation history handling

State Management Pattern

  • Unidirectional Data Flow: ViewModel → UiState → UI
  • Reactive Updates: StateFlow for reactive state management
  • Error Handling: Consistent error state management across screens

Dependency Injection

  • Koin Integration: Lightweight DI for ViewModels and Use Cases
  • Scoped ViewModels: Proper lifecycle management
  • Platform-Specific Implementations: Different implementations per platform

🎯 Key Functionalities

  • Session Management: Persistent login across app restarts
  • Product Browsing: Category filtering and pagination
  • Search: Real-time product search with pagination
  • Cart Operations: Add, remove, update quantities with real-time sync
  • Image Loading: Async image loading with caching and SVG support
  • Error Handling: Comprehensive error states and retry mechanisms
  • Offline Handling: Graceful degradation when network is unavailable
  • Loading States: Skeleton loading and progress indicators throughout

🔄 State Management

ViewModel Architecture

  • Unidirectional Data Flow: Clear state management pattern
  • Compose State: Reactive UI updates
  • Lifecycle Awareness: Proper state preservation
  • Error States: Comprehensive error handling

Navigation State

  • Type-Safe Navigation: Compile-time route validation
  • Deep Linking: URL-based navigation support
  • Back Stack Management: Proper navigation history

🎨 UI/UX Design

Material Design 3

  • Dynamic Theming: Adaptive color schemes
  • Component Library: Consistent UI components
  • Responsive Design: Multi-screen size support

Custom Components

  • Product Cards: Reusable product display components
  • Loading States: Skeleton loading and progress indicators
  • Error States: User-friendly error messages

📈 Performance Optimizations

Image Loading

  • Coil Integration: Efficient image caching and loading
  • SVG Support: Vector graphics for scalable icons
  • Memory Management: Optimized image memory usage

Network Optimization

  • Request Caching: HTTP response caching
  • Pagination: Efficient data loading
  • Connection Pooling: Optimized network connections

🔮 Future Enhancements

Planned Features

  • Order Management: Complete checkout and order tracking
  • User Profiles: Enhanced user account management
  • Offline Support: Local data caching and sync
  • Push Notifications: Order updates and promotions
  • Payment Integration: Multiple payment gateway support

Technical Improvements

  • Database Integration: Local SQLite database with Room
  • Advanced Testing: UI testing and integration tests
  • Performance Monitoring: Analytics and crash reporting
  • CI/CD Pipeline: Automated build and deployment

📚 Learning Resources

🤝 Contributing

We appreciate feedback on Compose/Web and Kotlin/Wasm in the public Slack channel #compose-web.

If you face any issues, please report them on YouTrack.

Built with ❤️ using Kotlin Multiplatform and Compose Multiplatform

About

Compose Multiplatform App for Andorid, iOS, Desktop and Web

Resources

Readme
Activity

Stars

2 stars

Watchers

0 watching

Forks

2 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages