# ibrahimkataya/i-chatt-app architecture

> Architecture diagram of the GitHub repository ibrahimkataya/i-chatt-app, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ibrahimkataya/i-chatt-app
- Repository: https://github.com/ibrahimkataya/i-chatt-app

## Overview

This is a browser-based real-time chat application with account authentication, user profiles, direct messaging, image sharing, online presence, and theme selection. The main workflow is: a user signs in, the frontend loads other users and conversation history, then sends messages through the API; the backend persists messages and dispatches them to connected recipients over Socket.IO. Authentication and messaging controllers own their respective storage and dispatch operations. Several UI and infrastructure files were not sampled, so uncertain internal wiring is omitted.

Main entry points: [`frontend/src/store/useAuthStore.js`](https://github.com/ibrahimkataya/i-chatt-app/blob/main/frontend/src/store/useAuthStore.js) (Auth state), [`frontend/src/App.jsx`](https://github.com/ibrahimkataya/i-chatt-app/blob/main/frontend/src/App.jsx) (App routing), [`backend/src/index.js`](https://github.com/ibrahimkataya/i-chatt-app/blob/main/backend/src/index.js) (HTTP API), [`backend/src/controllers/message.controller.js`](https://github.com/ibrahimkataya/i-chatt-app/blob/main/backend/src/controllers/message.controller.js) (Message controller)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Frontend"]
  node_app["App routing<br/>[App.jsx]"]
  node_authpages["Auth pages"]
  node_home["Chat interface<br/>[HomePage.jsx]"]
  node_chatcomponents["Chat components"]
  node_themestore["Theme state<br/>[useThemeStore.js]"]
  node_profilepage["Profile page<br/>[ProfilePage.jsx]"]
  node_settingspage["Settings page<br/>[SettingsPage.jsx]"]
end

subgraph group_auth["Authentication"]
  node_authstore["Auth state<br/>[useAuthStore.js]"]
  node_authroutes["Auth routes<br/>[auth.route.js]"]
  node_authmiddleware["Route protection<br/>[auth.middleware.js]"]
  node_authcontroller["Auth controller<br/>[auth.controller.js]"]
  node_utils["Token utilities<br/>[utils.js]"]
end

subgraph group_messaging["Messaging"]
  node_chatstore["Chat state<br/>[useChatStore.js]"]
  node_messageroutes["Message routes<br/>[message.route.js]"]
  node_messagecontroller["Message controller"]
  node_socket["Socket.IO server<br/>[socket.js]"]
end

subgraph group_services["Persistence and realtime"]
  node_api["HTTP API<br/>[index.js]"]
  node_usermodel["User model<br/>[user.model.js]"]
  node_messagemodel["Message model<br/>[message.model.js]"]
  node_database["Database connection<br/>[db.js]"]
  node_store[("MongoDB")]
  node_supabaseclient["Supabase client<br/>[supabase.js]"]
  node_supabase[("Supabase storage")]
end

node_person(("User"))
node_browser(("Browser"))

node_person -->|"uses"| node_app
node_app -->|"checks session"| node_authstore
node_app -->|"routes to"| node_authpages
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_profilepage
node_app -->|"routes to"| node_settingspage
node_home -->|"loads chat state"| node_chatstore
node_home -->|"renders"| node_chatcomponents
node_authpages -->|"authenticates"| node_authstore
node_authstore -->|"calls auth API"| node_api
node_chatstore -->|"calls message API"| node_api
node_chatstore -->|"uses socket"| node_authstore
node_settingspage -->|"selects theme"| node_themestore
node_profilepage -->|"updates profile"| node_authstore
node_api -->|"dispatches"| node_authroutes
node_api -->|"dispatches"| node_messageroutes
node_authroutes -->|"dispatches"| node_authcontroller
node_authroutes -->|"protects routes"| node_authmiddleware
node_authmiddleware -->|"loads user"| node_usermodel
node_authcontroller -->|"reads and writes"| node_usermodel
node_authcontroller -->|"creates token"| node_utils
node_authcontroller -->|"manages profile images"| node_supabaseclient
node_messageroutes -->|"protects routes"| node_authmiddleware
node_messageroutes -->|"dispatches"| node_messagecontroller
node_messagecontroller -->|"lists users"| node_usermodel
node_messagecontroller -->|"reads and writes"| node_messagemodel
node_messagecontroller -->|"uploads images"| node_supabaseclient
node_messagecontroller -->|"emits message"| node_socket
node_authstore -->|"connects client"| node_socket
node_api -->|"connects on start"| node_database
node_database -->|"connects"| node_store
node_usermodel -->|"persists users"| node_store
node_messagemodel -->|"persists messages"| node_store
node_supabaseclient -->|"uploads and removes"| node_supabase
node_browser -->|"HTTP requests"| node_api
node_socket -->|"online users"| node_authstore
node_socket -->|"new messages"| node_chatstore

click node_app "https://github.com/ibrahimkataya/i-chatt-app/blob/main/frontend/src/App.jsx"
click node_authpages "https://github.com/ibrahimkataya/i-chatt-app/tree/main/frontend/src/pages"
click node_home "https://github.com/ibrahimkataya/i-chatt-app/blob/main/frontend/src/pages/HomePage.jsx"
click node_chatcomponents "https://github.com/ibrahimkataya/i-chatt-app/tree/main/frontend/src/components"
click node_authstore "https://github.com/ibrahimkataya/i-chatt-app/blob/main/frontend/src/store/useAuthStore.js"
click node_chatstore "https://github.com/ibrahimkataya/i-chatt-app/blob/main/frontend/src/store/useChatStore.js"
click node_themestore "https://github.com/ibrahimkataya/i-chatt-app/blob/main/frontend/src/store/useThemeStore.js"
click node_profilepage "https://github.com/ibrahimkataya/i-chatt-app/blob/main/frontend/src/pages/ProfilePage.jsx"
click node_settingspage "https://github.com/ibrahimkataya/i-chatt-app/blob/main/frontend/src/pages/SettingsPage.jsx"
click node_api "https://github.com/ibrahimkataya/i-chatt-app/blob/main/backend/src/index.js"
click node_authroutes "https://github.com/ibrahimkataya/i-chatt-app/blob/main/backend/src/routes/auth.route.js"
click node_messageroutes "https://github.com/ibrahimkataya/i-chatt-app/blob/main/backend/src/routes/message.route.js"
click node_authmiddleware "https://github.com/ibrahimkataya/i-chatt-app/blob/main/backend/src/middleware/auth.middleware.js"
click node_authcontroller "https://github.com/ibrahimkataya/i-chatt-app/blob/main/backend/src/controllers/auth.controller.js"
click node_messagecontroller "https://github.com/ibrahimkataya/i-chatt-app/blob/main/backend/src/controllers/message.controller.js"
click node_usermodel "https://github.com/ibrahimkataya/i-chatt-app/blob/main/backend/src/models/user.model.js"
click node_messagemodel "https://github.com/ibrahimkataya/i-chatt-app/blob/main/backend/src/models/message.model.js"
click node_database "https://github.com/ibrahimkataya/i-chatt-app/blob/main/backend/src/lib/db.js"
click node_socket "https://github.com/ibrahimkataya/i-chatt-app/blob/main/backend/src/lib/socket.js"
click node_supabaseclient "https://github.com/ibrahimkataya/i-chatt-app/blob/main/backend/src/lib/supabase.js"
click node_utils "https://github.com/ibrahimkataya/i-chatt-app/blob/main/backend/src/lib/utils.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_chatcomponents,node_themestore,node_profilepage,node_settingspage,node_person,node_browser toneBlue
class node_authstore,node_authroutes,node_authmiddleware,node_authcontroller,node_utils toneAmber
class node_chatstore,node_messageroutes,node_messagecontroller,node_socket toneMint
class node_api,node_usermodel,node_messagemodel,node_database,node_store,node_supabaseclient,node_supabase toneRose
```

## Components

### Frontend

- [App routing](https://github.com/ibrahimkataya/i-chatt-app/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Auth pages](https://github.com/ibrahimkataya/i-chatt-app/tree/main/frontend/src/pages): `frontend/src/pages`
- [Chat interface](https://github.com/ibrahimkataya/i-chatt-app/blob/main/frontend/src/pages/HomePage.jsx): `frontend/src/pages/HomePage.jsx`
- [Chat components](https://github.com/ibrahimkataya/i-chatt-app/tree/main/frontend/src/components): `frontend/src/components`
- [Theme state](https://github.com/ibrahimkataya/i-chatt-app/blob/main/frontend/src/store/useThemeStore.js): `frontend/src/store/useThemeStore.js`
- [Profile page](https://github.com/ibrahimkataya/i-chatt-app/blob/main/frontend/src/pages/ProfilePage.jsx): `frontend/src/pages/ProfilePage.jsx`
- [Settings page](https://github.com/ibrahimkataya/i-chatt-app/blob/main/frontend/src/pages/SettingsPage.jsx): `frontend/src/pages/SettingsPage.jsx`

### Authentication

- [Auth state](https://github.com/ibrahimkataya/i-chatt-app/blob/main/frontend/src/store/useAuthStore.js): `frontend/src/store/useAuthStore.js`
- [Auth routes](https://github.com/ibrahimkataya/i-chatt-app/blob/main/backend/src/routes/auth.route.js): `backend/src/routes/auth.route.js`
- [Route protection](https://github.com/ibrahimkataya/i-chatt-app/blob/main/backend/src/middleware/auth.middleware.js): `backend/src/middleware/auth.middleware.js`
- [Auth controller](https://github.com/ibrahimkataya/i-chatt-app/blob/main/backend/src/controllers/auth.controller.js): `backend/src/controllers/auth.controller.js`
- [Token utilities](https://github.com/ibrahimkataya/i-chatt-app/blob/main/backend/src/lib/utils.js): `backend/src/lib/utils.js`

### Messaging

- [Chat state](https://github.com/ibrahimkataya/i-chatt-app/blob/main/frontend/src/store/useChatStore.js): `frontend/src/store/useChatStore.js`
- [Message routes](https://github.com/ibrahimkataya/i-chatt-app/blob/main/backend/src/routes/message.route.js): `backend/src/routes/message.route.js`
- [Message controller](https://github.com/ibrahimkataya/i-chatt-app/blob/main/backend/src/controllers/message.controller.js): `backend/src/controllers/message.controller.js`
- [Socket.IO server](https://github.com/ibrahimkataya/i-chatt-app/blob/main/backend/src/lib/socket.js): `backend/src/lib/socket.js`

### Persistence and realtime

- [HTTP API](https://github.com/ibrahimkataya/i-chatt-app/blob/main/backend/src/index.js): `backend/src/index.js`
- [User model](https://github.com/ibrahimkataya/i-chatt-app/blob/main/backend/src/models/user.model.js): `backend/src/models/user.model.js`
- [Message model](https://github.com/ibrahimkataya/i-chatt-app/blob/main/backend/src/models/message.model.js): `backend/src/models/message.model.js`
- [Database connection](https://github.com/ibrahimkataya/i-chatt-app/blob/main/backend/src/lib/db.js): `backend/src/lib/db.js`
- **MongoDB**
- [Supabase client](https://github.com/ibrahimkataya/i-chatt-app/blob/main/backend/src/lib/supabase.js): `backend/src/lib/supabase.js`
- **Supabase storage**

### Other components

- **User**
- **Browser**

## Connections

- User → App routing: uses
- App routing → Auth state: checks session
- App routing → Auth pages: routes to
- App routing → Chat interface: routes to
- App routing → Profile page: routes to
- App routing → Settings page: routes to
- Chat interface → Chat state: loads chat state
- Chat interface → Chat components: renders
- Auth pages → Auth state: authenticates
- Auth state → HTTP API: calls auth API
- Chat state → HTTP API: calls message API
- Chat state → Auth state: uses socket
- Settings page → Theme state: selects theme
- Profile page → Auth state: updates profile
- HTTP API → Auth routes: dispatches
- HTTP API → Message routes: dispatches
- Auth routes → Auth controller: dispatches
- Auth routes → Route protection: protects routes
- Route protection → User model: loads user
- Auth controller → User model: reads and writes
- Auth controller → Token utilities: creates token
- Auth controller → Supabase client: manages profile images
- Message routes → Route protection: protects routes
- Message routes → Message controller: dispatches
- Message controller → User model: lists users
- Message controller → Message model: reads and writes
- Message controller → Supabase client: uploads images
- Message controller → Socket.IO server: emits message
- Auth state → Socket.IO server: connects client
- HTTP API → Database connection: connects on start
- Database connection → MongoDB: connects
- User model → MongoDB: persists users
- Message model → MongoDB: persists messages
- Supabase client → Supabase storage: uploads and removes
- Browser → HTTP API: HTTP requests
- Socket.IO server → Auth state: online users
- Socket.IO server → Chat state: new messages