# aryan9787/syncat architecture

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

- Interactive diagram: https://gitdiagram.com/aryan9787/syncat
- Repository: https://github.com/aryan9787/syncat

## Overview

Syncat is a full-stack real-time chat application. A user enters through authentication, then uses the chat interface to find contacts, start direct conversations or create channels, and exchange messages and files. The client also provides profile management; the server handles authenticated REST requests and Socket.io communication, with MongoDB-backed user, channel, and message data. The README documents file/media sharing and online status. Some client-to-server wiring is not visible in the excerpts, so those links are shown as unverified where appropriate.

Main entry points: [`client/src/App.jsx`](https://github.com/aryan9787/syncat/blob/main/client/src/App.jsx) (App and routes), [`client/src/lib/api-client.js`](https://github.com/aryan9787/syncat/blob/main/client/src/lib/api-client.js) (API client), [`server/models`](https://github.com/aryan9787/syncat/tree/main/server/models) (User, channel, message models), [`server/index.js`](https://github.com/aryan9787/syncat/blob/main/server/index.js) (Express routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["React client"]
  node_app["App and routes<br/>[App.jsx]"]
  node_authui["Authentication UI<br/>[index.jsx]"]
  node_profileui["Profile UI<br/>[index.jsx]"]
  node_chatui["Chat workspace<br/>[index.jsx]"]
  node_contactsui["Contact and channel panels"]
  node_messagesui["Message and file UI"]
  node_state["Client state"]
  node_api["API client<br/>[api-client.js]"]
  node_socketctx["Socket context<br/>[SocketContext.jsx]"]
end

subgraph group_server["API and realtime server"]
  node_http["Express routes<br/>[index.js]"]
  node_authroutes["Auth routes<br/>[AuthRoutes.js]"]
  node_contactroutes["Contact routes<br/>[ContactRoutes.js]"]
  node_channelroutes["Channel routes<br/>[ChannelRoutes.js]"]
  node_messageroutes["Message routes<br/>[MessagesRoutes.js]"]
  node_auth["Identity and profiles<br/>[AuthController.js]"]
  node_contacts["Contact discovery"]
  node_channels["Channel management"]
  node_messages["Message history and uploads"]
  node_guard["JWT authorization<br/>[AuthMiddleware.js]"]
  node_realtime["Socket engine<br/>[socket.js]"]
end

subgraph group_data["Chat data"]
  node_models[("User, channel, message models")]
end

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

node_user -->|"uses"| node_app
node_app -->|"routes to"| node_authui
node_app -->|"routes to"| node_chatui
node_app -->|"routes to"| node_profileui
node_app -->|"checks session"| node_api
node_app -->|"reads session"| node_state
node_chatui -.->|"renders"| node_contactsui
node_chatui -.->|"renders"| node_messagesui
node_contactsui -.->|"uses"| node_state
node_messagesui -.->|"uses"| node_state
node_authui -.->|"calls REST"| node_api
node_profileui -.->|"calls REST"| node_api
node_contactsui -.->|"calls REST"| node_api
node_messagesui -.->|"calls REST"| node_api
node_socketctx -.->|"exchanges events"| node_realtime
node_api -.->|"sends REST requests"| node_http
node_http -->|"mounts"| node_authroutes
node_http -->|"mounts"| node_contactroutes
node_http -->|"mounts"| node_channelroutes
node_http -->|"mounts"| node_messageroutes
node_authroutes -->|"applies"| node_guard
node_contactroutes -->|"applies"| node_guard
node_channelroutes -->|"applies"| node_guard
node_messageroutes -->|"applies"| node_guard
node_authroutes -->|"dispatches"| node_auth
node_contactroutes -->|"dispatches"| node_contacts
node_channelroutes -->|"dispatches"| node_channels
node_messageroutes -->|"dispatches"| node_messages
node_auth -->|"reads and writes"| node_models
node_contacts -->|"queries"| node_models
node_channels -->|"reads and writes"| node_models
node_messages -->|"queries"| node_models
node_realtime -->|"uses message and channel data"| node_models
node_models -.->|"persists data"| node_mongodb
node_user -.->|"connects for live chat"| node_socketctx

click node_app "https://github.com/aryan9787/syncat/blob/main/client/src/App.jsx"
click node_authui "https://github.com/aryan9787/syncat/blob/main/client/src/pages/auth/index.jsx"
click node_profileui "https://github.com/aryan9787/syncat/blob/main/client/src/pages/profile/index.jsx"
click node_chatui "https://github.com/aryan9787/syncat/blob/main/client/src/pages/chat/index.jsx"
click node_contactsui "https://github.com/aryan9787/syncat/tree/main/client/src/pages/chat/components/contacts-container"
click node_messagesui "https://github.com/aryan9787/syncat/tree/main/client/src/pages/chat/components/chat-container"
click node_state "https://github.com/aryan9787/syncat/tree/main/client/src/store/slices"
click node_api "https://github.com/aryan9787/syncat/blob/main/client/src/lib/api-client.js"
click node_socketctx "https://github.com/aryan9787/syncat/blob/main/client/src/context/SocketContext.jsx"
click node_http "https://github.com/aryan9787/syncat/blob/main/server/index.js"
click node_authroutes "https://github.com/aryan9787/syncat/blob/main/server/routes/AuthRoutes.js"
click node_contactroutes "https://github.com/aryan9787/syncat/blob/main/server/routes/ContactRoutes.js"
click node_channelroutes "https://github.com/aryan9787/syncat/blob/main/server/routes/ChannelRoutes.js"
click node_messageroutes "https://github.com/aryan9787/syncat/blob/main/server/routes/MessagesRoutes.js"
click node_auth "https://github.com/aryan9787/syncat/blob/main/server/controllers/AuthController.js"
click node_contacts "https://github.com/aryan9787/syncat/blob/main/server/controllers/ContactController.js"
click node_channels "https://github.com/aryan9787/syncat/blob/main/server/controllers/ChannelController.js"
click node_messages "https://github.com/aryan9787/syncat/blob/main/server/controllers/MessagesController.js"
click node_guard "https://github.com/aryan9787/syncat/blob/main/server/middlewares/AuthMiddleware.js"
click node_realtime "https://github.com/aryan9787/syncat/blob/main/server/socket.js"
click node_models "https://github.com/aryan9787/syncat/tree/main/server/models"

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_authui,node_profileui,node_chatui,node_contactsui,node_messagesui,node_state,node_api,node_socketctx,node_user toneBlue
class node_http,node_authroutes,node_contactroutes,node_channelroutes,node_messageroutes,node_auth,node_contacts,node_channels,node_messages,node_guard,node_realtime,node_mongodb toneAmber
class node_models toneMint
```

## Components

### React client

- [App and routes](https://github.com/aryan9787/syncat/blob/main/client/src/App.jsx): `client/src/App.jsx`
- [Authentication UI](https://github.com/aryan9787/syncat/blob/main/client/src/pages/auth/index.jsx): `client/src/pages/auth/index.jsx`
- [Profile UI](https://github.com/aryan9787/syncat/blob/main/client/src/pages/profile/index.jsx): `client/src/pages/profile/index.jsx`
- [Chat workspace](https://github.com/aryan9787/syncat/blob/main/client/src/pages/chat/index.jsx): `client/src/pages/chat/index.jsx`
- [Contact and channel panels](https://github.com/aryan9787/syncat/tree/main/client/src/pages/chat/components/contacts-container): `client/src/pages/chat/components/contacts-container`
- [Message and file UI](https://github.com/aryan9787/syncat/tree/main/client/src/pages/chat/components/chat-container): `client/src/pages/chat/components/chat-container`
- [Client state](https://github.com/aryan9787/syncat/tree/main/client/src/store/slices): `client/src/store/slices`
- [API client](https://github.com/aryan9787/syncat/blob/main/client/src/lib/api-client.js): `client/src/lib/api-client.js`
- [Socket context](https://github.com/aryan9787/syncat/blob/main/client/src/context/SocketContext.jsx): `client/src/context/SocketContext.jsx`

### API and realtime server

- [Express routes](https://github.com/aryan9787/syncat/blob/main/server/index.js): `server/index.js`
- [Auth routes](https://github.com/aryan9787/syncat/blob/main/server/routes/AuthRoutes.js): `server/routes/AuthRoutes.js`
- [Contact routes](https://github.com/aryan9787/syncat/blob/main/server/routes/ContactRoutes.js): `server/routes/ContactRoutes.js`
- [Channel routes](https://github.com/aryan9787/syncat/blob/main/server/routes/ChannelRoutes.js): `server/routes/ChannelRoutes.js`
- [Message routes](https://github.com/aryan9787/syncat/blob/main/server/routes/MessagesRoutes.js): `server/routes/MessagesRoutes.js`
- [Identity and profiles](https://github.com/aryan9787/syncat/blob/main/server/controllers/AuthController.js): `server/controllers/AuthController.js`
- [Contact discovery](https://github.com/aryan9787/syncat/blob/main/server/controllers/ContactController.js): `server/controllers/ContactController.js`
- [Channel management](https://github.com/aryan9787/syncat/blob/main/server/controllers/ChannelController.js): `server/controllers/ChannelController.js`
- [Message history and uploads](https://github.com/aryan9787/syncat/blob/main/server/controllers/MessagesController.js): `server/controllers/MessagesController.js`
- [JWT authorization](https://github.com/aryan9787/syncat/blob/main/server/middlewares/AuthMiddleware.js): `server/middlewares/AuthMiddleware.js`
- [Socket engine](https://github.com/aryan9787/syncat/blob/main/server/socket.js): `server/socket.js`

### Chat data

- [User, channel, message models](https://github.com/aryan9787/syncat/tree/main/server/models): `server/models`

### Other components

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

## Connections

- Chat user → App and routes: uses (evidence: `client/src/App.jsx`)
- App and routes → Authentication UI: routes to (evidence: `client/src/App.jsx`)
- App and routes → Chat workspace: routes to (evidence: `client/src/App.jsx`)
- App and routes → Profile UI: routes to (evidence: `client/src/App.jsx`)
- App and routes → API client: checks session (evidence: `client/src/App.jsx`)
- App and routes → Client state: reads session (evidence: `client/src/App.jsx`)
- Chat workspace → Contact and channel panels: renders
- Chat workspace → Message and file UI: renders
- Contact and channel panels → Client state: uses
- Message and file UI → Client state: uses
- Authentication UI → API client: calls REST
- Profile UI → API client: calls REST
- Contact and channel panels → API client: calls REST
- Message and file UI → API client: calls REST
- Socket context → Socket engine: exchanges events
- API client → Express routes: sends REST requests
- Express routes → Auth routes: mounts (evidence: `server/index.js`)
- Express routes → Contact routes: mounts (evidence: `server/index.js`)
- Express routes → Channel routes: mounts (evidence: `server/index.js`)
- Express routes → Message routes: mounts (evidence: `server/index.js`)
- Auth routes → JWT authorization: applies (evidence: `server/routes/AuthRoutes.js`)
- Contact routes → JWT authorization: applies (evidence: `server/routes/ContactRoutes.js`)
- Channel routes → JWT authorization: applies (evidence: `server/routes/ChannelRoutes.js`)
- Message routes → JWT authorization: applies (evidence: `server/routes/MessagesRoutes.js`)
- Auth routes → Identity and profiles: dispatches (evidence: `server/routes/AuthRoutes.js`)
- Contact routes → Contact discovery: dispatches (evidence: `server/routes/ContactRoutes.js`)
- Channel routes → Channel management: dispatches (evidence: `server/routes/ChannelRoutes.js`)
- Message routes → Message history and uploads: dispatches (evidence: `server/routes/MessagesRoutes.js`)
- Identity and profiles → User, channel, message models: reads and writes (evidence: `server/controllers/AuthController.js`)
- Contact discovery → User, channel, message models: queries (evidence: `server/controllers/ContactController.js`)
- Channel management → User, channel, message models: reads and writes (evidence: `server/controllers/ChannelController.js`)
- Message history and uploads → User, channel, message models: queries (evidence: `server/controllers/MessagesController.js`)
- Socket engine → User, channel, message models: uses message and channel data (evidence: `server/socket.js`)
- User, channel, message models → MongoDB: persists data
- Chat user → Socket context: connects for live chat