# amritesh-mishra-15/chatify architecture

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

- Interactive diagram: https://gitdiagram.com/amritesh-mishra-15/chatify
- Repository: https://github.com/amritesh-mishra-15/chatify

## Overview

#### Purpose and entry points
This is a two-process real-time chat system: a React/Vite client and Node/Express API with Socket.IO. The backend starts from `backend/src/server.js`; the browser mounts through `frontend/src/main.jsx` and routes application state/UI through `frontend/src/App.jsx`.

#### Backend HTTP boundary
Express exposes authentication and messaging REST APIs through `backend/src/routes/auth.route.js` and `backend/src/routes/message.route.js`. Their controllers, `backend/src/controllers/auth.controller.js` and `backend/src/controllers/message.controller.js`, own request handling, validation/orchestration, and persistence-facing behavior.

#### Identity and request protection
Custom JWT authentication is enforced as middleware before protected API behavior in `backend/src/middleware/auth.middleware.js`. Arcjet protection/rate limiting forms a separate perimeter in `backend/src/middleware/arcjet.middleware.js`, backed by `backend/src/lib/arcjet.js`. Environment-derived secrets and service configuration are centralized in `backend/src/lib/env.js`.

#### Persistence and domain model
MongoDB connectivity is established in `backend/src/lib/db.js`. The persistent chat domain is modeled by users and messages in `backend/src/models/User.js` and `backend/src/models/Message.js`; controllers use these records to establish accounts, conversations, and message history.

#### Realtime transport and presence
Socket.IO is initialized and managed in `backend/src/lib/socket.js`. Socket-specific authentication is separated from HTTP auth in `backend/src/middleware/socket.auth.middleware.js`, creating an authenticated realtime boundary for message delivery, online/offline presence, and typing signals. The frontend chat state connects to this transport through `frontend/src/store/useChatStore.js`.

#### External-service integrations
User image/media upload support is delegated to Cloudinary via `backend/src/lib/cloudinary.js`. Signup-related welcome email delivery is delegated to Resend through `backend/src/lib/resend.js`, with dispatch and content separated in `backend/src/emails/emailHandlers.js` and `backend/src/emails/emailTemplates.js`. These integrations remain backend-only, shielding credentials from the browser.

#### Frontend state and chat experience
Zustand separates session identity from chat/conversation state in `frontend/src/store/useAuthStore.js` and `frontend/src/store/useChatStore.js`. REST calls are centralized behind `frontend/src/lib/axios.js`. The principal authenticated experience is `frontend/src/pages/ChatPage.jsx`, composed around conversation selection, history, and composition components such as `frontend/src/components/ChatsList.jsx`, `frontend/src/components/ChatContainer.jsx`, and `frontend/src/components/MessageInput.jsx`.

#### Primary flow
A user signs up or logs in from `frontend/src/pages/SignUpPage.jsx` or `frontend/src/pages/LoginPage.jsx`; the API creates/authenticates the user and returns JWT-backed session state. The client uses authenticated REST calls to load users/history and establish conversations, then opens an authenticated Socket.IO channel for live events. Sent messages cross the realtime/API boundary, are persisted to MongoDB, emitted to recipients, and rendered from the chat store; media and welcome-email side effects route to Cloudinary and Resend respectively.

