# harshwardhan-1/whatsapp-clone architecture

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

- Interactive diagram: https://gitdiagram.com/harshwardhan-1/whatsapp-clone
- Repository: https://github.com/harshwardhan-1/whatsapp-clone

## Overview

This is a WhatsApp-style real-time messaging app. Users enter through login/signup or the home screen, then use chat and related screens for direct, group, and channel conversations; the client also exposes stories, nearby chat, documents, and AI chat. The server provides authentication, chat routes, uploads, and stories, alongside Socket.IO and MongoDB startup. Sampled controllers confirm persistent group-message and channel-message workflows, including chat-list updates and live delivery. Several listed product areas were not sampled, so their internal wiring is not inferred.

Main entry points: [`client/src/App.tsx`](https://github.com/harshwardhan-1/whatsapp-clone/blob/main/client/src/App.tsx) (App router), [`server/src/app.ts`](https://github.com/harshwardhan-1/whatsapp-clone/blob/main/server/src/app.ts) (HTTP app), [`server/src/server.ts`](https://github.com/harshwardhan-1/whatsapp-clone/blob/main/server/src/server.ts) (Server startup), [`server/src/models/group.message.model.ts`](https://github.com/harshwardhan-1/whatsapp-clone/blob/main/server/src/models/group.message.model.ts) (Group messages store)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Client app"]
  node_app["App router<br/>[App.tsx]"]
  node_auth_ui["Login and signup<br/>[login.tsx]"]
  node_home_ui["Home screen<br/>[HomePage.tsx]"]
end

subgraph group_product["Messaging features"]
  node_chat_ui["Direct chat<br/>[chatPage.tsx]"]
  node_group_ui["Group chat<br/>[groupChatPage.tsx]"]
  node_channel_ui["Channel chat<br/>[channelChat.tsx]"]
  node_stories_ui["Stories<br/>[stories.tsx]"]
  node_nearby_ui["Nearby chat<br/>[NearByChat.tsx]"]
  node_docs_ui["Documents<br/>[Docs.tsx]"]
  node_ai_ui["AI chat<br/>[ChatWithAi.tsx]"]
  node_channel_features["Channel management"]
  node_channel_messages["Channel messages"]
  node_group_management["Group management"]
  node_group_messages["Group messages"]
end

subgraph group_server["Server runtime"]
  node_server_app["HTTP app<br/>[app.ts]"]
  node_auth_routes["Auth routes<br/>[auth.routes.ts]"]
  node_chat_routes["Chat routes<br/>[chat.routes.ts]"]
  node_story_routes["Story routes<br/>[stories.routes.ts]"]
  node_upload_routes["Upload routes"]
  node_socket_runtime["Socket runtime<br/>[socket.ts]"]
  node_server_entry["Server startup<br/>[server.ts]"]
end

subgraph group_data["Persistence"]
  node_database[("MongoDB connection<br/>[connectDB.ts]")]
  node_channel_store[("Channel messages store")]
  node_group_store[("Group messages store")]
end

node_user(("User"))

node_user -->|"opens"| node_app
node_app -->|"routes to"| node_auth_ui
node_app -->|"routes to"| node_home_ui
node_app -->|"routes to"| node_chat_ui
node_app -->|"routes to"| node_group_ui
node_app -->|"routes to"| node_channel_ui
node_app -->|"routes to"| node_stories_ui
node_app -->|"routes to"| node_nearby_ui
node_app -->|"routes to"| node_docs_ui
node_app -->|"routes to"| node_ai_ui
node_server_entry -->|"serves"| node_server_app
node_server_entry -->|"starts"| node_socket_runtime
node_server_entry -->|"connects"| node_database
node_server_app -->|"mounts"| node_auth_routes
node_server_app -->|"mounts"| node_chat_routes
node_server_app -->|"mounts"| node_story_routes
node_server_app -->|"mounts"| node_upload_routes
node_channel_messages -->|"reads and writes"| node_channel_store
node_group_messages -->|"reads and writes"| node_group_store
node_group_management -->|"creates messages"| node_group_store

click node_app "https://github.com/harshwardhan-1/whatsapp-clone/blob/main/client/src/App.tsx"
click node_auth_ui "https://github.com/harshwardhan-1/whatsapp-clone/blob/main/client/src/pages/Auth/login.tsx"
click node_home_ui "https://github.com/harshwardhan-1/whatsapp-clone/blob/main/client/src/pages/HomePage/HomePage.tsx"
click node_chat_ui "https://github.com/harshwardhan-1/whatsapp-clone/blob/main/client/src/pages/Chat/chatPage.tsx"
click node_group_ui "https://github.com/harshwardhan-1/whatsapp-clone/blob/main/client/src/pages/Chat/groupChatPage.tsx"
click node_channel_ui "https://github.com/harshwardhan-1/whatsapp-clone/blob/main/client/src/pages/Chat/channelChat.tsx"
click node_stories_ui "https://github.com/harshwardhan-1/whatsapp-clone/blob/main/client/src/components/Stories/stories.tsx"
click node_nearby_ui "https://github.com/harshwardhan-1/whatsapp-clone/blob/main/client/src/pages/Chat/NearByChat.tsx"
click node_docs_ui "https://github.com/harshwardhan-1/whatsapp-clone/blob/main/client/src/pages/Chat/Docs.tsx"
click node_ai_ui "https://github.com/harshwardhan-1/whatsapp-clone/blob/main/client/src/components/ChatWithAi/ChatWithAi.tsx"
click node_channel_features "https://github.com/harshwardhan-1/whatsapp-clone/blob/main/server/src/controllers/channels.management.controller.ts"
click node_channel_messages "https://github.com/harshwardhan-1/whatsapp-clone/blob/main/server/src/controllers/channels.message.controller.ts"
click node_group_management "https://github.com/harshwardhan-1/whatsapp-clone/blob/main/server/src/controllers/group.management.controller.ts"
click node_group_messages "https://github.com/harshwardhan-1/whatsapp-clone/blob/main/server/src/controllers/group.message.controller.ts"
click node_server_app "https://github.com/harshwardhan-1/whatsapp-clone/blob/main/server/src/app.ts"
click node_auth_routes "https://github.com/harshwardhan-1/whatsapp-clone/blob/main/server/src/routes/auth.routes.ts"
click node_chat_routes "https://github.com/harshwardhan-1/whatsapp-clone/blob/main/server/src/routes/chat.routes.ts"
click node_story_routes "https://github.com/harshwardhan-1/whatsapp-clone/blob/main/server/src/routes/stories.routes.ts"
click node_upload_routes "https://github.com/harshwardhan-1/whatsapp-clone/blob/main/server/src/routes/file.upload.routes.ts"
click node_socket_runtime "https://github.com/harshwardhan-1/whatsapp-clone/blob/main/server/src/Socket/socket.ts"
click node_server_entry "https://github.com/harshwardhan-1/whatsapp-clone/blob/main/server/src/server.ts"
click node_database "https://github.com/harshwardhan-1/whatsapp-clone/blob/main/server/src/Database/connectDB.ts"
click node_channel_store "https://github.com/harshwardhan-1/whatsapp-clone/blob/main/server/src/models/channels.message.model.ts"
click node_group_store "https://github.com/harshwardhan-1/whatsapp-clone/blob/main/server/src/models/group.message.model.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_app,node_auth_ui,node_home_ui,node_user toneBlue
class node_chat_ui,node_group_ui,node_channel_ui,node_stories_ui,node_nearby_ui,node_docs_ui,node_ai_ui,node_channel_features,node_channel_messages,node_group_management,node_group_messages toneAmber
class node_server_app,node_auth_routes,node_chat_routes,node_story_routes,node_upload_routes,node_socket_runtime,node_server_entry toneMint
class node_database,node_channel_store,node_group_store toneRose
```

## Components

### Client app

- [App router](https://github.com/harshwardhan-1/whatsapp-clone/blob/main/client/src/App.tsx): `client/src/App.tsx`
- [Login and signup](https://github.com/harshwardhan-1/whatsapp-clone/blob/main/client/src/pages/Auth/login.tsx): `client/src/pages/Auth/login.tsx`
- [Home screen](https://github.com/harshwardhan-1/whatsapp-clone/blob/main/client/src/pages/HomePage/HomePage.tsx): `client/src/pages/HomePage/HomePage.tsx`

### Messaging features

- [Direct chat](https://github.com/harshwardhan-1/whatsapp-clone/blob/main/client/src/pages/Chat/chatPage.tsx): `client/src/pages/Chat/chatPage.tsx`
- [Group chat](https://github.com/harshwardhan-1/whatsapp-clone/blob/main/client/src/pages/Chat/groupChatPage.tsx): `client/src/pages/Chat/groupChatPage.tsx`
- [Channel chat](https://github.com/harshwardhan-1/whatsapp-clone/blob/main/client/src/pages/Chat/channelChat.tsx): `client/src/pages/Chat/channelChat.tsx`
- [Stories](https://github.com/harshwardhan-1/whatsapp-clone/blob/main/client/src/components/Stories/stories.tsx): `client/src/components/Stories/stories.tsx`
- [Nearby chat](https://github.com/harshwardhan-1/whatsapp-clone/blob/main/client/src/pages/Chat/NearByChat.tsx): `client/src/pages/Chat/NearByChat.tsx`
- [Documents](https://github.com/harshwardhan-1/whatsapp-clone/blob/main/client/src/pages/Chat/Docs.tsx): `client/src/pages/Chat/Docs.tsx`
- [AI chat](https://github.com/harshwardhan-1/whatsapp-clone/blob/main/client/src/components/ChatWithAi/ChatWithAi.tsx): `client/src/components/ChatWithAi/ChatWithAi.tsx`
- [Channel management](https://github.com/harshwardhan-1/whatsapp-clone/blob/main/server/src/controllers/channels.management.controller.ts): `server/src/controllers/channels.management.controller.ts`
- [Channel messages](https://github.com/harshwardhan-1/whatsapp-clone/blob/main/server/src/controllers/channels.message.controller.ts): `server/src/controllers/channels.message.controller.ts`
- [Group management](https://github.com/harshwardhan-1/whatsapp-clone/blob/main/server/src/controllers/group.management.controller.ts): `server/src/controllers/group.management.controller.ts`
- [Group messages](https://github.com/harshwardhan-1/whatsapp-clone/blob/main/server/src/controllers/group.message.controller.ts): `server/src/controllers/group.message.controller.ts`

### Server runtime

- [HTTP app](https://github.com/harshwardhan-1/whatsapp-clone/blob/main/server/src/app.ts): `server/src/app.ts`
- [Auth routes](https://github.com/harshwardhan-1/whatsapp-clone/blob/main/server/src/routes/auth.routes.ts): `server/src/routes/auth.routes.ts`
- [Chat routes](https://github.com/harshwardhan-1/whatsapp-clone/blob/main/server/src/routes/chat.routes.ts): `server/src/routes/chat.routes.ts`
- [Story routes](https://github.com/harshwardhan-1/whatsapp-clone/blob/main/server/src/routes/stories.routes.ts): `server/src/routes/stories.routes.ts`
- [Upload routes](https://github.com/harshwardhan-1/whatsapp-clone/blob/main/server/src/routes/file.upload.routes.ts): `server/src/routes/file.upload.routes.ts`
- [Socket runtime](https://github.com/harshwardhan-1/whatsapp-clone/blob/main/server/src/Socket/socket.ts): `server/src/Socket/socket.ts`
- [Server startup](https://github.com/harshwardhan-1/whatsapp-clone/blob/main/server/src/server.ts): `server/src/server.ts`

### Persistence

- [MongoDB connection](https://github.com/harshwardhan-1/whatsapp-clone/blob/main/server/src/Database/connectDB.ts): `server/src/Database/connectDB.ts`
- [Channel messages store](https://github.com/harshwardhan-1/whatsapp-clone/blob/main/server/src/models/channels.message.model.ts): `server/src/models/channels.message.model.ts`
- [Group messages store](https://github.com/harshwardhan-1/whatsapp-clone/blob/main/server/src/models/group.message.model.ts): `server/src/models/group.message.model.ts`

### Other components

- **User**

## Connections

- User → App router: opens
- App router → Login and signup: routes to
- App router → Home screen: routes to
- App router → Direct chat: routes to
- App router → Group chat: routes to
- App router → Channel chat: routes to
- App router → Stories: routes to
- App router → Nearby chat: routes to
- App router → Documents: routes to
- App router → AI chat: routes to
- Server startup → HTTP app: serves
- Server startup → Socket runtime: starts
- Server startup → MongoDB connection: connects
- HTTP app → Auth routes: mounts
- HTTP app → Chat routes: mounts
- HTTP app → Story routes: mounts
- HTTP app → Upload routes: mounts
- Channel messages → Channel messages store: reads and writes
- Group messages → Group messages store: reads and writes
- Group management → Group messages store: creates messages