# sameemirfan21/chatify architecture

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

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

## Overview

Chatify is a real-time chat application. Users sign up or sign in, then browse contacts and prior chat partners, load a conversation, and send text or image messages; the backend persists messages and can deliver them over Socket.IO. The frontend also supports profile updates, Google OAuth, and welcome email flows. The graph follows the sampled routes, stores, controllers, and server setup; some UI components and integrations are represented at directory or service level where their implementation was not sampled.

Main entry points: [`backend/src/controllers/auth.controller.js`](https://github.com/sameemirfan21/chatify/blob/main/backend/src/controllers/auth.controller.js) (Auth operations), [`backend/src/controllers/message.controller.js`](https://github.com/sameemirfan21/chatify/blob/main/backend/src/controllers/message.controller.js) (Message operations), [`frontend/src/App.jsx`](https://github.com/sameemirfan21/chatify/blob/main/frontend/src/App.jsx) (App routing), [`frontend/src/store/userAuthStore.js`](https://github.com/sameemirfan21/chatify/blob/main/frontend/src/store/userAuthStore.js) (Auth state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Web client"]
  node_app["App routing<br/>[App.jsx]"]
  node_authpages["Login and signup<br/>[LoginPage.jsx]"]
  node_chatpage["Chat workspace<br/>[ChatPage.jsx]"]
  node_chatui["Conversation UI<br/>[ChatContainer.jsx]"]
  node_messageinput["Message composer<br/>[MessageInput.jsx]"]
  node_chatstore["Chat state<br/>[useChatStore.js]"]
  node_authstore["Auth state<br/>[userAuthStore.js]"]
  node_httpclient["API client<br/>[axios.js]"]
  node_frontendauth["Supabase client<br/>[supabase.js]"]
end

subgraph group_identity["Identity and profiles"]
  node_server["HTTP and socket server<br/>[server.js]"]
  node_authroutes["Auth routes<br/>[auth.route.js]"]
  node_authcontroller["Auth operations<br/>[auth.controller.js]"]
  node_authmiddleware["Token verification<br/>[auth.middleware.js]"]
  node_usermodel[("User profiles<br/>[User.js]")]
end

subgraph group_messaging["Chat and realtime"]
  node_messageroutes["Message routes<br/>[message.route.js]"]
  node_messagecontroller["Message operations"]
  node_messagemodel[("Message records<br/>[Message.js]")]
  node_socketserver["Socket delivery<br/>[socket.js]"]
  node_socketauth["Socket authentication"]
end

subgraph group_services["External services"]
  node_supabase{{"Supabase Auth"}}
  node_mongodb[("MongoDB")]
  node_cloudinary{{"Cloudinary"}}
  node_email{{"Resend email"}}
end

node_user(("Chat user"))

node_user -->|"uses"| node_app
node_app -->|"checks session"| node_authstore
node_app -->|"routes to"| node_chatpage
node_app -->|"routes to"| node_authpages
node_authpages -->|"submits credentials"| node_authstore
node_chatpage -->|"loads chat state"| node_chatstore
node_chatpage -->|"renders"| node_chatui
node_chatui -->|"loads messages"| node_chatstore
node_messageinput -->|"sends messages"| node_chatstore
node_authstore -->|"authenticates"| node_frontendauth
node_authstore -->|"requests profiles"| node_httpclient
node_chatstore -->|"requests chat data"| node_httpclient
node_httpclient -->|"gets access token"| node_frontendauth
node_server -->|"mounts routes"| node_authroutes
node_server -->|"mounts routes"| node_messageroutes
node_authroutes -->|"dispatches requests"| node_authcontroller
node_authroutes -->|"protects routes"| node_authmiddleware
node_messageroutes -->|"dispatches requests"| node_messagecontroller
node_messageroutes -->|"protects routes"| node_authmiddleware
node_authmiddleware -->|"verifies tokens"| node_supabase
node_authmiddleware -->|"finds or creates"| node_usermodel
node_authcontroller -->|"creates profiles"| node_usermodel
node_authcontroller -->|"creates auth user"| node_supabase
node_authcontroller -->|"uploads profile image"| node_cloudinary
node_authcontroller -->|"sends welcome email"| node_email
node_messagecontroller -->|"queries contacts"| node_usermodel
node_messagecontroller -->|"reads and writes"| node_messagemodel
node_messagecontroller -->|"uploads message image"| node_cloudinary
node_messagecontroller -->|"emits new message"| node_socketserver
node_socketserver -->|"authenticates sockets"| node_socketauth
node_socketauth -->|"verifies token"| node_supabase
node_socketauth -->|"resolves user"| node_usermodel
node_authcontroller -->|"persists profile"| node_mongodb
node_messagecontroller -->|"persists messages"| node_mongodb

click node_app "https://github.com/sameemirfan21/chatify/blob/main/frontend/src/App.jsx"
click node_authpages "https://github.com/sameemirfan21/chatify/blob/main/frontend/src/pages/LoginPage.jsx"
click node_chatpage "https://github.com/sameemirfan21/chatify/blob/main/frontend/src/pages/ChatPage.jsx"
click node_chatui "https://github.com/sameemirfan21/chatify/blob/main/frontend/src/components/ChatContainer.jsx"
click node_messageinput "https://github.com/sameemirfan21/chatify/blob/main/frontend/src/components/MessageInput.jsx"
click node_chatstore "https://github.com/sameemirfan21/chatify/blob/main/frontend/src/store/useChatStore.js"
click node_authstore "https://github.com/sameemirfan21/chatify/blob/main/frontend/src/store/userAuthStore.js"
click node_httpclient "https://github.com/sameemirfan21/chatify/blob/main/frontend/src/lib/axios.js"
click node_frontendauth "https://github.com/sameemirfan21/chatify/blob/main/frontend/src/lib/supabase.js"
click node_server "https://github.com/sameemirfan21/chatify/blob/main/backend/src/server.js"
click node_authroutes "https://github.com/sameemirfan21/chatify/blob/main/backend/src/routes/auth.route.js"
click node_authcontroller "https://github.com/sameemirfan21/chatify/blob/main/backend/src/controllers/auth.controller.js"
click node_authmiddleware "https://github.com/sameemirfan21/chatify/blob/main/backend/src/middleware/auth.middleware.js"
click node_usermodel "https://github.com/sameemirfan21/chatify/blob/main/backend/src/models/User.js"
click node_messageroutes "https://github.com/sameemirfan21/chatify/blob/main/backend/src/routes/message.route.js"
click node_messagecontroller "https://github.com/sameemirfan21/chatify/blob/main/backend/src/controllers/message.controller.js"
click node_messagemodel "https://github.com/sameemirfan21/chatify/blob/main/backend/src/models/Message.js"
click node_socketserver "https://github.com/sameemirfan21/chatify/blob/main/backend/src/lib/socket.js"
click node_socketauth "https://github.com/sameemirfan21/chatify/blob/main/backend/src/middleware/socket.auth.middleware.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_messageinput,node_chatstore,node_authstore,node_httpclient,node_frontendauth,node_user toneBlue
class node_server,node_authroutes,node_authcontroller,node_authmiddleware,node_usermodel toneAmber
class node_messageroutes,node_messagecontroller,node_messagemodel,node_socketserver,node_socketauth toneMint
class node_supabase,node_mongodb,node_cloudinary,node_email toneRose
```

## Components

### Web client

- [App routing](https://github.com/sameemirfan21/chatify/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Login and signup](https://github.com/sameemirfan21/chatify/blob/main/frontend/src/pages/LoginPage.jsx): `frontend/src/pages/LoginPage.jsx`
- [Chat workspace](https://github.com/sameemirfan21/chatify/blob/main/frontend/src/pages/ChatPage.jsx): `frontend/src/pages/ChatPage.jsx`
- [Conversation UI](https://github.com/sameemirfan21/chatify/blob/main/frontend/src/components/ChatContainer.jsx): `frontend/src/components/ChatContainer.jsx`
- [Message composer](https://github.com/sameemirfan21/chatify/blob/main/frontend/src/components/MessageInput.jsx): `frontend/src/components/MessageInput.jsx`
- [Chat state](https://github.com/sameemirfan21/chatify/blob/main/frontend/src/store/useChatStore.js): `frontend/src/store/useChatStore.js`
- [Auth state](https://github.com/sameemirfan21/chatify/blob/main/frontend/src/store/userAuthStore.js): `frontend/src/store/userAuthStore.js`
- [API client](https://github.com/sameemirfan21/chatify/blob/main/frontend/src/lib/axios.js): `frontend/src/lib/axios.js`
- [Supabase client](https://github.com/sameemirfan21/chatify/blob/main/frontend/src/lib/supabase.js): `frontend/src/lib/supabase.js`

### Identity and profiles

- [HTTP and socket server](https://github.com/sameemirfan21/chatify/blob/main/backend/src/server.js): `backend/src/server.js`
- [Auth routes](https://github.com/sameemirfan21/chatify/blob/main/backend/src/routes/auth.route.js): `backend/src/routes/auth.route.js`
- [Auth operations](https://github.com/sameemirfan21/chatify/blob/main/backend/src/controllers/auth.controller.js): `backend/src/controllers/auth.controller.js`
- [Token verification](https://github.com/sameemirfan21/chatify/blob/main/backend/src/middleware/auth.middleware.js): `backend/src/middleware/auth.middleware.js`
- [User profiles](https://github.com/sameemirfan21/chatify/blob/main/backend/src/models/User.js): `backend/src/models/User.js`

### Chat and realtime

- [Message routes](https://github.com/sameemirfan21/chatify/blob/main/backend/src/routes/message.route.js): `backend/src/routes/message.route.js`
- [Message operations](https://github.com/sameemirfan21/chatify/blob/main/backend/src/controllers/message.controller.js): `backend/src/controllers/message.controller.js`
- [Message records](https://github.com/sameemirfan21/chatify/blob/main/backend/src/models/Message.js): `backend/src/models/Message.js`
- [Socket delivery](https://github.com/sameemirfan21/chatify/blob/main/backend/src/lib/socket.js): `backend/src/lib/socket.js`
- [Socket authentication](https://github.com/sameemirfan21/chatify/blob/main/backend/src/middleware/socket.auth.middleware.js): `backend/src/middleware/socket.auth.middleware.js`

### External services

- **Supabase Auth**
- **MongoDB**
- **Cloudinary**
- **Resend email**

### Other components

- **Chat user**

## Connections

- Chat user → App routing: uses
- App routing → Auth state: checks session (evidence: `frontend/src/App.jsx`)
- App routing → Chat workspace: routes to (evidence: `frontend/src/App.jsx`)
- App routing → Login and signup: routes to (evidence: `frontend/src/App.jsx`)
- Login and signup → Auth state: submits credentials (evidence: `frontend/src/pages/LoginPage.jsx`)
- Chat workspace → Chat state: loads chat state (evidence: `frontend/src/pages/ChatPage.jsx`)
- Chat workspace → Conversation UI: renders (evidence: `frontend/src/pages/ChatPage.jsx`)
- Conversation UI → Chat state: loads messages (evidence: `frontend/src/components/ChatContainer.jsx`)
- Message composer → Chat state: sends messages (evidence: `frontend/src/components/MessageInput.jsx`)
- Auth state → Supabase client: authenticates (evidence: `frontend/src/store/userAuthStore.js`)
- Auth state → API client: requests profiles (evidence: `frontend/src/store/userAuthStore.js`)
- Chat state → API client: requests chat data (evidence: `frontend/src/store/useChatStore.js`)
- API client → Supabase client: gets access token (evidence: `frontend/src/lib/axios.js`)
- HTTP and socket server → Auth routes: mounts routes (evidence: `backend/src/server.js`)
- HTTP and socket server → Message routes: mounts routes (evidence: `backend/src/server.js`)
- Auth routes → Auth operations: dispatches requests (evidence: `backend/src/routes/auth.route.js`)
- Auth routes → Token verification: protects routes (evidence: `backend/src/routes/auth.route.js`)
- Message routes → Message operations: dispatches requests (evidence: `backend/src/routes/message.route.js`)
- Message routes → Token verification: protects routes (evidence: `backend/src/routes/message.route.js`)
- Token verification → Supabase Auth: verifies tokens (evidence: `backend/src/middleware/auth.middleware.js`)
- Token verification → User profiles: finds or creates (evidence: `backend/src/middleware/auth.middleware.js`)
- Auth operations → User profiles: creates profiles (evidence: `backend/src/controllers/auth.controller.js`)
- Auth operations → Supabase Auth: creates auth user (evidence: `backend/src/controllers/auth.controller.js`)
- Auth operations → Cloudinary: uploads profile image (evidence: `backend/src/controllers/auth.controller.js`)
- Auth operations → Resend email: sends welcome email (evidence: `backend/src/controllers/auth.controller.js`)
- Message operations → User profiles: queries contacts (evidence: `backend/src/controllers/message.controller.js`)
- Message operations → Message records: reads and writes (evidence: `backend/src/controllers/message.controller.js`)
- Message operations → Cloudinary: uploads message image (evidence: `backend/src/controllers/message.controller.js`)
- Message operations → Socket delivery: emits new message (evidence: `backend/src/controllers/message.controller.js`)
- Socket delivery → Socket authentication: authenticates sockets (evidence: `backend/src/lib/socket.js`)
- Socket authentication → Supabase Auth: verifies token (evidence: `backend/src/middleware/socket.auth.middleware.js`)
- Socket authentication → User profiles: resolves user (evidence: `backend/src/middleware/socket.auth.middleware.js`)
- Auth operations → MongoDB: persists profile (evidence: `backend/src/controllers/auth.controller.js`)
- Message operations → MongoDB: persists messages (evidence: `backend/src/controllers/message.controller.js`)