# thanphuuuuu/whatsapp-clone architecture

> Architecture diagram of the GitHub repository thanphuuuuu/whatsapp-clone, 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/thanphuuuuu/whatsapp-clone
- Repository: https://github.com/thanphuuuuu/whatsapp-clone

## Overview

This repository’s documented product is a real-time WhatsApp-style web application; the mobile tree contains platform wrappers but no sampled application runtime. A user signs in or restores a session, then uses protected chat, friend, profile, upload, and calling features. REST controllers delegate domain work to services, while Socket.IO handles messaging, presence, and call signaling. The graph includes documented capabilities whose source was not sampled, using supported feature or backend directory paths; their internal wiring is not inferred.

Main entry points: [`backend/src/app.js`](https://github.com/thanphuuuuu/whatsapp-clone/blob/main/backend/src/app.js) (Express app), [`backend/src/sockets`](https://github.com/thanphuuuuu/whatsapp-clone/tree/main/backend/src/sockets) (Socket event handlers), [`frontend/src/features/call/hooks/useWebRTC.ts`](https://github.com/thanphuuuuu/whatsapp-clone/blob/main/frontend/src/features/call/hooks/useWebRTC.ts) (WebRTC peer connection), [`frontend/src/routes/AppRouter.tsx`](https://github.com/thanphuuuuu/whatsapp-clone/blob/main/frontend/src/routes/AppRouter.tsx) (App routing)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web experience"]
  node_router["App routing<br/>[AppRouter.tsx]"]
  node_authui["Sign-in and signup"]
  node_chatui["Chat interface"]
  node_friendsui["Friends and profile"]
  node_callui["Call interface"]
  node_httpclient["HTTP client<br/>[axios.ts]"]
  node_socketclient["Socket client<br/>[socket.ts]"]
  node_authstate["Auth state<br/>[authStore.ts]"]
  node_chatstate["Chat state<br/>[chatStore.ts]"]
  node_callstate["Call state<br/>[callStore.ts]"]
end

subgraph group_api["REST application"]
  node_server["HTTP and socket server<br/>[server.js]"]
  node_expressapp["Express app<br/>[app.js]"]
  node_authapi["Authentication API<br/>[auth.routes.js]"]
  node_authlogic["Auth controller and service<br/>[auth.controller.js]"]
  node_userfriends["User and friend APIs"]
  node_conversationapi["Conversation API"]
  node_conversationlogic["Conversation controller"]
  node_upload["Media upload API"]
end

subgraph group_realtime["Realtime features"]
  node_socketserver["Socket event handlers"]
  node_presence["Presence events<br/>[presence.socket.js]"]
  node_messagesocket["Message events<br/>[message.socket.js]"]
  node_callsocket["Call signaling<br/>[call.socket.js]"]
  node_webrtc["WebRTC peer connection<br/>[useWebRTC.ts]"]
end

subgraph group_state["Domain state"]
  node_domainservices["Conversation and message services"]
  node_models["User and message models"]
  node_localfiles[("Local uploads")]
end

node_user(("Web user"))
node_mongodb[("MongoDB")]
node_cloudinary["Cloudinary"]
node_peer(("Remote call participant"))

node_user -->|"uses"| node_router
node_router -->|"routes"| node_authui
node_router -->|"routes"| node_chatui
node_router -->|"restores session"| node_authstate
node_authui -->|"submits credentials"| node_httpclient
node_chatui -->|"requests chat data"| node_httpclient
node_friendsui -->|"requests friend data"| node_httpclient
node_callui -->|"controls calls"| node_webrtc
node_httpclient -->|"sends REST requests"| node_expressapp
node_socketclient -->|"exchanges events"| node_socketserver
node_server -->|"serves"| node_expressapp
node_server -->|"initializes"| node_socketserver
node_expressapp -->|"mounts"| node_authapi
node_expressapp -->|"mounts"| node_userfriends
node_expressapp -->|"mounts"| node_conversationapi
node_authapi -->|"dispatches"| node_authlogic
node_conversationapi -->|"dispatches"| node_conversationlogic
node_conversationlogic -->|"calls"| node_domainservices
node_authlogic -->|"reads and writes"| node_models
node_domainservices -->|"reads and writes"| node_models
node_models -->|"persists"| node_mongodb
node_expressapp -->|"mounts upload routes"| node_upload
node_upload -.->|"uploads optionally"| node_cloudinary
node_upload -->|"writes fallback files"| node_localfiles
node_expressapp -->|"mounts socket handlers"| node_socketserver
node_socketserver -->|"registers"| node_presence
node_socketserver -->|"registers"| node_messagesocket
node_socketserver -->|"registers"| node_callsocket
node_conversationlogic -->|"emits updates"| node_socketserver
node_chatui -->|"subscribes to events"| node_socketclient
node_callui -->|"uses signaling"| node_socketclient
node_webrtc -->|"sends signaling"| node_socketclient
node_webrtc -->|"connects media"| node_peer
node_peer -->|"returns media"| node_webrtc
node_chatui -->|"updates state"| node_chatstate
node_webrtc -->|"updates call state"| node_callstate

click node_router "https://github.com/thanphuuuuu/whatsapp-clone/blob/main/frontend/src/routes/AppRouter.tsx"
click node_authui "https://github.com/thanphuuuuu/whatsapp-clone/tree/main/frontend/src/pages"
click node_chatui "https://github.com/thanphuuuuu/whatsapp-clone/tree/main/frontend/src/features/chat"
click node_friendsui "https://github.com/thanphuuuuu/whatsapp-clone/tree/main/frontend/src/features/friends"
click node_callui "https://github.com/thanphuuuuu/whatsapp-clone/tree/main/frontend/src/features/call"
click node_httpclient "https://github.com/thanphuuuuu/whatsapp-clone/blob/main/frontend/src/lib/axios.ts"
click node_socketclient "https://github.com/thanphuuuuu/whatsapp-clone/blob/main/frontend/src/lib/socket.ts"
click node_authstate "https://github.com/thanphuuuuu/whatsapp-clone/blob/main/frontend/src/store/authStore.ts"
click node_chatstate "https://github.com/thanphuuuuu/whatsapp-clone/blob/main/frontend/src/store/chatStore.ts"
click node_callstate "https://github.com/thanphuuuuu/whatsapp-clone/blob/main/frontend/src/features/call/callStore.ts"
click node_server "https://github.com/thanphuuuuu/whatsapp-clone/blob/main/backend/server.js"
click node_expressapp "https://github.com/thanphuuuuu/whatsapp-clone/blob/main/backend/src/app.js"
click node_authapi "https://github.com/thanphuuuuu/whatsapp-clone/blob/main/backend/src/routes/auth.routes.js"
click node_authlogic "https://github.com/thanphuuuuu/whatsapp-clone/blob/main/backend/src/controllers/auth.controller.js"
click node_userfriends "https://github.com/thanphuuuuu/whatsapp-clone/tree/main/backend/src/routes"
click node_conversationapi "https://github.com/thanphuuuuu/whatsapp-clone/blob/main/backend/src/routes/conversation.routes.js"
click node_conversationlogic "https://github.com/thanphuuuuu/whatsapp-clone/blob/main/backend/src/controllers/conversation.controller.js"
click node_domainservices "https://github.com/thanphuuuuu/whatsapp-clone/tree/main/backend/src/services"
click node_models "https://github.com/thanphuuuuu/whatsapp-clone/tree/main/backend/src/models"
click node_upload "https://github.com/thanphuuuuu/whatsapp-clone/blob/main/backend/src/controllers/upload.controller.js"
click node_localfiles "https://github.com/thanphuuuuu/whatsapp-clone/blob/main/backend/src/controllers/upload.controller.js"
click node_socketserver "https://github.com/thanphuuuuu/whatsapp-clone/tree/main/backend/src/sockets"
click node_presence "https://github.com/thanphuuuuu/whatsapp-clone/blob/main/backend/src/sockets/presence.socket.js"
click node_messagesocket "https://github.com/thanphuuuuu/whatsapp-clone/blob/main/backend/src/sockets/message.socket.js"
click node_callsocket "https://github.com/thanphuuuuu/whatsapp-clone/blob/main/backend/src/sockets/call.socket.js"
click node_webrtc "https://github.com/thanphuuuuu/whatsapp-clone/blob/main/frontend/src/features/call/hooks/useWebRTC.ts"

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_router,node_authui,node_chatui,node_friendsui,node_callui,node_httpclient,node_socketclient,node_authstate,node_chatstate,node_callstate,node_user toneBlue
class node_server,node_expressapp,node_authapi,node_authlogic,node_userfriends,node_conversationapi,node_conversationlogic,node_upload,node_mongodb toneAmber
class node_socketserver,node_presence,node_messagesocket,node_callsocket,node_webrtc toneMint
class node_domainservices,node_models,node_localfiles toneRose
class node_cloudinary,node_peer toneIndigo
```

## Components

### Web experience

- [App routing](https://github.com/thanphuuuuu/whatsapp-clone/blob/main/frontend/src/routes/AppRouter.tsx): `frontend/src/routes/AppRouter.tsx`
- [Sign-in and signup](https://github.com/thanphuuuuu/whatsapp-clone/tree/main/frontend/src/pages): `frontend/src/pages`
- [Chat interface](https://github.com/thanphuuuuu/whatsapp-clone/tree/main/frontend/src/features/chat): `frontend/src/features/chat`
- [Friends and profile](https://github.com/thanphuuuuu/whatsapp-clone/tree/main/frontend/src/features/friends): `frontend/src/features/friends`
- [Call interface](https://github.com/thanphuuuuu/whatsapp-clone/tree/main/frontend/src/features/call): `frontend/src/features/call`
- [HTTP client](https://github.com/thanphuuuuu/whatsapp-clone/blob/main/frontend/src/lib/axios.ts): `frontend/src/lib/axios.ts`
- [Socket client](https://github.com/thanphuuuuu/whatsapp-clone/blob/main/frontend/src/lib/socket.ts): `frontend/src/lib/socket.ts`
- [Auth state](https://github.com/thanphuuuuu/whatsapp-clone/blob/main/frontend/src/store/authStore.ts): `frontend/src/store/authStore.ts`
- [Chat state](https://github.com/thanphuuuuu/whatsapp-clone/blob/main/frontend/src/store/chatStore.ts): `frontend/src/store/chatStore.ts`
- [Call state](https://github.com/thanphuuuuu/whatsapp-clone/blob/main/frontend/src/features/call/callStore.ts): `frontend/src/features/call/callStore.ts`

### REST application

- [HTTP and socket server](https://github.com/thanphuuuuu/whatsapp-clone/blob/main/backend/server.js): `backend/server.js`
- [Express app](https://github.com/thanphuuuuu/whatsapp-clone/blob/main/backend/src/app.js): `backend/src/app.js`
- [Authentication API](https://github.com/thanphuuuuu/whatsapp-clone/blob/main/backend/src/routes/auth.routes.js): `backend/src/routes/auth.routes.js`
- [Auth controller and service](https://github.com/thanphuuuuu/whatsapp-clone/blob/main/backend/src/controllers/auth.controller.js): `backend/src/controllers/auth.controller.js`
- [User and friend APIs](https://github.com/thanphuuuuu/whatsapp-clone/tree/main/backend/src/routes): `backend/src/routes`
- [Conversation API](https://github.com/thanphuuuuu/whatsapp-clone/blob/main/backend/src/routes/conversation.routes.js): `backend/src/routes/conversation.routes.js`
- [Conversation controller](https://github.com/thanphuuuuu/whatsapp-clone/blob/main/backend/src/controllers/conversation.controller.js): `backend/src/controllers/conversation.controller.js`
- [Media upload API](https://github.com/thanphuuuuu/whatsapp-clone/blob/main/backend/src/controllers/upload.controller.js): `backend/src/controllers/upload.controller.js`

### Realtime features

- [Socket event handlers](https://github.com/thanphuuuuu/whatsapp-clone/tree/main/backend/src/sockets): `backend/src/sockets`
- [Presence events](https://github.com/thanphuuuuu/whatsapp-clone/blob/main/backend/src/sockets/presence.socket.js): `backend/src/sockets/presence.socket.js`
- [Message events](https://github.com/thanphuuuuu/whatsapp-clone/blob/main/backend/src/sockets/message.socket.js): `backend/src/sockets/message.socket.js`
- [Call signaling](https://github.com/thanphuuuuu/whatsapp-clone/blob/main/backend/src/sockets/call.socket.js): `backend/src/sockets/call.socket.js`
- [WebRTC peer connection](https://github.com/thanphuuuuu/whatsapp-clone/blob/main/frontend/src/features/call/hooks/useWebRTC.ts): `frontend/src/features/call/hooks/useWebRTC.ts`

### Domain state

- [Conversation and message services](https://github.com/thanphuuuuu/whatsapp-clone/tree/main/backend/src/services): `backend/src/services`
- [User and message models](https://github.com/thanphuuuuu/whatsapp-clone/tree/main/backend/src/models): `backend/src/models`
- [Local uploads](https://github.com/thanphuuuuu/whatsapp-clone/blob/main/backend/src/controllers/upload.controller.js): `backend/src/controllers/upload.controller.js`

### Other components

- **Web user**
- **MongoDB**
- **Cloudinary**
- **Remote call participant**

## Connections

- Web user → App routing: uses
- App routing → Sign-in and signup: routes
- App routing → Chat interface: routes
- App routing → Auth state: restores session
- Sign-in and signup → HTTP client: submits credentials
- Chat interface → HTTP client: requests chat data
- Friends and profile → HTTP client: requests friend data
- Call interface → WebRTC peer connection: controls calls
- HTTP client → Express app: sends REST requests
- Socket client → Socket event handlers: exchanges events
- HTTP and socket server → Express app: serves
- HTTP and socket server → Socket event handlers: initializes
- Express app → Authentication API: mounts
- Express app → User and friend APIs: mounts
- Express app → Conversation API: mounts
- Authentication API → Auth controller and service: dispatches
- Conversation API → Conversation controller: dispatches
- Conversation controller → Conversation and message services: calls
- Auth controller and service → User and message models: reads and writes
- Conversation and message services → User and message models: reads and writes
- User and message models → MongoDB: persists
- Express app → Media upload API: mounts upload routes
- Media upload API → Cloudinary: uploads optionally
- Media upload API → Local uploads: writes fallback files
- Express app → Socket event handlers: mounts socket handlers
- Socket event handlers → Presence events: registers
- Socket event handlers → Message events: registers
- Socket event handlers → Call signaling: registers
- Conversation controller → Socket event handlers: emits updates
- Chat interface → Socket client: subscribes to events
- Call interface → Socket client: uses signaling
- WebRTC peer connection → Socket client: sends signaling
- WebRTC peer connection → Remote call participant: connects media
- Remote call participant → WebRTC peer connection: returns media
- Chat interface → Chat state: updates state
- WebRTC peer connection → Call state: updates call state