# vishnuvardhankakara21/mern-realtime-chat architecture

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

- Interactive diagram: https://gitdiagram.com/vishnuvardhankakara21/mern-realtime-chat
- Repository: https://github.com/vishnuvardhankakara21/mern-realtime-chat

## Overview

This MERN chat application supports account registration and login, user discovery, direct and group chat management, message history and sending, and real-time message delivery, typing events, and notifications. The React app provides the user-facing pages and shared chat context; Express routes dispatch requests to controllers, which use Mongoose models for persistence. Socket.IO handling is hosted in the backend server. Frontend API-call wiring and several feature implementations are not shown in the sampled source, so uncertain connections are omitted.

Main entry points: [`backend/models/userModel.js`](https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/backend/models/userModel.js) (User records), [`backend/server.js`](https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/backend/server.js) (Express and Socket.IO), [`frontend/src/Pages/Chatpage.jsx`](https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/frontend/src/Pages/Chatpage.jsx) (Chat page), [`backend/controllers/messageControllers.js`](https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/backend/controllers/messageControllers.js) (Message operations)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Chat interface"]
  node_app["React app<br/>[App.jsx]"]
  node_chatpage["Chat page<br/>[Chatpage.jsx]"]
  node_homepage["Home page<br/>[Homepage.jsx]"]
  node_chatcontext["Chat context<br/>[ChatProvider.jsx]"]
  node_chatbox["Chat box<br/>[ChatBox.jsx]"]
  node_mychats["Chat list<br/>[MyChats.jsx]"]
  node_usercomponents["User forms<br/>[login.jsx]"]
end

subgraph group_api["REST API"]
  node_server["Express and Socket.IO<br/>[server.js]"]
  node_useroutes["User routes<br/>[userRoutes.js]"]
  node_chatroutes["Chat routes<br/>[chatRoutes.js]"]
  node_messageroutes["Message routes<br/>[messageRoutes.js]"]
  node_usercontroller["User operations<br/>[userControllers.js]"]
  node_chatcontroller["Chat operations<br/>[chatControllers.js]"]
  node_messagecontroller["Message operations"]
  node_auth["JWT protection<br/>[authMiddleware.js]"]
end

subgraph group_realtime["Realtime messaging"]
end

subgraph group_data["Persistent data"]
  node_user_model["User records<br/>[userModel.js]"]
  node_chat_model["Chat records<br/>[chatModel.js]"]
  node_message_model["Message records<br/>[messageModel.js]"]
end

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

node_user -->|"uses"| node_homepage
node_user -->|"uses"| node_chatpage
node_app -->|"routes"| node_homepage
node_app -->|"routes"| node_chatpage
node_chatpage -->|"shares state"| node_chatcontext
node_chatpage -->|"renders"| node_chatbox
node_chatpage -->|"renders"| node_mychats
node_homepage -->|"renders"| node_usercomponents
node_server -->|"mounts"| node_useroutes
node_server -->|"mounts"| node_chatroutes
node_server -->|"mounts"| node_messageroutes
node_useroutes -->|"dispatches"| node_usercontroller
node_chatroutes -->|"dispatches"| node_chatcontroller
node_messageroutes -->|"dispatches"| node_messagecontroller
node_useroutes -->|"protects routes"| node_auth
node_chatroutes -->|"protects routes"| node_auth
node_messageroutes -->|"protects routes"| node_auth
node_usercontroller -->|"reads/writes"| node_user_model
node_chatcontroller -->|"reads/writes"| node_chat_model
node_chatcontroller -->|"populates users"| node_user_model
node_messagecontroller -->|"reads/writes"| node_message_model
node_messagecontroller -->|"updates last message"| node_chat_model
node_messagecontroller -->|"populates users"| node_user_model
node_auth -->|"loads user"| node_user_model
node_user_model -->|"persists"| node_mongo
node_chat_model -->|"persists"| node_mongo
node_message_model -->|"persists"| node_mongo
node_server -->|"stores offline notifications"| node_user_model
node_server -->|"emits chat events"| node_user

