# saqibshah-dev/fullstack-chatapplication architecture

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

- Interactive diagram: https://gitdiagram.com/saqibshah-dev/fullstack-chatapplication
- Repository: https://github.com/saqibshah-dev/fullstack-chatapplication

## Overview

Chatty is a MERN real-time messaging app. Users sign up or log in, choose another user, exchange text or image messages, and see online status; profile pictures and message images use Cloudinary. The graph separates the React experience and state, API/auth handling, and persistence/realtime infrastructure. The README documents the major capabilities; sampled code and the source index support the shown internal calls. Frontend-to-backend HTTP wiring is represented as unverified because the excerpts do not show a complete request-to-route connection.

Main entry points: [`frontend/src/App.jsx`](https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/frontend/src/App.jsx) (App routing), [`frontend/src/store/useChatStore.js`](https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/frontend/src/store/useChatStore.js) (Chat state), [`frontend/src/store/useAuthStore.js`](https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/frontend/src/store/useAuthStore.js) (Auth state), [`Backend/src/controllers/message.controller.js`](https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/Backend/src/controllers/message.controller.js) (Message handlers)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Chat experience"]
  node_app["App routing<br/>[App.jsx]"]
  node_home["Chat home<br/>[HomePage.jsx]"]
  node_sidebar["User sidebar<br/>[Sidebar.jsx]"]
  node_chatview["Conversation view<br/>[ChatContainer.jsx]"]
  node_chatheader["Chat header<br/>[ChatHeader.jsx]"]
  node_composer["Message composer<br/>[MessageInput.jsx]"]
  node_chatstate["Chat state<br/>[useChatStore.js]"]
  node_theme["Theme settings<br/>[useThemeStore.jsx]"]
end

subgraph group_api["Backend API"]
  node_authroutes["Auth routes<br/>[auth.routes.js]"]
  node_authcontroller["Auth handlers<br/>[auth.controller.js]"]
  node_messageroutes["Message routes<br/>[message.route.js]"]
  node_messagecontroller["Message handlers"]
  node_authmiddleware["JWT guard<br/>[auth.middleware.js]"]
end

subgraph group_infra["Realtime and storage"]
  node_userrecord["User records<br/>[user.model.js]"]
  node_messagerecord["Message records<br/>[message.model.js]"]
  node_mongodb[("MongoDB<br/>[db.js]")]
  node_cloudinary["Cloudinary media<br/>[cloundinary.js]"]
  node_socket["Socket presence<br/>[socket.js]"]
end

subgraph group_identity["Identity and profile"]
  node_authpages["Sign-in and signup<br/>[SignUpPage.jsx]"]
  node_loginpage["Login page<br/>[LoginPage.jsx]"]
  node_profilepage["Profile page<br/>[ProfilePage.jsx]"]
  node_authstate["Auth state<br/>[useAuthStore.js]"]
end

node_user(("Chat user"))

node_user -->|"uses"| node_app
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_authpages
node_app -->|"routes to"| node_loginpage
node_app -->|"routes to"| node_profilepage
node_home -->|"renders"| node_sidebar
node_home -->|"renders"| node_chatview
node_home -->|"reads state"| node_chatstate
node_sidebar -->|"selects users"| node_chatstate
node_chatview -->|"loads messages"| node_chatstate
node_chatview -->|"renders"| node_chatheader
node_chatview -->|"renders"| node_composer
node_composer -->|"sends messages"| node_chatstate
node_chatstate -->|"reads socket"| node_authstate
node_authpages -->|"submits signup"| node_authstate
node_loginpage -->|"submits login"| node_authstate
node_profilepage -->|"updates profile"| node_authstate
node_app -->|"reads theme"| node_theme
node_authstate -.->|"calls auth API"| node_authroutes
node_chatstate -.->|"calls message API"| node_messageroutes
node_authroutes -->|"dispatches"| node_authcontroller
node_authroutes -->|"guards routes"| node_authmiddleware
node_messageroutes -->|"dispatches"| node_messagecontroller
node_messageroutes -->|"guards routes"| node_authmiddleware
node_authcontroller -->|"reads and writes"| node_userrecord
node_authcontroller -->|"uploads profile image"| node_cloudinary
node_authmiddleware -->|"loads user"| node_userrecord
node_messagecontroller -->|"lists users"| node_userrecord
node_messagecontroller -->|"reads and saves"| node_messagerecord
node_messagecontroller -->|"uploads image"| node_cloudinary
node_messagecontroller -->|"dispatches message"| node_socket
node_authstate -.->|"connects presence"| node_socket
node_mongodb -.->|"persists"| node_userrecord
node_mongodb -.->|"persists"| node_messagerecord

