docs: update README with images

README.md

@@ -20,51 +20,11 @@ This project focuses on:
 ---
 
 ## 🏗️ Project Structure
-
-```
-my-react-app/
-│
-├── public/
-│   ├── index.html
-│   ├── favicon.ico
-│   └── assets/                # Static assets (images, fonts, icons)
-│
-├── src/
-│   ├── assets/                # App-level assets
-│   ├── components/            # Reusable UI components
-│   ├── features/              # Domain-driven modules
-│   │   ├── FeatureName/
-│   │   │   ├── components/    # Feature-specific UI
-│   │   │   ├── hooks/         # Feature-specific hooks
-│   │   │   ├── services/      # API + logic
-│   │   │   ├── FeatureName.tsx
-│   │   │   └── featureSlice.ts
-│   │   └── ...
-│   │
-│   ├── hooks/                 # Global reusable hooks
-│   ├── layouts/               # Layouts (Header, Sidebar, Footer)
-│   ├── pages/                 # Route-based pages
-│   ├── routes/                # Routing & guards
-│   ├── services/              # API clients (Axios, Fetch)
-│   ├── store/                 # Global state (Redux/Zustand)
-│   ├── styles/                # Global styles/themes
-│   ├── utils/                 # Helper functions
-│   ├── App.tsx                # Root component
-│   ├── index.tsx              # Entry point
-│   └── setupTests.ts          # Test setup
-│
-├── tests/                     # E2E / integration tests
-│
-├── .env                       # Environment configs
-├── package.json
-├── tsconfig.json
-├── vite.config.ts
-└── README.md
 ```
+<img src="C:\Users\molat\Downloads\newd.png">
 
 ---
-
-## 🧠 Architecture Philosophy
+##🧠 Architecture Philosophy
 
 ### 1. Feature-Based Design
 
@@ -107,6 +67,65 @@ Each feature contains:
 
 ---
 
+
+## 🏛️ Visual Architecture & Data Flow
+
+To make onboarding seamless for new contributors, Commdesk relies on clear, unidirectional data flows and strict modular boundaries. Here is how our system operates under the hood.
+
+###1. Application Architecture
+
+The application is structured into distinct horizontal layers. Components never bypass layers to talk directly to the backend; all communication flows cleanly through state and service abstractions.
+
+<img src="C:\Users\molat\Downloads\git1.png">
+
+What this shows:
+
+ - 🎨 Presentation Layer (Blue): Handles rendering and user interaction.
+ - ⚡ Feature Layer (Orange): Packages domain-specific business logic together.
+ - 🧠 State Layer (Purple): Acts as the single source of truth for app data.
+ - 🌐 Service Layer (Green): Manages external HTTP requests and interceptors.
+
+##2. Feature Module Organization
+
+To prevent spaghetti code, each feature module acts like its own mini-application. It exposes UI, isolates its business logic into React hooks, encapsulates API requests in services, and manages its own state slice.
+
+<img src="C:\Users\molat\Downloads\git3.png">
+
+Why we organize this way:
+
+ - Components remain clean and "dumb"—they just display data and pass events.
+ - Hooks handle complex calculations, validations, and state mapping.
+ - If an API endpoint changes, you only ever need to edit one file inside services/.
+
+##3. Request Flow (End-to-End Journey)
+
+Every user interaction follows a strict, predictable 9-step path from the browser to the backend database and back. This ensures application state stays synchronized with the server at all times.
+
+<img src="C:\Users\molat\Downloads\git2.png">
+
+The Step-by-Step Lifecycle:
+
+ 1.Trigger: A user clicks a button or submits a form.
+ 2.Logic: A custom hook validates the input and prepares the payload.
+ 3.Dispatch: An action is dispatched to the Redux store (triggering a loading state).
+ 4.Network: The service layer sends an HTTP request to the backend.
+ 5.Update: Once the server responds, the Redux store updates immutably.
+ 6.Render: React detects the state change and automatically re-renders the UI.
+
+##4. State Management Flow
+
+When an action is dispatched, Redux determines whether it is a Synchronous update (like toggling a UI menu) or an Asynchronous update (like fetching data from an API).
+
+<img src="C:\Users\molat\Downloads\git4.png">
+
+Key State Rules:
+
+ - Reducers must be pure: They calculate the new state without triggering side effects.
+ - Thunks handle async: Any code that relies on timers, promises, or network requests lives inside an Async Thunk.
+ - Single Source of Truth: Components never store global data in local state; they always read directly from the Redux Store using selectors.
+
+
+
 ## ⚙️ Tech Stack
 
 - ⚛️ React (with TypeScript)