Update README with Mermaid diagrams and enhance content structure

Author: abd3lraouf

README.md

@@ -4,11 +4,14 @@
 ![Compose](https://img.shields.io/badge/Jetpack_Compose-Latest-green.svg?logo=jetpackcompose)
 ![Decompose](https://img.shields.io/badge/Decompose-2.1.0-purple.svg)
 
-A comprehensive tutorial project showcasing Decompose for reactive UI component architecture in Kotlin Android development.
+A comprehensive tutorial project showcasing **Decompose** for building reactive, component-based architectures in Kotlin Android development. This project demonstrates how to create modular, maintainable, and testable applications with proper separation of concerns.
 
 ## 🚀 Overview
 
-Decompose is a powerful Kotlin library for building component-based UIs with clean separation of concerns. This tutorial demonstrates how to create modular, maintainable Android applications using Decompose with Jetpack Compose.
+Decompose provides powerful tools for creating independent UI components with their own lifecycle, state management, and navigation capabilities. This tutorial walks through implementing a Todo application with clean architecture principles and Decompose integration.
+
+<!-- TODO: Add screenshot of the app here -->
+![App Screenshot](screenshots/app_screenshot.png)
 
 ## ✨ Key Features
 
@@ -22,7 +25,37 @@ Decompose is a powerful Kotlin library for building component-based UIs with cle
 
 This project follows Clean Architecture principles with a feature-based package structure combined with Decompose component architecture. This approach allows for better separation of concerns, high cohesion, and easier maintainability.
 
-![Architecture Diagram](https://raw.githubusercontent.com/abd3lraouf/decompose-tutorial/master/assets/architecture.svg)
+### Component Architecture
+
+```mermaid
+graph TD
+    A[Application] --> B[Root Component]
+    B --> C[TodoList Component]
+    B --> D[TodoDetail Component]
+    C --> E[Todo Items]
+    D --> F[Todo Edit]
+    
+    style A fill:#f9f,stroke:#333,stroke-width:2px
+    style B fill:#bbf,stroke:#333,stroke-width:2px
+    style C fill:#dfd,stroke:#333,stroke-width:2px
+    style D fill:#dfd,stroke:#333,stroke-width:2px
+    style E fill:#ffd,stroke:#333,stroke-width:1px
+    style F fill:#ffd,stroke:#333,stroke-width:1px
+```
+
+### Clean Architecture Layers
+
+```mermaid
+graph TB
+    A[UI Layer<br>Compose/Components] --> B[Domain Layer<br>Use Cases]
+    B --> C[Data Layer<br>Repositories]
+    C --> D[Data Sources<br>Local/Remote]
+    
+    style A fill:#bbf,stroke:#333,stroke-width:2px
+    style B fill:#dfd,stroke:#333,stroke-width:2px
+    style C fill:#ffd,stroke:#333,stroke-width:2px
+    style D fill:#fcc,stroke:#333,stroke-width:2px
+```
 
 ### Package Structure
 
@@ -76,18 +109,39 @@ app/src/main/java/dev/abd3lraouf/learn/decompose/
    - Implements Decompose components for UI logic
    - Follows the MVU (Model-View-Update) pattern with Decompose
 
-### Navigation with Decompose
-
-The app uses Decompose's navigation capabilities:
-
-1. **Root Navigation**: Managed by `RootComponent` that handles the highest level navigation
-2. **Tab Navigation**: Managed by `TabNavigationComponent` for switching between features
-3. **Stack Navigation**: Each feature (like TodoList) has its own stack navigation for its screens
+## 🧭 Navigation with Decompose
+
+Decompose handles navigation through a component hierarchy:
+
+```mermaid
+graph TD
+    A[Root Navigation<br>RootComponent] --> B[Tab Navigation<br>TabComponent]
+    B --> C[Todo Stack<br>TodoStackComponent]
+    B --> D[Statistics Stack<br>StatisticsComponent]
+    C --> E[Todo List]
+    C --> F[Todo Details]
+    C --> G[Todo Creation]
+    
+    style A fill:#bbf,stroke:#333,stroke-width:2px
+    style B fill:#dfd,stroke:#333,stroke-width:2px
+    style C fill:#ffd,stroke:#333,stroke-width:2px
+    style D fill:#ffd,stroke:#333,stroke-width:2px
+```
 
 ## 📋 Todo App Implementation
 
 This tutorial implements a Todo application with a three-stage workflow:
 
+```mermaid
+stateDiagram-v2
+    [*] --> Todo
+    Todo --> InProgress: Click Play Button
+    InProgress --> Done: Check Checkbox
+    Done --> Todo: Uncheck Checkbox
+```
+
+### Stage Implementation 
+
 1. **Todo Stage**:
    - Display: Play button (no checkbox)
    - Action: Clicking play button moves todo to "In Progress" stage
@@ -100,18 +154,79 @@ This tutorial implements a Todo application with a three-stage workflow:
    - Display: Checkbox (checked)
    - Action: Unchecking the box moves todo back to "Todo" stage
 
+<!-- TODO: Add screenshots for each stage -->
+![Todo Stages](screenshots/todo_stages.png)
+
+## 💻 Component Implementation
+
+A simple Decompose component looks like:
+
+```kotlin
+interface TodoListComponent {
+    val models: Value<Model>
+    
+    fun onTodoClicked(id: String)
+    fun onAddTodoClicked()
+    
+    data class Model(
+        val todos: List<TodoItem>,
+        val isLoading: Boolean
+    )
+}
+
+class DefaultTodoListComponent(
+    private val todoRepository: TodoRepository,
+    private val componentContext: ComponentContext,
+    private val onTodoSelected: (String) -> Unit,
+    private val onAddTodo: () -> Unit
+) : TodoListComponent, ComponentContext by componentContext {
+    // Implementation
+}
+```
+
 ## 🛠️ Setup Instructions
 
 1. Clone the repository
+   ```bash
+   git clone https://github.com/abd3lraouf/decompose-tutorial.git
+   ```
+   
 2. Open the project in Android Studio
-3. Build and run the app
+
+3. Build and run the app on a device or emulator
 
 ## 📚 Technologies
 
 - **Kotlin**: Modern programming language
 - **Jetpack Compose**: UI toolkit
 - **Decompose**: Component architecture
 - **Kotlin Coroutines**: Asynchronous programming
+- **Koin**: Dependency injection
+
+## 🧪 Testing
+
+Decompose's component-based architecture makes testing more straightforward:
+
+```kotlin
+@Test
+fun `when todo is clicked, it navigates to details screen`() {
+    // Create test component
+    val component = DefaultTodoListComponent(
+        mockRepository,
+        TestComponentContext(),
+        onTodoSelected = { selectedId ->
+            // Verify correct ID is passed
+            assertEquals("todo-1", selectedId)
+        },
+        onAddTodo = {}
+    )
+    
+    // Trigger action
+    component.onTodoClicked("todo-1")
+}
+```
+
+<!-- TODO: Add more test examples -->
 
 ## 👨‍💻 About the Author