click node_app "https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/frontend/src/App.jsx"
click node_chatpage "https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/frontend/src/Pages/Chatpage.jsx"
click node_homepage "https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/frontend/src/Pages/Homepage.jsx"
click node_chatcontext "https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/frontend/src/Context/ChatProvider.jsx"
click node_chatbox "https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/frontend/src/components/ChatBox.jsx"
click node_mychats "https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/frontend/src/components/MyChats.jsx"
click node_usercomponents "https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/frontend/src/components/login.jsx"
click node_server "https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/backend/server.js"
click node_useroutes "https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/backend/routes/userRoutes.js"
click node_chatroutes "https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/backend/routes/chatRoutes.js"
click node_messageroutes "https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/backend/routes/messageRoutes.js"
click node_usercontroller "https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/backend/controllers/userControllers.js"
click node_chatcontroller "https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/backend/controllers/chatControllers.js"
click node_messagecontroller "https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/backend/controllers/messageControllers.js"
click node_auth "https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/backend/middleware/authMiddleware.js"
click node_user_model "https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/backend/models/userModel.js"
click node_chat_model "https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/backend/models/chatModel.js"
click node_message_model "https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/backend/models/messageModel.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_chatpage,node_homepage,node_chatcontext,node_chatbox,node_mychats,node_usercomponents,node_user toneBlue
class node_server,node_useroutes,node_chatroutes,node_messageroutes,node_usercontroller,node_chatcontroller,node_messagecontroller,node_auth,node_mongo toneAmber
class node_user_model,node_chat_model,node_message_model toneRose
```

## Components

### Chat interface

- [React app](https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Chat page](https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/frontend/src/Pages/Chatpage.jsx): `frontend/src/Pages/Chatpage.jsx`
- [Home page](https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/frontend/src/Pages/Homepage.jsx): `frontend/src/Pages/Homepage.jsx`
- [Chat context](https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/frontend/src/Context/ChatProvider.jsx): `frontend/src/Context/ChatProvider.jsx`
- [Chat box](https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/frontend/src/components/ChatBox.jsx): `frontend/src/components/ChatBox.jsx`
- [Chat list](https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/frontend/src/components/MyChats.jsx): `frontend/src/components/MyChats.jsx`
- [User forms](https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/frontend/src/components/login.jsx): `frontend/src/components/login.jsx`

### REST API

- [Express and Socket.IO](https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/backend/server.js): `backend/server.js`
- [User routes](https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/backend/routes/userRoutes.js): `backend/routes/userRoutes.js`
- [Chat routes](https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/backend/routes/chatRoutes.js): `backend/routes/chatRoutes.js`
- [Message routes](https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/backend/routes/messageRoutes.js): `backend/routes/messageRoutes.js`
- [User operations](https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/backend/controllers/userControllers.js): `backend/controllers/userControllers.js`
- [Chat operations](https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/backend/controllers/chatControllers.js): `backend/controllers/chatControllers.js`
- [Message operations](https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/backend/controllers/messageControllers.js): `backend/controllers/messageControllers.js`
- [JWT protection](https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/backend/middleware/authMiddleware.js): `backend/middleware/authMiddleware.js`

### Persistent data

- [User records](https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/backend/models/userModel.js): `backend/models/userModel.js`
- [Chat records](https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/backend/models/chatModel.js): `backend/models/chatModel.js`
- [Message records](https://github.com/vishnuvardhankakara21/mern-realtime-chat/blob/main/backend/models/messageModel.js): `backend/models/messageModel.js`

### Other components

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

## Connections

- Chat user → Home page: uses
- Chat user → Chat page: uses
- React app → Home page: routes
- React app → Chat page: routes
- Chat page → Chat context: shares state
- Chat page → Chat box: renders
- Chat page → Chat list: renders
- Home page → User forms: renders
- Express and Socket.IO → User routes: mounts
- Express and Socket.IO → Chat routes: mounts
- Express and Socket.IO → Message routes: mounts
- User routes → User operations: dispatches
- Chat routes → Chat operations: dispatches
- Message routes → Message operations: dispatches
- User routes → JWT protection: protects routes
- Chat routes → JWT protection: protects routes
- Message routes → JWT protection: protects routes
- User operations → User records: reads/writes
- Chat operations → Chat records: reads/writes
- Chat operations → User records: populates users
- Message operations → Message records: reads/writes
- Message operations → Chat records: updates last message
- Message operations → User records: populates users
- JWT protection → User records: loads user
- User records → MongoDB: persists
- Chat records → MongoDB: persists
- Message records → MongoDB: persists
- Express and Socket.IO → User records: stores offline notifications
- Express and Socket.IO → Chat user: emits chat events