click node_app "https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/frontend/src/App.jsx"
click node_home "https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/frontend/src/pages/HomePage.jsx"
click node_sidebar "https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/frontend/src/components/Sidebar.jsx"
click node_chatview "https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/frontend/src/components/ChatContainer.jsx"
click node_chatheader "https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/frontend/src/components/ChatHeader.jsx"
click node_composer "https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/frontend/src/components/MessageInput.jsx"
click node_chatstate "https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/frontend/src/store/useChatStore.js"
click node_authpages "https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/frontend/src/pages/SignUpPage.jsx"
click node_loginpage "https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/frontend/src/pages/LoginPage.jsx"
click node_profilepage "https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/frontend/src/pages/ProfilePage.jsx"
click node_authstate "https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/frontend/src/store/useAuthStore.js"
click node_authroutes "https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/Backend/src/routes/auth.routes.js"
click node_authcontroller "https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/Backend/src/controllers/auth.controller.js"
click node_messageroutes "https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/Backend/src/routes/message.route.js"
click node_messagecontroller "https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/Backend/src/controllers/message.controller.js"
click node_authmiddleware "https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/Backend/src/middleware/auth.middleware.js"
click node_userrecord "https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/Backend/src/models/user.model.js"
click node_messagerecord "https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/Backend/src/models/message.model.js"
click node_mongodb "https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/Backend/src/lib/db.js"
click node_cloudinary "https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/Backend/src/lib/cloundinary.js"
click node_socket "https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/Backend/src/lib/socket.js"
click node_theme "https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/frontend/src/store/useThemeStore.jsx"

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_home,node_sidebar,node_chatview,node_chatheader,node_composer,node_chatstate,node_theme,node_user toneBlue
class node_authroutes,node_authcontroller,node_messageroutes,node_messagecontroller,node_authmiddleware toneAmber
class node_userrecord,node_messagerecord,node_mongodb,node_cloudinary,node_socket toneMint
class node_authpages,node_loginpage,node_profilepage,node_authstate toneRose
```

## Components

### Chat experience

- [App routing](https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Chat home](https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/frontend/src/pages/HomePage.jsx): `frontend/src/pages/HomePage.jsx`
- [User sidebar](https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/frontend/src/components/Sidebar.jsx): `frontend/src/components/Sidebar.jsx`
- [Conversation view](https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/frontend/src/components/ChatContainer.jsx): `frontend/src/components/ChatContainer.jsx`
- [Chat header](https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/frontend/src/components/ChatHeader.jsx): `frontend/src/components/ChatHeader.jsx`
- [Message composer](https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/frontend/src/components/MessageInput.jsx): `frontend/src/components/MessageInput.jsx`
- [Chat state](https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/frontend/src/store/useChatStore.js): `frontend/src/store/useChatStore.js`
- [Theme settings](https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/frontend/src/store/useThemeStore.jsx): `frontend/src/store/useThemeStore.jsx`

### Backend API

- [Auth routes](https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/Backend/src/routes/auth.routes.js): `Backend/src/routes/auth.routes.js`
- [Auth handlers](https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/Backend/src/controllers/auth.controller.js): `Backend/src/controllers/auth.controller.js`
- [Message routes](https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/Backend/src/routes/message.route.js): `Backend/src/routes/message.route.js`
- [Message handlers](https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/Backend/src/controllers/message.controller.js): `Backend/src/controllers/message.controller.js`
- [JWT guard](https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/Backend/src/middleware/auth.middleware.js): `Backend/src/middleware/auth.middleware.js`

### Realtime and storage

- [User records](https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/Backend/src/models/user.model.js): `Backend/src/models/user.model.js`
- [Message records](https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/Backend/src/models/message.model.js): `Backend/src/models/message.model.js`
- [MongoDB](https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/Backend/src/lib/db.js): `Backend/src/lib/db.js`
- [Cloudinary media](https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/Backend/src/lib/cloundinary.js): `Backend/src/lib/cloundinary.js`
- [Socket presence](https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/Backend/src/lib/socket.js): `Backend/src/lib/socket.js`

### Identity and profile

- [Sign-in and signup](https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/frontend/src/pages/SignUpPage.jsx): `frontend/src/pages/SignUpPage.jsx`
- [Login page](https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/frontend/src/pages/LoginPage.jsx): `frontend/src/pages/LoginPage.jsx`
- [Profile page](https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/frontend/src/pages/ProfilePage.jsx): `frontend/src/pages/ProfilePage.jsx`
- [Auth state](https://github.com/saqibshah-dev/fullstack-chatapplication/blob/main/frontend/src/store/useAuthStore.js): `frontend/src/store/useAuthStore.js`

### Other components

- **Chat user**

## Connections

- Chat user → App routing: uses (evidence: `frontend/src/App.jsx`)
- App routing → Chat home: routes to (evidence: `frontend/src/App.jsx`)
- App routing → Sign-in and signup: routes to (evidence: `frontend/src/App.jsx`)
- App routing → Login page: routes to (evidence: `frontend/src/App.jsx`)
- App routing → Profile page: routes to (evidence: `frontend/src/App.jsx`)
- Chat home → User sidebar: renders (evidence: `frontend/src/pages/HomePage.jsx`)
- Chat home → Conversation view: renders (evidence: `frontend/src/pages/HomePage.jsx`)
- Chat home → Chat state: reads state (evidence: `frontend/src/pages/HomePage.jsx`)
- User sidebar → Chat state: selects users (evidence: `frontend/src/components/Sidebar.jsx`)
- Conversation view → Chat state: loads messages (evidence: `frontend/src/components/ChatContainer.jsx`)
- Conversation view → Chat header: renders (evidence: `frontend/src/components/ChatContainer.jsx`)
- Conversation view → Message composer: renders (evidence: `frontend/src/components/ChatContainer.jsx`)
- Message composer → Chat state: sends messages (evidence: `frontend/src/components/MessageInput.jsx`)
- Chat state → Auth state: reads socket (evidence: `frontend/src/store/useChatStore.js`)
- Sign-in and signup → Auth state: submits signup (evidence: `frontend/src/pages/SignUpPage.jsx`)
- Login page → Auth state: submits login (evidence: `frontend/src/pages/LoginPage.jsx`)
- Profile page → Auth state: updates profile (evidence: `frontend/src/pages/ProfilePage.jsx`)
- App routing → Theme settings: reads theme (evidence: `frontend/src/App.jsx`)
- Auth state → Auth routes: calls auth API
- Chat state → Message routes: calls message API
- Auth routes → Auth handlers: dispatches (evidence: `Backend/src/routes/auth.routes.js`)
- Auth routes → JWT guard: guards routes (evidence: `Backend/src/routes/auth.routes.js`)
- Message routes → Message handlers: dispatches (evidence: `Backend/src/routes/message.route.js`)
- Message routes → JWT guard: guards routes (evidence: `Backend/src/routes/message.route.js`)
- Auth handlers → User records: reads and writes (evidence: `Backend/src/controllers/auth.controller.js`)
- Auth handlers → Cloudinary media: uploads profile image (evidence: `Backend/src/controllers/auth.controller.js`)
- JWT guard → User records: loads user (evidence: `Backend/src/middleware/auth.middleware.js`)
- Message handlers → User records: lists users (evidence: `Backend/src/controllers/message.controller.js`)
- Message handlers → Message records: reads and saves (evidence: `Backend/src/controllers/message.controller.js`)
- Message handlers → Cloudinary media: uploads image (evidence: `Backend/src/controllers/message.controller.js`)
- Message handlers → Socket presence: dispatches message (evidence: `Backend/src/controllers/message.controller.js`)
- Auth state → Socket presence: connects presence
- MongoDB → User records: persists
- MongoDB → Message records: persists