Main entry points: [`backend/src/lib/env.js`](https://github.com/amritesh-mishra-15/chatify/blob/main/backend/src/lib/env.js) (Service environment), [`backend/src/controllers/auth.controller.js`](https://github.com/amritesh-mishra-15/chatify/blob/main/backend/src/controllers/auth.controller.js) (Auth and message controllers), [`backend/src/lib/socket.js`](https://github.com/amritesh-mishra-15/chatify/blob/main/backend/src/lib/socket.js) (Socket.IO gateway), [`frontend/src/App.jsx`](https://github.com/amritesh-mishra-15/chatify/blob/main/frontend/src/App.jsx) (App routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["React client"]
  node_client_entry["Client entry<br/>Vite bootstrap<br/>[main.jsx]"]
  node_app["App routes<br/>React app<br/>[App.jsx]"]
  node_auth_pages["Login and signup<br/>auth screens<br/>[LoginPage.jsx]"]
  node_chat_page["Chat experience<br/>authenticated page<br/>[ChatPage.jsx]"]
  node_auth_store["Session state<br/>Zustand store<br/>[useAuthStore.js]"]
  node_chat_store["Chat state and socket<br/>Zustand store<br/>[useChatStore.js]"]
  node_http_client["REST client<br/>Axios wrapper<br/>[axios.js]"]
end

subgraph group_http["API and security"]
  node_server["Backend server<br/>Express entry<br/>[server.js]"]
  node_api_routes["Auth and message APIs<br/>Express routes<br/>[auth.route.js]"]
  node_controllers["Auth and message controllers<br/>request orchestration<br/>[auth.controller.js]"]
  node_jwt_auth["JWT API auth<br/>Express middleware<br/>[auth.middleware.js]"]
  node_arcjet["Arcjet perimeter<br/>rate-limit middleware"]
  node_environment["Service environment<br/>environment config<br/>[env.js]"]
end

subgraph group_realtime["Realtime service"]
  node_socket["Socket.IO gateway<br/>realtime transport<br/>[socket.js]"]
  node_socket_auth["Socket authentication<br/>Socket.IO middleware"]
end

subgraph group_data["Persistence"]
  node_mongo[("MongoDB<br/>database connection<br/>[db.js]")]
  node_domain_models["Users and messages<br/>MongoDB models<br/>[User.js]"]
end

subgraph group_external["External services"]
  node_cloudinary["Cloudinary media<br/>upload integration<br/>[cloudinary.js]"]
  node_email_dispatch["Welcome email dispatch<br/>email handler<br/>[emailHandlers.js]"]
  node_resend["Resend<br/>email integration<br/>[resend.js]"]
end

node_client_entry -->|"mounts"| node_app
node_app -->|"routes to"| node_auth_pages
node_app -->|"routes to"| node_chat_page
node_auth_pages -->|"establishes session"| node_auth_store
node_chat_page -->|"renders from"| node_chat_store
node_auth_store -->|"uses"| node_http_client
node_chat_store -->|"loads users and history"| node_http_client
node_http_client -->|"authenticated REST"| node_server
node_server -->|"protects requests"| node_arcjet
node_arcjet -->|"permits API traffic"| node_api_routes
node_api_routes -->|"protects private endpoints"| node_jwt_auth
node_jwt_auth -->|"authorizes"| node_controllers
node_api_routes -->|"dispatches requests"| node_controllers
node_controllers -->|"reads and writes"| node_domain_models
node_domain_models -->|"persists in"| node_mongo
node_chat_store -->|"opens authenticated channel"| node_socket
node_socket -->|"authenticates connections"| node_socket_auth
node_socket_auth -->|"identifies users for events"| node_domain_models
node_controllers -->|"emits message events"| node_socket
node_controllers -->|"uploads media"| node_cloudinary
node_controllers -->|"triggers on signup"| node_email_dispatch
node_email_dispatch -->|"sends through"| node_resend
node_environment -.->|"configures"| node_server
node_environment -.->|"configures"| node_arcjet
node_environment -.->|"configures"| node_socket
node_environment -.->|"configures"| node_mongo
node_environment -.->|"configures"| node_cloudinary
node_environment -.->|"configures"| node_resend

click node_client_entry "https://github.com/amritesh-mishra-15/chatify/blob/main/frontend/src/main.jsx"
click node_app "https://github.com/amritesh-mishra-15/chatify/blob/main/frontend/src/App.jsx"
click node_auth_pages "https://github.com/amritesh-mishra-15/chatify/blob/main/frontend/src/pages/LoginPage.jsx"
click node_chat_page "https://github.com/amritesh-mishra-15/chatify/blob/main/frontend/src/pages/ChatPage.jsx"
click node_auth_store "https://github.com/amritesh-mishra-15/chatify/blob/main/frontend/src/store/useAuthStore.js"
click node_chat_store "https://github.com/amritesh-mishra-15/chatify/blob/main/frontend/src/store/useChatStore.js"
click node_http_client "https://github.com/amritesh-mishra-15/chatify/blob/main/frontend/src/lib/axios.js"
click node_server "https://github.com/amritesh-mishra-15/chatify/blob/main/backend/src/server.js"
click node_api_routes "https://github.com/amritesh-mishra-15/chatify/blob/main/backend/src/routes/auth.route.js"
click node_controllers "https://github.com/amritesh-mishra-15/chatify/blob/main/backend/src/controllers/auth.controller.js"
click node_jwt_auth "https://github.com/amritesh-mishra-15/chatify/blob/main/backend/src/middleware/auth.middleware.js"
click node_arcjet "https://github.com/amritesh-mishra-15/chatify/blob/main/backend/src/middleware/arcjet.middleware.js"
click node_socket "https://github.com/amritesh-mishra-15/chatify/blob/main/backend/src/lib/socket.js"
click node_socket_auth "https://github.com/amritesh-mishra-15/chatify/blob/main/backend/src/middleware/socket.auth.middleware.js"
click node_mongo "https://github.com/amritesh-mishra-15/chatify/blob/main/backend/src/lib/db.js"
click node_domain_models "https://github.com/amritesh-mishra-15/chatify/blob/main/backend/src/models/User.js"
click node_cloudinary "https://github.com/amritesh-mishra-15/chatify/blob/main/backend/src/lib/cloudinary.js"
click node_email_dispatch "https://github.com/amritesh-mishra-15/chatify/blob/main/backend/src/emails/emailHandlers.js"
click node_resend "https://github.com/amritesh-mishra-15/chatify/blob/main/backend/src/lib/resend.js"
click node_environment "https://github.com/amritesh-mishra-15/chatify/blob/main/backend/src/lib/env.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_client_entry,node_app,node_auth_pages,node_chat_page,node_auth_store,node_chat_store,node_http_client toneBlue
class node_server,node_api_routes,node_controllers,node_jwt_auth,node_arcjet,node_environment toneAmber
class node_socket,node_socket_auth toneMint
class node_mongo,node_domain_models toneRose
class node_cloudinary,node_email_dispatch,node_resend toneIndigo
```

## Components

### React client

- [Client entry](https://github.com/amritesh-mishra-15/chatify/blob/main/frontend/src/main.jsx): Vite bootstrap · `frontend/src/main.jsx`
- [App routes](https://github.com/amritesh-mishra-15/chatify/blob/main/frontend/src/App.jsx): React app · `frontend/src/App.jsx`
- [Login and signup](https://github.com/amritesh-mishra-15/chatify/blob/main/frontend/src/pages/LoginPage.jsx): auth screens · `frontend/src/pages/LoginPage.jsx`
- [Chat experience](https://github.com/amritesh-mishra-15/chatify/blob/main/frontend/src/pages/ChatPage.jsx): authenticated page · Composes conversation selection, history, and message composition. · `frontend/src/pages/ChatPage.jsx`
- [Session state](https://github.com/amritesh-mishra-15/chatify/blob/main/frontend/src/store/useAuthStore.js): Zustand store · `frontend/src/store/useAuthStore.js`
- [Chat state and socket](https://github.com/amritesh-mishra-15/chatify/blob/main/frontend/src/store/useChatStore.js): Zustand store · Owns conversations, live events, presence, and typing state. · `frontend/src/store/useChatStore.js`
- [REST client](https://github.com/amritesh-mishra-15/chatify/blob/main/frontend/src/lib/axios.js): Axios wrapper · `frontend/src/lib/axios.js`

### API and security

- [Backend server](https://github.com/amritesh-mishra-15/chatify/blob/main/backend/src/server.js): Express entry · `backend/src/server.js`
- [Auth and message APIs](https://github.com/amritesh-mishra-15/chatify/blob/main/backend/src/routes/auth.route.js): Express routes · `backend/src/routes/auth.route.js`
- [Auth and message controllers](https://github.com/amritesh-mishra-15/chatify/blob/main/backend/src/controllers/auth.controller.js): request orchestration · `backend/src/controllers/auth.controller.js`
- [JWT API auth](https://github.com/amritesh-mishra-15/chatify/blob/main/backend/src/middleware/auth.middleware.js): Express middleware · `backend/src/middleware/auth.middleware.js`
- [Arcjet perimeter](https://github.com/amritesh-mishra-15/chatify/blob/main/backend/src/middleware/arcjet.middleware.js): rate-limit middleware · `backend/src/middleware/arcjet.middleware.js`
- [Service environment](https://github.com/amritesh-mishra-15/chatify/blob/main/backend/src/lib/env.js): environment config · Supplies secrets and backend service configuration. · `backend/src/lib/env.js`

### Realtime service

- [Socket.IO gateway](https://github.com/amritesh-mishra-15/chatify/blob/main/backend/src/lib/socket.js): realtime transport · Delivers messages, presence, and typing signals. · `backend/src/lib/socket.js`
- [Socket authentication](https://github.com/amritesh-mishra-15/chatify/blob/main/backend/src/middleware/socket.auth.middleware.js): Socket.IO middleware · `backend/src/middleware/socket.auth.middleware.js`

### Persistence

- [MongoDB](https://github.com/amritesh-mishra-15/chatify/blob/main/backend/src/lib/db.js): database connection · `backend/src/lib/db.js`
- [Users and messages](https://github.com/amritesh-mishra-15/chatify/blob/main/backend/src/models/User.js): MongoDB models · `backend/src/models/User.js`

### External services

- [Cloudinary media](https://github.com/amritesh-mishra-15/chatify/blob/main/backend/src/lib/cloudinary.js): upload integration · `backend/src/lib/cloudinary.js`
- [Welcome email dispatch](https://github.com/amritesh-mishra-15/chatify/blob/main/backend/src/emails/emailHandlers.js): email handler · Builds and sends signup-related email using templates. · `backend/src/emails/emailHandlers.js`
- [Resend](https://github.com/amritesh-mishra-15/chatify/blob/main/backend/src/lib/resend.js): email integration · `backend/src/lib/resend.js`

## Connections

- Client entry → App routes: mounts
- App routes → Login and signup: routes to
- App routes → Chat experience: routes to
- Login and signup → Session state: establishes session
- Chat experience → Chat state and socket: renders from
- Session state → REST client: uses
- Chat state and socket → REST client: loads users and history
- REST client → Backend server: authenticated REST
- Backend server → Arcjet perimeter: protects requests
- Arcjet perimeter → Auth and message APIs: permits API traffic
- Auth and message APIs → JWT API auth: protects private endpoints
- JWT API auth → Auth and message controllers: authorizes
- Auth and message APIs → Auth and message controllers: dispatches requests
- Auth and message controllers → Users and messages: reads and writes
- Users and messages → MongoDB: persists in
- Chat state and socket → Socket.IO gateway: opens authenticated channel
- Socket.IO gateway → Socket authentication: authenticates connections
- Socket authentication → Users and messages: identifies users for events
- Auth and message controllers → Socket.IO gateway: emits message events
- Auth and message controllers → Cloudinary media: uploads media
- Auth and message controllers → Welcome email dispatch: triggers on signup
- Welcome email dispatch → Resend: sends through
- Service environment → Backend server: configures
- Service environment → Arcjet perimeter: configures
- Service environment → Socket.IO gateway: configures
- Service environment → MongoDB: configures
- Service environment → Cloudinary media: configures
- Service environment → Resend: configures