# kaydo214/chatty architecture

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

- Interactive diagram: https://gitdiagram.com/kaydo214/chatty
- Repository: https://github.com/kaydo214/chatty

## Overview

Chatty is a full-stack one-to-one messaging app. Users sign up or log in, then select a contact, load the conversation, and send text or images; messages persist and are also delivered over Socket.IO, with online presence shown in the chat UI. The graph captures authentication, profile-photo uploads, chat REST/storage, real-time presence and delivery, and browser-persisted themes. Unexcerpted relationships are included only where the README or SOURCE INDEX supports them.

Main entry points: [`frontend/src/App.jsx`](https://github.com/kaydo214/chatty/blob/main/frontend/src/App.jsx) (App routes), [`backend/src/routes`](https://github.com/kaydo214/chatty/tree/main/backend/src/routes) (REST routes), [`frontend/src/store/useAuthStore.js`](https://github.com/kaydo214/chatty/blob/main/frontend/src/store/useAuthStore.js) (Auth state), [`frontend/src/store/useChatStore.js`](https://github.com/kaydo214/chatty/blob/main/frontend/src/store/useChatStore.js) (Chat state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Client experience"]
  node_app["App routes<br/>[App.jsx]"]
  node_authpages["Login and signup"]
  node_home["Chat home<br/>[HomePage.jsx]"]
  node_sidebar["Contact sidebar<br/>[Sidebar.jsx]"]
  node_chatview["Conversation view<br/>[ChatContainer.jsx]"]
  node_chatparts["Chat controls<br/>[MessageInput.jsx]"]
  node_profilepage["Profile screen<br/>[ProfilePage.jsx]"]
  node_settings["Theme settings<br/>[SettingsPage.jsx]"]
  node_themestore["Theme state<br/>[useThemeStore.js]"]
end

subgraph group_identity["Identity and profiles"]
  node_authstate["Auth state<br/>[useAuthStore.js]"]
  node_authctl["Auth handlers<br/>[auth.controller.js]"]
  node_authmw["Cookie auth<br/>[auth.middleware.js]"]
  node_userdb[("User records<br/>[user.model.js]")]
end

subgraph group_messaging["Messaging"]
  node_chatstate["Chat state<br/>[useChatStore.js]"]
  node_messagesctl["Message handlers"]
  node_messagedb[("Message records<br/>[message.model.js]")]
  node_socket["Socket presence<br/>[socket.js]"]
end

subgraph group_runtime["Backend runtime"]
  node_api["REST routes"]
  node_cloudinary["Cloudinary media<br/>[cloudinary.js]"]
  node_server["Server bootstrap<br/>[index.js]"]
end

node_person(("Chat user"))
node_mongodb[("MongoDB")]

node_person -->|"uses"| node_app
node_app -->|"routes to"| node_authpages
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_profilepage
node_app -->|"routes to"| node_settings
node_app -->|"checks session"| node_authstate
node_app -->|"reads theme"| node_themestore
node_authpages -->|"submits credentials"| node_authstate
node_home -->|"renders"| node_sidebar
node_home -->|"renders"| node_chatview
node_home -->|"selects contact"| node_chatstate
node_sidebar -->|"loads contacts"| node_chatstate
node_chatview -->|"loads conversation"| node_chatstate
node_chatview -->|"renders"| node_chatparts
node_chatparts -->|"sends message"| node_chatstate
node_profilepage -->|"updates profile"| node_authstate
node_settings -->|"sets theme"| node_themestore
node_authstate -->|"calls auth API"| node_api
node_chatstate -->|"calls chat API"| node_api
node_authstate -->|"opens socket"| node_socket
node_chatstate -->|"receives messages"| node_socket
node_server -->|"mounts routes"| node_api
node_server -->|"starts server"| node_socket
node_server -->|"connects"| node_mongodb
node_api -->|"dispatches auth"| node_authctl
node_api -->|"dispatches messages"| node_messagesctl
node_api -->|"protects routes"| node_authmw
node_authmw -->|"loads user"| node_userdb
node_authctl -->|"reads and writes"| node_userdb
node_authctl -->|"uploads profile"| node_cloudinary
node_messagesctl -->|"lists contacts"| node_userdb
node_messagesctl -->|"reads and writes"| node_messagedb
node_messagesctl -->|"uploads image"| node_cloudinary
node_messagesctl -->|"emits message"| node_socket
node_socket -.->|"publishes presence"| node_authstate
node_person -.->|"connects live"| node_socket

click node_app "https://github.com/kaydo214/chatty/blob/main/frontend/src/App.jsx"
click node_authpages "https://github.com/kaydo214/chatty/tree/main/frontend/src/pages"
click node_home "https://github.com/kaydo214/chatty/blob/main/frontend/src/pages/HomePage.jsx"
click node_sidebar "https://github.com/kaydo214/chatty/blob/main/frontend/src/components/Sidebar.jsx"
click node_chatview "https://github.com/kaydo214/chatty/blob/main/frontend/src/components/ChatContainer.jsx"
click node_chatparts "https://github.com/kaydo214/chatty/blob/main/frontend/src/components/MessageInput.jsx"
click node_profilepage "https://github.com/kaydo214/chatty/blob/main/frontend/src/pages/ProfilePage.jsx"
click node_settings "https://github.com/kaydo214/chatty/blob/main/frontend/src/pages/SettingsPage.jsx"
click node_themestore "https://github.com/kaydo214/chatty/blob/main/frontend/src/store/useThemeStore.js"
click node_authstate "https://github.com/kaydo214/chatty/blob/main/frontend/src/store/useAuthStore.js"
click node_chatstate "https://github.com/kaydo214/chatty/blob/main/frontend/src/store/useChatStore.js"
click node_api "https://github.com/kaydo214/chatty/tree/main/backend/src/routes"
click node_authctl "https://github.com/kaydo214/chatty/blob/main/backend/src/controller/auth.controller.js"
click node_authmw "https://github.com/kaydo214/chatty/blob/main/backend/src/middleware/auth.middleware.js"
click node_userdb "https://github.com/kaydo214/chatty/blob/main/backend/src/models/user.model.js"
click node_messagesctl "https://github.com/kaydo214/chatty/blob/main/backend/src/controller/message.controller.js"
click node_messagedb "https://github.com/kaydo214/chatty/blob/main/backend/src/models/message.model.js"
click node_socket "https://github.com/kaydo214/chatty/blob/main/backend/src/lib/socket.js"
click node_cloudinary "https://github.com/kaydo214/chatty/blob/main/backend/src/lib/cloudinary.js"
click node_server "https://github.com/kaydo214/chatty/blob/main/backend/src/index.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_home,node_sidebar,node_chatview,node_chatparts,node_profilepage,node_settings,node_themestore,node_person toneBlue
class node_authstate,node_authctl,node_authmw,node_userdb,node_mongodb toneAmber
class node_chatstate,node_messagesctl,node_messagedb,node_socket toneMint
class node_api,node_cloudinary,node_server toneRose
```

## Components

### Client experience

- [App routes](https://github.com/kaydo214/chatty/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Login and signup](https://github.com/kaydo214/chatty/tree/main/frontend/src/pages): `frontend/src/pages`
- [Chat home](https://github.com/kaydo214/chatty/blob/main/frontend/src/pages/HomePage.jsx): `frontend/src/pages/HomePage.jsx`
- [Contact sidebar](https://github.com/kaydo214/chatty/blob/main/frontend/src/components/Sidebar.jsx): `frontend/src/components/Sidebar.jsx`
- [Conversation view](https://github.com/kaydo214/chatty/blob/main/frontend/src/components/ChatContainer.jsx): `frontend/src/components/ChatContainer.jsx`
- [Chat controls](https://github.com/kaydo214/chatty/blob/main/frontend/src/components/MessageInput.jsx): `frontend/src/components/MessageInput.jsx`
- [Profile screen](https://github.com/kaydo214/chatty/blob/main/frontend/src/pages/ProfilePage.jsx): `frontend/src/pages/ProfilePage.jsx`
- [Theme settings](https://github.com/kaydo214/chatty/blob/main/frontend/src/pages/SettingsPage.jsx): `frontend/src/pages/SettingsPage.jsx`
- [Theme state](https://github.com/kaydo214/chatty/blob/main/frontend/src/store/useThemeStore.js): `frontend/src/store/useThemeStore.js`

### Identity and profiles

- [Auth state](https://github.com/kaydo214/chatty/blob/main/frontend/src/store/useAuthStore.js): `frontend/src/store/useAuthStore.js`
- [Auth handlers](https://github.com/kaydo214/chatty/blob/main/backend/src/controller/auth.controller.js): `backend/src/controller/auth.controller.js`
- [Cookie auth](https://github.com/kaydo214/chatty/blob/main/backend/src/middleware/auth.middleware.js): `backend/src/middleware/auth.middleware.js`
- [User records](https://github.com/kaydo214/chatty/blob/main/backend/src/models/user.model.js): `backend/src/models/user.model.js`

### Messaging

- [Chat state](https://github.com/kaydo214/chatty/blob/main/frontend/src/store/useChatStore.js): `frontend/src/store/useChatStore.js`
- [Message handlers](https://github.com/kaydo214/chatty/blob/main/backend/src/controller/message.controller.js): `backend/src/controller/message.controller.js`
- [Message records](https://github.com/kaydo214/chatty/blob/main/backend/src/models/message.model.js): `backend/src/models/message.model.js`
- [Socket presence](https://github.com/kaydo214/chatty/blob/main/backend/src/lib/socket.js): `backend/src/lib/socket.js`

### Backend runtime

- [REST routes](https://github.com/kaydo214/chatty/tree/main/backend/src/routes): `backend/src/routes`
- [Cloudinary media](https://github.com/kaydo214/chatty/blob/main/backend/src/lib/cloudinary.js): `backend/src/lib/cloudinary.js`
- [Server bootstrap](https://github.com/kaydo214/chatty/blob/main/backend/src/index.js): `backend/src/index.js`

### Other components

- **Chat user**
- **MongoDB**

## Connections

- Chat user → App routes: uses (evidence: `frontend/src/App.jsx`)
- App routes → Login and signup: routes to (evidence: `frontend/src/App.jsx`)
- App routes → Chat home: routes to (evidence: `frontend/src/App.jsx`)
- App routes → Profile screen: routes to (evidence: `frontend/src/App.jsx`)
- App routes → Theme settings: routes to (evidence: `frontend/src/App.jsx`)
- App routes → Auth state: checks session (evidence: `frontend/src/App.jsx`)
- App routes → Theme state: reads theme (evidence: `frontend/src/App.jsx`)
- Login and signup → Auth state: submits credentials (evidence: `frontend/src/pages/LoginPage.jsx`)
- Chat home → Contact sidebar: renders (evidence: `frontend/src/pages/HomePage.jsx`)
- Chat home → Conversation view: renders (evidence: `frontend/src/pages/HomePage.jsx`)
- Chat home → Chat state: selects contact (evidence: `frontend/src/pages/HomePage.jsx`)
- Contact sidebar → Chat state: loads contacts (evidence: `frontend/src/components/Sidebar.jsx`)
- Conversation view → Chat state: loads conversation (evidence: `frontend/src/components/ChatContainer.jsx`)
- Conversation view → Chat controls: renders (evidence: `frontend/src/components/ChatContainer.jsx`)
- Chat controls → Chat state: sends message (evidence: `frontend/src/components/MessageInput.jsx`)
- Profile screen → Auth state: updates profile (evidence: `frontend/src/pages/ProfilePage.jsx`)
- Theme settings → Theme state: sets theme (evidence: `frontend/src/pages/SettingsPage.jsx`)
- Auth state → REST routes: calls auth API (evidence: `frontend/src/store/useAuthStore.js`)
- Chat state → REST routes: calls chat API (evidence: `frontend/src/store/useChatStore.js`)
- Auth state → Socket presence: opens socket (evidence: `frontend/src/store/useAuthStore.js`)
- Chat state → Socket presence: receives messages (evidence: `frontend/src/store/useChatStore.js`)
- Server bootstrap → REST routes: mounts routes (evidence: `backend/src/index.js`)
- Server bootstrap → Socket presence: starts server (evidence: `backend/src/index.js`)
- Server bootstrap → MongoDB: connects (evidence: `backend/src/index.js`)
- REST routes → Auth handlers: dispatches auth (evidence: `backend/src/routes/auth.route.js`)
- REST routes → Message handlers: dispatches messages (evidence: `backend/src/routes/message.route.js`)
- REST routes → Cookie auth: protects routes (evidence: `backend/src/routes/auth.route.js`)
- Cookie auth → User records: loads user (evidence: `backend/src/middleware/auth.middleware.js`)
- Auth handlers → User records: reads and writes (evidence: `backend/src/controller/auth.controller.js`)
- Auth handlers → Cloudinary media: uploads profile (evidence: `backend/src/controller/auth.controller.js`)
- Message handlers → User records: lists contacts (evidence: `backend/src/controller/message.controller.js`)
- Message handlers → Message records: reads and writes (evidence: `backend/src/controller/message.controller.js`)
- Message handlers → Cloudinary media: uploads image (evidence: `backend/src/controller/message.controller.js`)
- Message handlers → Socket presence: emits message (evidence: `backend/src/controller/message.controller.js`)
- Socket presence → Auth state: publishes presence
- Chat user → Socket presence: connects live