Update README.md with new app screenshots and enhanced documentation sections

Author: abd3lraouf

README.md

@@ -10,8 +10,7 @@ A comprehensive tutorial project showcasing **Decompose** for building reactive,
 
 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)
+![App Overview](assets/9.Screenshot_20250508_072837.png)
 
 ## ✨ Key Features
 
@@ -21,6 +20,47 @@ Decompose provides powerful tools for creating independent UI components with th
 - **Back Stack Management**: Support for navigation history
 - **Lifecycle Management**: Clean component lifecycle handling
 
+## 📱 App Screenshots
+
+### Todo List View
+<p align="center">
+  <img src="assets/10.Screenshot_20250508_072856.png" width="250" alt="Todo List"/>
+  <img src="assets/11.Screenshot_20250508_072905.png" width="250" alt="Creating New Todo"/>
+</p>
+
+### Todo Workflow Stages
+<p align="center">
+  <img src="assets/12.Screenshot_20250508_072916.png" width="250" alt="Todo Stage"/>
+  <img src="assets/13.Screenshot_20250508_072923.png" width="250" alt="In Progress Stage"/>
+  <img src="assets/14.Screenshot_20250508_072929.png" width="250" alt="Done Stage"/>
+</p>
+
+### Todo Details and Editing
+<p align="center">
+  <img src="assets/15.Screenshot_20250508_072938.png" width="250" alt="Todo Details"/>
+  <img src="assets/16.Screenshot_20250508_072944.png" width="250" alt="Edit Todo"/>
+</p>
+
+### Navigation and State Handling
+<p align="center">
+  <img src="assets/17.Screenshot_20250508_073045.png" width="250" alt="Navigation Example 1"/>
+  <img src="assets/18.Screenshot_20250508_073051.png" width="250" alt="Navigation Example 2"/>
+</p>
+
+### Component Interaction
+<p align="center">
+  <img src="assets/19.Screenshot_20250508_073058.png" width="250" alt="Component Interaction 1"/>
+  <img src="assets/20.Screenshot_20250508_073102.png" width="250" alt="Component Interaction 2"/>
+</p>
+
+### Advanced Features
+<p align="center">
+  <img src="assets/21.Screenshot_20250508_073108.png" width="250" alt="Advanced Feature 1"/>
+  <img src="assets/22.Screenshot_20250508_073120.png" width="250" alt="Advanced Feature 2"/>
+  <img src="assets/23.Screenshot_20250508_073124.png" width="250" alt="Advanced Feature 3"/>
+  <img src="assets/24.Screenshot_20250508_073127.png" width="250" alt="Advanced Feature 4"/>
+</p>
+
 ## 🏗️ Architecture
 
 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.
@@ -154,8 +194,11 @@ stateDiagram-v2
    - 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)
+<p align="center">
+  <img src="assets/12.Screenshot_20250508_072916.png" width="250" alt="Todo Stage"/>
+  <img src="assets/13.Screenshot_20250508_072923.png" width="250" alt="In Progress Stage"/>
+  <img src="assets/14.Screenshot_20250508_072929.png" width="250" alt="Done Stage"/>
+</p>
 
 ## 💻 Component Implementation
 
@@ -226,8 +269,6 @@ fun `when todo is clicked, it navigates to details screen`() {
 }
 ```
 
-<!-- TODO: Add more test examples -->
-
 ## 👨‍💻 About the Author
 
 **Abdelraouf Sabri** - Senior Android Developer