# tranminhhieu20/chatify architecture

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

- Interactive diagram: https://gitdiagram.com/tranminhhieu20/chatify
- Repository: https://github.com/tranminhhieu20/chatify

## Overview

Chatify is a web chat application with account/profile management and one-to-one messaging. Users sign up or log in, then browse contacts or existing conversations, load message history, and send text or images; the client encrypts message text and decrypts received messages, while the backend persists messages and can dispatch them over Socket.IO. The tree and sampled source support the principal API and state-store links; message-route wiring and most page/component interactions are not sampled, so those connections are omitted.

Main entry points: [`backend/src/controllers/message.controller.js`](https://github.com/tranminhhieu20/chatify/blob/main/backend/src/controllers/message.controller.js) (Message handlers), [`backend/src/server.js`](https://github.com/tranminhhieu20/chatify/blob/main/backend/src/server.js) (HTTP server), [`frontend/src/App.jsx`](https://github.com/tranminhhieu20/chatify/blob/main/frontend/src/App.jsx) (App routing), [`backend/src/controllers/auth.controller.js`](https://github.com/tranminhhieu20/chatify/blob/main/backend/src/controllers/auth.controller.js) (Auth handlers)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Client app"]
  node_app["App routing<br/>[App.jsx]"]
  node_authpages["Login and signup"]
  node_chatpage["Chat screen<br/>[ChatPage.jsx]"]
  node_axios["HTTP client<br/>[axios.js]"]
end

subgraph group_identity["Identity and profile"]
  node_authstore["Auth state<br/>[useAuthStore.js]"]
  node_authapi["Auth routes<br/>[auth.route.js]"]
  node_authcontroller["Auth handlers<br/>[auth.controller.js]"]
  node_authmiddleware["JWT protection<br/>[auth.middleware.js]"]
  node_userdb[("User records<br/>[User.js]")]
end

subgraph group_messaging["Chat messaging"]
  node_chatstore["Chat state<br/>[useChatStore.js]"]
  node_crypto["Message crypto<br/>[crypto.js]"]
  node_messageapi["Message routes<br/>[message.route.js]"]
  node_messagecontroller["Message handlers"]
  node_messagedb[("Message records<br/>[Message.js]")]
end

subgraph group_platform["Backend platform"]
  node_server["HTTP server<br/>[server.js]"]
  node_socket["Socket service<br/>[socket.js]"]
  node_cloudinary["Cloudinary media"]
  node_mongo[("MongoDB")]
  node_resend["Resend email"]
  node_emailhandlers["Welcome email<br/>[emailHandlers.js]"]
end

node_user(("Chat user"))

node_user -->|"uses"| node_app
node_app -->|"checks session"| node_authstore
node_app -->|"routes to"| node_authpages
node_app -->|"routes to"| node_chatpage
node_authpages -->|"submits credentials"| node_authstore
node_chatpage -->|"uses chat state"| node_chatstore
node_authstore -->|"calls API"| node_axios
node_chatstore -->|"calls API"| node_axios
node_chatstore -->|"encrypts and decrypts"| node_crypto
node_authstore -->|"connects client"| node_socket
node_server -->|"mounts routes"| node_authapi
node_server -->|"mounts routes"| node_messageapi
node_server -->|"listens on"| node_socket
node_server -->|"connects"| node_mongo
node_authapi -->|"dispatches"| node_authcontroller
node_authapi -->|"protects routes"| node_authmiddleware
node_authmiddleware -->|"loads user"| node_userdb
node_authcontroller -->|"reads and writes"| node_userdb
node_authcontroller -.->|"uploads profile"| node_cloudinary
node_authcontroller -->|"sends welcome"| node_emailhandlers
node_emailhandlers -->|"sends email"| node_resend
node_messageapi -->|"dispatches"| node_messagecontroller
node_messagecontroller -->|"reads and writes"| node_messagedb
node_messagecontroller -->|"reads users"| node_userdb
node_messagecontroller -.->|"uploads images"| node_cloudinary
node_messagecontroller -->|"emits messages"| node_socket

click node_app "https://github.com/tranminhhieu20/chatify/blob/main/frontend/src/App.jsx"
click node_authpages "https://github.com/tranminhhieu20/chatify/tree/main/frontend/src/pages"
click node_chatpage "https://github.com/tranminhhieu20/chatify/blob/main/frontend/src/pages/ChatPage.jsx"
click node_authstore "https://github.com/tranminhhieu20/chatify/blob/main/frontend/src/store/useAuthStore.js"
click node_authapi "https://github.com/tranminhhieu20/chatify/blob/main/backend/src/routes/auth.route.js"
click node_authcontroller "https://github.com/tranminhhieu20/chatify/blob/main/backend/src/controllers/auth.controller.js"
click node_authmiddleware "https://github.com/tranminhhieu20/chatify/blob/main/backend/src/middleware/auth.middleware.js"
click node_userdb "https://github.com/tranminhhieu20/chatify/blob/main/backend/src/models/User.js"
click node_chatstore "https://github.com/tranminhhieu20/chatify/blob/main/frontend/src/store/useChatStore.js"
click node_crypto "https://github.com/tranminhhieu20/chatify/blob/main/frontend/src/lib/crypto.js"
click node_messageapi "https://github.com/tranminhhieu20/chatify/blob/main/backend/src/routes/message.route.js"
click node_messagecontroller "https://github.com/tranminhhieu20/chatify/blob/main/backend/src/controllers/message.controller.js"
click node_messagedb "https://github.com/tranminhhieu20/chatify/blob/main/backend/src/models/Message.js"
click node_server "https://github.com/tranminhhieu20/chatify/blob/main/backend/src/server.js"
click node_socket "https://github.com/tranminhhieu20/chatify/blob/main/backend/src/lib/socket.js"
click node_emailhandlers "https://github.com/tranminhhieu20/chatify/blob/main/backend/src/emails/emailHandlers.js"
click node_axios "https://github.com/tranminhhieu20/chatify/blob/main/frontend/src/lib/axios.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_authpages,node_chatpage,node_axios,node_user toneBlue
class node_authstore,node_authapi,node_authcontroller,node_authmiddleware,node_userdb toneAmber
class node_chatstore,node_crypto,node_messageapi,node_messagecontroller,node_messagedb toneMint
class node_server,node_socket,node_cloudinary,node_mongo,node_resend,node_emailhandlers toneRose
```

## Components

### Client app

- [App routing](https://github.com/tranminhhieu20/chatify/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Login and signup](https://github.com/tranminhhieu20/chatify/tree/main/frontend/src/pages): `frontend/src/pages`
- [Chat screen](https://github.com/tranminhhieu20/chatify/blob/main/frontend/src/pages/ChatPage.jsx): `frontend/src/pages/ChatPage.jsx`
- [HTTP client](https://github.com/tranminhhieu20/chatify/blob/main/frontend/src/lib/axios.js): `frontend/src/lib/axios.js`

### Identity and profile

- [Auth state](https://github.com/tranminhhieu20/chatify/blob/main/frontend/src/store/useAuthStore.js): `frontend/src/store/useAuthStore.js`
- [Auth routes](https://github.com/tranminhhieu20/chatify/blob/main/backend/src/routes/auth.route.js): `backend/src/routes/auth.route.js`
- [Auth handlers](https://github.com/tranminhhieu20/chatify/blob/main/backend/src/controllers/auth.controller.js): `backend/src/controllers/auth.controller.js`
- [JWT protection](https://github.com/tranminhhieu20/chatify/blob/main/backend/src/middleware/auth.middleware.js): `backend/src/middleware/auth.middleware.js`
- [User records](https://github.com/tranminhhieu20/chatify/blob/main/backend/src/models/User.js): `backend/src/models/User.js`

### Chat messaging

- [Chat state](https://github.com/tranminhhieu20/chatify/blob/main/frontend/src/store/useChatStore.js): `frontend/src/store/useChatStore.js`
- [Message crypto](https://github.com/tranminhhieu20/chatify/blob/main/frontend/src/lib/crypto.js): `frontend/src/lib/crypto.js`
- [Message routes](https://github.com/tranminhhieu20/chatify/blob/main/backend/src/routes/message.route.js): `backend/src/routes/message.route.js`
- [Message handlers](https://github.com/tranminhhieu20/chatify/blob/main/backend/src/controllers/message.controller.js): `backend/src/controllers/message.controller.js`
- [Message records](https://github.com/tranminhhieu20/chatify/blob/main/backend/src/models/Message.js): `backend/src/models/Message.js`

### Backend platform

- [HTTP server](https://github.com/tranminhhieu20/chatify/blob/main/backend/src/server.js): `backend/src/server.js`
- [Socket service](https://github.com/tranminhhieu20/chatify/blob/main/backend/src/lib/socket.js): `backend/src/lib/socket.js`
- **Cloudinary media**
- **MongoDB**
- **Resend email**
- [Welcome email](https://github.com/tranminhhieu20/chatify/blob/main/backend/src/emails/emailHandlers.js): `backend/src/emails/emailHandlers.js`

### Other components

- **Chat user**

## Connections

- Chat user → App routing: uses
- App routing → Auth state: checks session
- App routing → Login and signup: routes to
- App routing → Chat screen: routes to
- Login and signup → Auth state: submits credentials
- Chat screen → Chat state: uses chat state
- Auth state → HTTP client: calls API
- Chat state → HTTP client: calls API
- Chat state → Message crypto: encrypts and decrypts
- Auth state → Socket service: connects client
- HTTP server → Auth routes: mounts routes
- HTTP server → Message routes: mounts routes
- HTTP server → Socket service: listens on
- HTTP server → MongoDB: connects
- Auth routes → Auth handlers: dispatches
- Auth routes → JWT protection: protects routes
- JWT protection → User records: loads user
- Auth handlers → User records: reads and writes
- Auth handlers → Cloudinary media: uploads profile
- Auth handlers → Welcome email: sends welcome
- Welcome email → Resend email: sends email
- Message routes → Message handlers: dispatches
- Message handlers → Message records: reads and writes
- Message handlers → User records: reads users
- Message handlers → Cloudinary media: uploads images
- Message handlers → Socket service: emits messages