# c4rnivore/green-api architecture

> Architecture diagram of the GitHub repository c4rnivore/green-api, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/c4rnivore/green-api
- Repository: https://github.com/c4rnivore/green-api

## Overview

This is a browser-based WhatsApp text messenger backed by GREEN-API. The user supplies instance credentials, the app validates the instance, opens the chat workspace, checks a phone number to start a chat, and sends text messages. Incoming notifications are polled, applied to chat/message state, then acknowledged; local credentials and conversations persist in the browser. The graph reflects sampled source and README-described capabilities; some component internals, including new-chat and credential-form wiring, were not sampled, so uncertain calls are omitted.

Main entry points: [`src/store/messengerStore.ts`](https://github.com/c4rnivore/green-api/blob/main/src/store/messengerStore.ts) (Messenger store), [`src/api/greenApi.ts`](https://github.com/c4rnivore/green-api/blob/main/src/api/greenApi.ts) (GREEN-API client), [`src/components/MessangerLayout.tsx`](https://github.com/c4rnivore/green-api/blob/main/src/components/MessangerLayout.tsx) (Messenger layout), [`src/App.tsx`](https://github.com/c4rnivore/green-api/blob/main/src/App.tsx) (App routing)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["User experience"]
  node_credentials["Credentials form"]
  node_layout["Messenger layout"]
  node_sidebar["Chat search and list<br/>[ChatSidebar.tsx]"]
  node_newchat["New chat dialog<br/>[NewChatDialog.tsx]"]
  node_window["Chat window<br/>[ChatWindow.tsx]"]
  node_settings["Account settings<br/>[SettingsDialog.tsx]"]
end

subgraph group_state["Conversation state"]
  node_store[("Messenger store<br/>[messengerStore.ts]")]
  node_message_domain["Message processing<br/>[messages.ts]"]
end

subgraph group_integration["GREEN-API integration"]
  node_api["GREEN-API client<br/>[greenApi.ts]"]
  node_api_utils["Request configuration<br/>[apiUtils.ts]"]
end

subgraph group_runtime["Application runtime"]
  node_app["App routing<br/>[App.tsx]"]
  node_notifications["Incoming notification polling"]
  node_react_runtime["React query runtime<br/>[main.tsx]"]
end

node_user(("Messenger user"))
node_greenapi["GREEN-API service"]
node_browser[("Browser local storage")]

node_user -->|"opens messenger"| node_app
node_app -->|"reads credentials"| node_store
node_app -->|"renders when signed out"| node_credentials
node_app -->|"renders when signed in"| node_layout
node_user -->|"enters credentials"| node_credentials
node_credentials -->|"validates instance"| node_api
node_api -->|"checks and configures"| node_greenapi
node_credentials -->|"saves credentials"| node_store
node_layout -->|"shows chats"| node_sidebar
node_layout -->|"shows selected chat"| node_window
node_layout -->|"opens chat creation"| node_newchat
node_layout -->|"opens settings"| node_settings
node_sidebar -->|"reads chats and messages"| node_store
node_newchat -->|"checks phone"| node_api
node_api -->|"builds request target"| node_api_utils
node_api -->|"sends API requests"| node_greenapi
node_newchat -->|"adds chat"| node_store
node_window -->|"reads and updates messages"| node_store
node_window -->|"sends message"| node_api
node_settings -->|"revalidates credentials"| node_api
node_settings -->|"updates or clears account"| node_store
node_layout -->|"starts polling"| node_notifications
node_notifications -->|"reads credentials"| node_store
node_notifications -->|"receives and deletes notifications"| node_api
node_notifications -->|"applies notification"| node_store
node_store -->|"delegates notification processing"| node_message_domain
node_store -->|"persists conversations and credentials"| node_browser
node_react_runtime -->|"mounts application"| node_app

click node_app "https://github.com/c4rnivore/green-api/blob/main/src/App.tsx"
click node_credentials "https://github.com/c4rnivore/green-api/blob/main/src/components/CredentialsForm.tsx"
click node_layout "https://github.com/c4rnivore/green-api/blob/main/src/components/MessangerLayout.tsx"
click node_sidebar "https://github.com/c4rnivore/green-api/blob/main/src/components/ChatSidebar.tsx"
click node_newchat "https://github.com/c4rnivore/green-api/blob/main/src/components/NewChatDialog.tsx"
click node_window "https://github.com/c4rnivore/green-api/blob/main/src/components/ChatWindow.tsx"
click node_settings "https://github.com/c4rnivore/green-api/blob/main/src/components/SettingsDialog.tsx"
click node_notifications "https://github.com/c4rnivore/green-api/blob/main/src/hooks/useIncomingNotifications.ts"
click node_store "https://github.com/c4rnivore/green-api/blob/main/src/store/messengerStore.ts"
click node_message_domain "https://github.com/c4rnivore/green-api/blob/main/src/domain/messages.ts"
click node_api "https://github.com/c4rnivore/green-api/blob/main/src/api/greenApi.ts"
click node_api_utils "https://github.com/c4rnivore/green-api/blob/main/src/api/apiUtils.ts"
click node_react_runtime "https://github.com/c4rnivore/green-api/blob/main/src/main.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_credentials,node_layout,node_sidebar,node_newchat,node_window,node_settings,node_user toneBlue
class node_store,node_message_domain,node_browser toneAmber
class node_api,node_api_utils,node_greenapi toneMint
class node_app,node_notifications,node_react_runtime toneRose
```

## Components

### User experience

- [Credentials form](https://github.com/c4rnivore/green-api/blob/main/src/components/CredentialsForm.tsx): `src/components/CredentialsForm.tsx`
- [Messenger layout](https://github.com/c4rnivore/green-api/blob/main/src/components/MessangerLayout.tsx): `src/components/MessangerLayout.tsx`
- [Chat search and list](https://github.com/c4rnivore/green-api/blob/main/src/components/ChatSidebar.tsx): `src/components/ChatSidebar.tsx`
- [New chat dialog](https://github.com/c4rnivore/green-api/blob/main/src/components/NewChatDialog.tsx): `src/components/NewChatDialog.tsx`
- [Chat window](https://github.com/c4rnivore/green-api/blob/main/src/components/ChatWindow.tsx): `src/components/ChatWindow.tsx`
- [Account settings](https://github.com/c4rnivore/green-api/blob/main/src/components/SettingsDialog.tsx): `src/components/SettingsDialog.tsx`

### Conversation state

- [Messenger store](https://github.com/c4rnivore/green-api/blob/main/src/store/messengerStore.ts): `src/store/messengerStore.ts`
- [Message processing](https://github.com/c4rnivore/green-api/blob/main/src/domain/messages.ts): `src/domain/messages.ts`

### GREEN-API integration

- [GREEN-API client](https://github.com/c4rnivore/green-api/blob/main/src/api/greenApi.ts): `src/api/greenApi.ts`
- [Request configuration](https://github.com/c4rnivore/green-api/blob/main/src/api/apiUtils.ts): `src/api/apiUtils.ts`

### Application runtime

- [App routing](https://github.com/c4rnivore/green-api/blob/main/src/App.tsx): `src/App.tsx`
- [Incoming notification polling](https://github.com/c4rnivore/green-api/blob/main/src/hooks/useIncomingNotifications.ts): `src/hooks/useIncomingNotifications.ts`
- [React query runtime](https://github.com/c4rnivore/green-api/blob/main/src/main.tsx): `src/main.tsx`

### Other components

- **Messenger user**
- **GREEN-API service**
- **Browser local storage**

## Connections

- Messenger user → App routing: opens messenger
- App routing → Messenger store: reads credentials
- App routing → Credentials form: renders when signed out
- App routing → Messenger layout: renders when signed in
- Messenger user → Credentials form: enters credentials
- Credentials form → GREEN-API client: validates instance
- GREEN-API client → GREEN-API service: checks and configures
- Credentials form → Messenger store: saves credentials
- Messenger layout → Chat search and list: shows chats
- Messenger layout → Chat window: shows selected chat
- Messenger layout → New chat dialog: opens chat creation
- Messenger layout → Account settings: opens settings
- Chat search and list → Messenger store: reads chats and messages
- New chat dialog → GREEN-API client: checks phone
- GREEN-API client → Request configuration: builds request target
- GREEN-API client → GREEN-API service: sends API requests
- New chat dialog → Messenger store: adds chat
- Chat window → Messenger store: reads and updates messages
- Chat window → GREEN-API client: sends message
- Account settings → GREEN-API client: revalidates credentials
- Account settings → Messenger store: updates or clears account
- Messenger layout → Incoming notification polling: starts polling
- Incoming notification polling → Messenger store: reads credentials
- Incoming notification polling → GREEN-API client: receives and deletes notifications
- Incoming notification polling → Messenger store: applies notification
- Messenger store → Message processing: delegates notification processing
- Messenger store → Browser local storage: persists conversations and credentials
- React query runtime → App routing: mounts application