# shivaay100/chatwire architecture

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

## Overview

ChatWire is a real-time messaging web app. Users sign up or log in, then browse contacts or existing chat partners, load conversation history, and send text or image messages; the backend persists messages and dispatches them to connected recipients. The React client keeps auth/chat state and uses REST plus Socket.IO. The README also documents responsive UI and CORS support. Some route, page, and socket wiring is inferred only where explicit in sampled code or documented; unsampled subsystem paths use their enclosing directories.

Main entry points: [`backend/src/controllers/message.controller.js`](https://github.com/shivaay100/chatwire/blob/main/backend/src/controllers/message.controller.js) (Message operations), [`backend/src/controllers/auth.controller.js`](https://github.com/shivaay100/chatwire/blob/main/backend/src/controllers/auth.controller.js) (Auth operations), [`backend/src/lib/socket.js`](https://github.com/shivaay100/chatwire/blob/main/backend/src/lib/socket.js) (Socket service), [`frontend/src/store/useAuthStore.js`](https://github.com/shivaay100/chatwire/blob/main/frontend/src/store/useAuthStore.js) (Auth state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Web client"]
  node_app["App routing<br/>[App.jsx]"]
  node_authpages["Login and signup"]
  node_chatpage["Chat screen<br/>[ChatPage.jsx]"]
  node_chatui["Chat components"]
  node_authstore["Auth state<br/>[useAuthStore.js]"]
  node_chatstore["Chat state<br/>[useChatStore.js]"]
  node_http["HTTP client<br/>[axios.js]"]
end

subgraph group_auth["Authentication"]
  node_authroutes["Auth routes<br/>[auth.route.js]"]
  node_authcontroller["Auth operations<br/>[auth.controller.js]"]
  node_authmiddleware["Route protection<br/>[auth.middleware.js]"]
  node_socketauth["Socket authentication"]
end

subgraph group_messaging["Messaging"]
  node_messagecontroller["Message operations"]
  node_messageroutes["Message routes<br/>[message.route.js]"]
  node_socketserver["Socket service<br/>[socket.js]"]
end

subgraph group_services["Infrastructure"]
  node_backend["Express server<br/>[server.js]"]
  node_userstore[("User records<br/>[User.js]")]
  node_messagestore[("Message records<br/>[Message.js]")]
  node_welcome["Welcome email<br/>[emailHandlers.js]"]
end

node_user(("User"))
node_cloudinary["Cloudinary media<br/>[cloudinary.js]"]
node_resend["Resend service<br/>[resend.js]"]
node_mongo[("MongoDB")]

node_user -->|"uses"| node_app
node_app -->|"checks auth"| node_authstore
node_app -->|"renders"| node_chatpage
node_app -->|"routes"| node_authpages
node_authpages -->|"submits credentials"| node_authstore
node_chatpage -->|"loads and sends"| node_chatstore
node_chatpage -->|"renders"| node_chatui
node_authstore -->|"requests auth"| node_http
node_chatstore -->|"requests messages"| node_http
node_http -->|"HTTP requests"| node_backend
node_authstore -->|"opens socket"| node_socketserver
node_backend -->|"mounts"| node_authroutes
node_backend -->|"mounts"| node_messageroutes
node_authroutes -->|"dispatches"| node_authcontroller
node_authroutes -->|"protects routes"| node_authmiddleware
node_authmiddleware -->|"authorizes"| node_authcontroller
node_messageroutes -->|"dispatches"| node_messagecontroller
node_authcontroller -->|"reads and writes"| node_userstore
node_messagecontroller -->|"reads users"| node_userstore
node_messagecontroller -->|"reads and writes"| node_messagestore
node_authcontroller -->|"uploads profile image"| node_cloudinary
node_messagecontroller -->|"uploads message image"| node_cloudinary
node_authcontroller -->|"sends welcome email"| node_welcome
node_welcome -->|"sends email"| node_resend
node_socketserver -->|"authenticates connections"| node_socketauth
node_messagecontroller -->|"emits new message"| node_socketserver
node_socketserver -->|"reports online users"| node_authstore
node_socketserver -->|"delivers new messages"| node_chatstore
node_userstore -->|"persists users"| node_mongo
node_messagestore -->|"persists messages"| node_mongo

click node_app "https://github.com/shivaay100/chatwire/blob/main/frontend/src/App.jsx"
click node_authpages "https://github.com/shivaay100/chatwire/tree/main/frontend/src/pages"
click node_chatpage "https://github.com/shivaay100/chatwire/blob/main/frontend/src/pages/ChatPage.jsx"
click node_chatui "https://github.com/shivaay100/chatwire/tree/main/frontend/src/components"
click node_authstore "https://github.com/shivaay100/chatwire/blob/main/frontend/src/store/useAuthStore.js"
click node_chatstore "https://github.com/shivaay100/chatwire/blob/main/frontend/src/store/useChatStore.js"
click node_http "https://github.com/shivaay100/chatwire/blob/main/frontend/src/lib/axios.js"
click node_backend "https://github.com/shivaay100/chatwire/blob/main/backend/src/server.js"
click node_authroutes "https://github.com/shivaay100/chatwire/blob/main/backend/src/routes/auth.route.js"
click node_authcontroller "https://github.com/shivaay100/chatwire/blob/main/backend/src/controllers/auth.controller.js"
click node_authmiddleware "https://github.com/shivaay100/chatwire/blob/main/backend/src/middleware/auth.middleware.js"
click node_messagecontroller "https://github.com/shivaay100/chatwire/blob/main/backend/src/controllers/message.controller.js"
click node_messageroutes "https://github.com/shivaay100/chatwire/blob/main/backend/src/routes/message.route.js"
click node_socketserver "https://github.com/shivaay100/chatwire/blob/main/backend/src/lib/socket.js"
click node_socketauth "https://github.com/shivaay100/chatwire/blob/main/backend/src/middleware/socket.auth.middleware.js"
click node_userstore "https://github.com/shivaay100/chatwire/blob/main/backend/src/models/User.js"
click node_messagestore "https://github.com/shivaay100/chatwire/blob/main/backend/src/models/Message.js"
click node_cloudinary "https://github.com/shivaay100/chatwire/blob/main/backend/src/lib/cloudinary.js"
click node_welcome "https://github.com/shivaay100/chatwire/blob/main/backend/src/emails/emailHandlers.js"
click node_resend "https://github.com/shivaay100/chatwire/blob/main/backend/src/lib/resend.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_chatui,node_authstore,node_chatstore,node_http,node_user toneBlue
class node_authroutes,node_authcontroller,node_authmiddleware,node_socketauth,node_mongo toneAmber
class node_messagecontroller,node_messageroutes,node_socketserver toneMint
class node_backend,node_userstore,node_messagestore,node_welcome toneRose
class node_cloudinary,node_resend toneTeal
```

## Components

### Web client

- [App routing](https://github.com/shivaay100/chatwire/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Login and signup](https://github.com/shivaay100/chatwire/tree/main/frontend/src/pages): `frontend/src/pages`
- [Chat screen](https://github.com/shivaay100/chatwire/blob/main/frontend/src/pages/ChatPage.jsx): `frontend/src/pages/ChatPage.jsx`
- [Chat components](https://github.com/shivaay100/chatwire/tree/main/frontend/src/components): `frontend/src/components`
- [Auth state](https://github.com/shivaay100/chatwire/blob/main/frontend/src/store/useAuthStore.js): `frontend/src/store/useAuthStore.js`
- [Chat state](https://github.com/shivaay100/chatwire/blob/main/frontend/src/store/useChatStore.js): `frontend/src/store/useChatStore.js`
- [HTTP client](https://github.com/shivaay100/chatwire/blob/main/frontend/src/lib/axios.js): `frontend/src/lib/axios.js`

### Authentication

- [Auth routes](https://github.com/shivaay100/chatwire/blob/main/backend/src/routes/auth.route.js): `backend/src/routes/auth.route.js`
- [Auth operations](https://github.com/shivaay100/chatwire/blob/main/backend/src/controllers/auth.controller.js): `backend/src/controllers/auth.controller.js`
- [Route protection](https://github.com/shivaay100/chatwire/blob/main/backend/src/middleware/auth.middleware.js): `backend/src/middleware/auth.middleware.js`
- [Socket authentication](https://github.com/shivaay100/chatwire/blob/main/backend/src/middleware/socket.auth.middleware.js): `backend/src/middleware/socket.auth.middleware.js`

### Messaging

- [Message operations](https://github.com/shivaay100/chatwire/blob/main/backend/src/controllers/message.controller.js): `backend/src/controllers/message.controller.js`
- [Message routes](https://github.com/shivaay100/chatwire/blob/main/backend/src/routes/message.route.js): `backend/src/routes/message.route.js`
- [Socket service](https://github.com/shivaay100/chatwire/blob/main/backend/src/lib/socket.js): `backend/src/lib/socket.js`

### Infrastructure

- [Express server](https://github.com/shivaay100/chatwire/blob/main/backend/src/server.js): `backend/src/server.js`
- [User records](https://github.com/shivaay100/chatwire/blob/main/backend/src/models/User.js): `backend/src/models/User.js`
- [Message records](https://github.com/shivaay100/chatwire/blob/main/backend/src/models/Message.js): `backend/src/models/Message.js`
- [Welcome email](https://github.com/shivaay100/chatwire/blob/main/backend/src/emails/emailHandlers.js): `backend/src/emails/emailHandlers.js`

### Other components

- **User**
- [Cloudinary media](https://github.com/shivaay100/chatwire/blob/main/backend/src/lib/cloudinary.js): `backend/src/lib/cloudinary.js`
- [Resend service](https://github.com/shivaay100/chatwire/blob/main/backend/src/lib/resend.js): `backend/src/lib/resend.js`
- **MongoDB**

## Connections

- User → App routing: uses
- App routing → Auth state: checks auth
- App routing → Chat screen: renders
- App routing → Login and signup: routes
- Login and signup → Auth state: submits credentials
- Chat screen → Chat state: loads and sends
- Chat screen → Chat components: renders
- Auth state → HTTP client: requests auth
- Chat state → HTTP client: requests messages
- HTTP client → Express server: HTTP requests
- Auth state → Socket service: opens socket
- Express server → Auth routes: mounts
- Express server → Message routes: mounts
- Auth routes → Auth operations: dispatches
- Auth routes → Route protection: protects routes
- Route protection → Auth operations: authorizes
- Message routes → Message operations: dispatches
- Auth operations → User records: reads and writes
- Message operations → User records: reads users
- Message operations → Message records: reads and writes
- Auth operations → Cloudinary media: uploads profile image
- Message operations → Cloudinary media: uploads message image
- Auth operations → Welcome email: sends welcome email
- Welcome email → Resend service: sends email
- Socket service → Socket authentication: authenticates connections
- Message operations → Socket service: emits new message
- Socket service → Auth state: reports online users
- Socket service → Chat state: delivers new messages
- User records → MongoDB: persists users
- Message records → MongoDB: persists messages