# dhanunjaya23-02-2006/quickchat architecture

> Architecture diagram of the GitHub repository dhanunjaya23-02-2006/quickchat, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-11). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/dhanunjaya23-02-2006/quickchat
- Repository: https://github.com/dhanunjaya23-02-2006/quickchat

## Overview

QuickChat is a real-time one-to-one chat product. Users authenticate, discover contacts, open message history, send text or image messages, and receive live delivery and presence updates; they can also edit profiles and track unread messages. The client coordinates authentication and chat state, while Express routes delegate to controllers backed by MongoDB, Cloudinary, and Socket.IO. The graph reflects the supplied excerpts, source-index references, and README; some UI and backend modules were not sampled, so their internal links are omitted where unsupported.

Main entry points: [`backend/server.js`](https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/backend/server.js) (Express and Socket.IO server), [`backend/controllers/messageController.js`](https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/backend/controllers/messageController.js) (Conversation and delivery logic), [`client/context/ChatContext.jsx`](https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/client/context/ChatContext.jsx) (Chat state and API client), [`client/src/App.jsx`](https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/client/src/App.jsx) (Routes and shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Web client"]
  node_app["Routes and shell<br/>[App.jsx]"]
  node_authui["Login and signup<br/>[LoginPage.jsx]"]
  node_home["Chat workspace<br/>[HomePage.jsx]"]
  node_profileui["Profile editor<br/>[ProfilePage.jsx]"]
  node_sidebar["Contact sidebar<br/>[Sidebar.jsx]"]
  node_chatview["Conversation view<br/>[ChatContainer.jsx]"]
  node_details["Contact details<br/>[RightSidebar.jsx]"]
end

subgraph group_identity["Identity and profiles"]
  node_authstate["Auth state and socket client<br/>[AuthContext.jsx]"]
  node_authroutes["Account routes<br/>[userRoutes.js]"]
  node_authcontroller["Account and profile logic<br/>[UserController.js]"]
  node_authguard["JWT route guard<br/>[auth.js]"]
end

subgraph group_messaging["Messaging"]
  node_chatstate["Chat state and API client<br/>[ChatContext.jsx]"]
  node_messageroutes["Message routes<br/>[messageRoutes.js]"]
  node_messagecontroller["Conversation and delivery logic"]
end

subgraph group_realtime["Realtime presence"]
  node_server["Express and Socket.IO server<br/>[server.js]"]
  node_socket["Socket transport<br/>[socket.js]"]
end

subgraph group_data["Persistence and media"]
  node_users[("User records<br/>[user.js]")]
  node_messages[("Message records<br/>[message.js]")]
  node_dbconn["MongoDB connection<br/>[db.js]"]
  node_cloudinary["Image hosting<br/>[cloudinary.js]"]
end

node_person(("Chat user"))
node_mongodb[("MongoDB")]
node_cloudservice["Cloudinary service"]

node_person -->|"uses"| node_app
node_app -->|"routes to"| node_authui
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_profileui
node_home -.-> node_sidebar
node_home -.-> node_chatview
node_home -.-> node_details
node_authui -.->|"authenticates through"| node_authstate
node_profileui -.->|"updates through"| node_authstate
node_authstate -->|"calls auth API"| node_authroutes
node_authroutes -->|"dispatches"| node_authcontroller
node_authroutes -->|"protects routes"| node_authguard
node_authguard -->|"loads user"| node_users
node_authcontroller -->|"reads and writes"| node_users
node_authcontroller -->|"uploads profile image"| node_cloudinary
node_cloudinary -->|"stores image"| node_cloudservice
node_chatview -->|"uses chat state"| node_chatstate
node_sidebar -->|"uses chat state"| node_chatstate
node_details -->|"uses chat state"| node_chatstate
node_chatstate -->|"calls message API"| node_messageroutes
node_messageroutes -->|"dispatches"| node_messagecontroller
node_messageroutes -->|"protects routes"| node_authguard
node_messagecontroller -->|"reads and writes"| node_messages
node_messagecontroller -->|"reads contacts"| node_users
node_messagecontroller -->|"uploads message image"| node_cloudinary
node_server -->|"mounts routes"| node_authroutes
node_server -->|"mounts routes"| node_messageroutes
node_server -->|"initializes"| node_socket
node_server -->|"connects database"| node_dbconn
node_dbconn -->|"connects"| node_mongodb
node_users -->|"persists in"| node_mongodb
node_messages -->|"persists in"| node_mongodb
node_authstate -->|"opens Socket.IO connection"| node_server
node_server -->|"tracks presence"| node_socket
node_messagecontroller -->|"emits new message"| node_socket
node_chatstate -->|"receives messages"| node_socket

click node_app "https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/client/src/App.jsx"
click node_authui "https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/client/src/pages/LoginPage.jsx"
click node_home "https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/client/src/pages/HomePage.jsx"
click node_profileui "https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/client/src/pages/ProfilePage.jsx"
click node_sidebar "https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/client/src/components/Sidebar.jsx"
click node_chatview "https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/client/src/components/ChatContainer.jsx"
click node_details "https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/client/src/components/RightSidebar.jsx"
click node_authstate "https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/client/context/AuthContext.jsx"
click node_authroutes "https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/backend/routes/userRoutes.js"
click node_authcontroller "https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/backend/controllers/UserController.js"
click node_authguard "https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/backend/middleware/auth.js"
click node_chatstate "https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/client/context/ChatContext.jsx"
click node_messageroutes "https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/backend/routes/messageRoutes.js"
click node_messagecontroller "https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/backend/controllers/messageController.js"
click node_server "https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/backend/server.js"
click node_socket "https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/backend/lib/socket.js"
click node_users "https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/backend/models/user.js"
click node_messages "https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/backend/models/message.js"
click node_dbconn "https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/backend/lib/db.js"
click node_cloudinary "https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/backend/lib/cloudinary.js"

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_authui,node_home,node_profileui,node_sidebar,node_chatview,node_details,node_person toneBlue
class node_authstate,node_authroutes,node_authcontroller,node_authguard,node_mongodb toneAmber
class node_chatstate,node_messageroutes,node_messagecontroller toneMint
class node_server,node_socket toneRose
class node_users,node_messages,node_dbconn,node_cloudinary,node_cloudservice toneIndigo
```

## Components

### Web client

- [Routes and shell](https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/client/src/App.jsx): `client/src/App.jsx`
- [Login and signup](https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/client/src/pages/LoginPage.jsx): `client/src/pages/LoginPage.jsx`
- [Chat workspace](https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/client/src/pages/HomePage.jsx): `client/src/pages/HomePage.jsx`
- [Profile editor](https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/client/src/pages/ProfilePage.jsx): `client/src/pages/ProfilePage.jsx`
- [Contact sidebar](https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/client/src/components/Sidebar.jsx): `client/src/components/Sidebar.jsx`
- [Conversation view](https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/client/src/components/ChatContainer.jsx): `client/src/components/ChatContainer.jsx`
- [Contact details](https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/client/src/components/RightSidebar.jsx): `client/src/components/RightSidebar.jsx`

### Identity and profiles

- [Auth state and socket client](https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/client/context/AuthContext.jsx): `client/context/AuthContext.jsx`
- [Account routes](https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/backend/routes/userRoutes.js): `backend/routes/userRoutes.js`
- [Account and profile logic](https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/backend/controllers/UserController.js): `backend/controllers/UserController.js`
- [JWT route guard](https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/backend/middleware/auth.js): `backend/middleware/auth.js`

### Messaging

- [Chat state and API client](https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/client/context/ChatContext.jsx): `client/context/ChatContext.jsx`
- [Message routes](https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/backend/routes/messageRoutes.js): `backend/routes/messageRoutes.js`
- [Conversation and delivery logic](https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/backend/controllers/messageController.js): `backend/controllers/messageController.js`

### Realtime presence

- [Express and Socket.IO server](https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/backend/server.js): `backend/server.js`
- [Socket transport](https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/backend/lib/socket.js): `backend/lib/socket.js`

### Persistence and media

- [User records](https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/backend/models/user.js): `backend/models/user.js`
- [Message records](https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/backend/models/message.js): `backend/models/message.js`
- [MongoDB connection](https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/backend/lib/db.js): `backend/lib/db.js`
- [Image hosting](https://github.com/dhanunjaya23-02-2006/quickchat/blob/main/backend/lib/cloudinary.js): `backend/lib/cloudinary.js`

### Other components

- **Chat user**
- **MongoDB**
- **Cloudinary service**

## Connections

- Chat user → Routes and shell: uses (evidence: `README.md`)
- Routes and shell → Login and signup: routes to (evidence: `client/src/App.jsx`)
- Routes and shell → Chat workspace: routes to (evidence: `client/src/App.jsx`)
- Routes and shell → Profile editor: routes to (evidence: `client/src/App.jsx`)
- Chat workspace → Contact sidebar
- Chat workspace → Conversation view
- Chat workspace → Contact details
- Login and signup → Auth state and socket client: authenticates through
- Profile editor → Auth state and socket client: updates through
- Auth state and socket client → Account routes: calls auth API (evidence: `client/context/AuthContext.jsx`)
- Account routes → Account and profile logic: dispatches (evidence: `backend/routes/userRoutes.js`)
- Account routes → JWT route guard: protects routes (evidence: `backend/routes/userRoutes.js`)
- JWT route guard → User records: loads user (evidence: `backend/middleware/auth.js`)
- Account and profile logic → User records: reads and writes (evidence: `backend/controllers/UserController.js`)
- Account and profile logic → Image hosting: uploads profile image (evidence: `backend/controllers/UserController.js`)
- Image hosting → Cloudinary service: stores image (evidence: `README.md`)
- Conversation view → Chat state and API client: uses chat state (evidence: `client/src/components/ChatContainer.jsx`)
- Contact sidebar → Chat state and API client: uses chat state (evidence: `client/src/components/Sidebar.jsx`)
- Contact details → Chat state and API client: uses chat state (evidence: `client/src/components/RightSidebar.jsx`)
- Chat state and API client → Message routes: calls message API (evidence: `client/context/ChatContext.jsx`)
- Message routes → Conversation and delivery logic: dispatches (evidence: `backend/routes/messageRoutes.js`)
- Message routes → JWT route guard: protects routes (evidence: `backend/routes/messageRoutes.js`)
- Conversation and delivery logic → Message records: reads and writes (evidence: `backend/controllers/messageController.js`)
- Conversation and delivery logic → User records: reads contacts (evidence: `backend/controllers/messageController.js`)
- Conversation and delivery logic → Image hosting: uploads message image (evidence: `backend/controllers/messageController.js`)
- Express and Socket.IO server → Account routes: mounts routes (evidence: `backend/server.js`)
- Express and Socket.IO server → Message routes: mounts routes (evidence: `backend/server.js`)
- Express and Socket.IO server → Socket transport: initializes (evidence: `backend/server.js`)
- Express and Socket.IO server → MongoDB connection: connects database (evidence: `backend/server.js`)
- MongoDB connection → MongoDB: connects (evidence: `README.md`)
- User records → MongoDB: persists in (evidence: `README.md`)
- Message records → MongoDB: persists in (evidence: `README.md`)
- Auth state and socket client → Express and Socket.IO server: opens Socket.IO connection (evidence: `client/context/AuthContext.jsx`)
- Express and Socket.IO server → Socket transport: tracks presence (evidence: `backend/server.js`)
- Conversation and delivery logic → Socket transport: emits new message (evidence: `backend/controllers/messageController.js`)
- Chat state and API client → Socket transport: receives messages (evidence: `client/context/ChatContext.jsx`)