# trinadhgorrela/real-time-chat-app architecture

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

- Interactive diagram: https://gitdiagram.com/trinadhgorrela/real-time-chat-app
- Repository: https://github.com/trinadhgorrela/real-time-chat-app

## Overview

ChatApp is a full-stack messaging product. A user enters through the public landing page, registers or logs in, then uses the protected chat workspace to manage contacts and exchange messages and files. The frontend combines REST services with STOMP/WebSocket state; the Spring backend handles authentication, contact and message operations, and file storage. The README documents read receipts, typing, presence, search, and responsive chat features. Some connections below rely on README statements or the source index; unsampled implementation details are not assumed.

Main entry points: [`Backend/src/main/java/com/chatapp/controller/ChatController.java`](https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Backend/src/main/java/com/chatapp/controller/ChatController.java) (REST and chat controllers), [`Frontend/src/components/chat/ChatApp.jsx`](https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Frontend/src/components/chat/ChatApp.jsx) (Chat workspace), [`Frontend/src/App.jsx`](https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Frontend/src/App.jsx) (App routing), [`Frontend/src/components/chat/ChatArea.jsx`](https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Frontend/src/components/chat/ChatArea.jsx) (Conversation view)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["React client"]
  node_app["App routing<br/>[App.jsx]"]
  node_landing["Landing page<br/>[LandingPage.jsx]"]
  node_authforms["Login and register<br/>[Login.jsx]"]
  node_authstate["Auth state<br/>[AuthContext.jsx]"]
  node_authservice["Auth API service<br/>[authService.js]"]
  node_apiservice["HTTP client<br/>[api.js]"]
  node_chatapp["Chat workspace<br/>[ChatApp.jsx]"]
  node_chatarea["Conversation view<br/>[ChatArea.jsx]"]
  node_messageinput["Message composer<br/>[MessageInput.jsx]"]
  node_friendui["Contact management<br/>[RequestsModal.jsx]"]
  node_settings["Profile settings<br/>[SettingsModal.jsx]"]
end

subgraph group_backend["Spring backend"]
  node_controllers["REST and chat controllers"]
  node_userservice["User and contacts<br/>[UserService.java]"]
  node_chatservice["Message operations<br/>[ChatService.java]"]
  node_fileservice["File handling<br/>[FileService.java]"]
end

subgraph group_data["Persistence and files"]
  node_repositories["JPA repositories"]
  node_entities["User contact message records<br/>[Message.java]"]
  node_database[("MySQL database")]
  node_disk[("File storage")]
end

subgraph group_security["Authentication and transport"]
  node_wscontext["WebSocket client"]
  node_authsecurity["JWT security<br/>[JwtAuthFilter.java]"]
  node_wsconfig["STOMP broker setup"]
end

node_browser(("User browser"))

node_browser -->|"opens"| node_app
node_app -->|"routes to"| node_landing
node_app -->|"routes to"| node_authforms
node_app -->|"guards and routes"| node_chatapp
node_authforms -->|"updates"| node_authstate
node_authforms -->|"calls"| node_authservice
node_authservice -->|"sends requests"| node_apiservice
node_authservice -->|"calls auth endpoints"| node_controllers
node_chatapp -->|"renders"| node_chatarea
node_chatapp -->|"opens requests"| node_friendui
node_chatapp -->|"opens settings"| node_settings
node_chatarea -->|"renders"| node_messageinput
node_chatarea -->|"subscribes and sends"| node_wscontext
node_settings -->|"calls profile endpoints"| node_authservice
node_chatapp -->|"uses contact API"| node_controllers
node_chatarea -->|"loads chat data"| node_controllers
node_wscontext -->|"connects by STOMP"| node_wsconfig
node_controllers -->|"delegates user work"| node_userservice
node_controllers -->|"delegates chat work"| node_chatservice
node_controllers -->|"delegates file work"| node_fileservice
node_userservice -->|"queries and updates"| node_repositories
node_chatservice -->|"stores and reads messages"| node_repositories
node_chatservice -->|"deletes attachments"| node_fileservice
node_chatservice -->|"publishes events"| node_wsconfig
node_repositories -->|"persists"| node_entities
node_entities -->|"maps records"| node_database
node_fileservice -->|"stores and loads"| node_disk
node_authsecurity -->|"filters requests"| node_controllers
node_authsecurity -.->|"loads user records"| node_database

click node_app "https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Frontend/src/App.jsx"
click node_landing "https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Frontend/src/components/landing/LandingPage.jsx"
click node_authforms "https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Frontend/src/components/auth/Login.jsx"
click node_authstate "https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Frontend/src/context/AuthContext.jsx"
click node_authservice "https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Frontend/src/services/authService.js"
click node_apiservice "https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Frontend/src/services/api.js"
click node_chatapp "https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Frontend/src/components/chat/ChatApp.jsx"
click node_chatarea "https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Frontend/src/components/chat/ChatArea.jsx"
click node_messageinput "https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Frontend/src/components/chat/MessageInput.jsx"
click node_friendui "https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Frontend/src/components/modals/RequestsModal.jsx"
click node_settings "https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Frontend/src/components/modals/SettingsModal.jsx"
click node_wscontext "https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Frontend/src/context/WebSocketContext.jsx"
click node_controllers "https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Backend/src/main/java/com/chatapp/controller/ChatController.java"
click node_userservice "https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Backend/src/main/java/com/chatapp/service/UserService.java"
click node_chatservice "https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Backend/src/main/java/com/chatapp/service/ChatService.java"
click node_fileservice "https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Backend/src/main/java/com/chatapp/service/FileService.java"
click node_authsecurity "https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Backend/src/main/java/com/chatapp/security/JwtAuthFilter.java"
click node_wsconfig "https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Backend/src/main/java/com/chatapp/config/WebSocketConfig.java"
click node_repositories "https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Backend/src/main/java/com/chatapp/repository/MessageRepository.java"
click node_entities "https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Backend/src/main/java/com/chatapp/entity/Message.java"

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_landing,node_authforms,node_authstate,node_authservice,node_apiservice,node_chatapp,node_chatarea,node_messageinput,node_friendui,node_settings,node_browser toneBlue
class node_controllers,node_userservice,node_chatservice,node_fileservice toneAmber
class node_repositories,node_entities,node_database,node_disk toneMint
class node_wscontext,node_authsecurity,node_wsconfig toneRose
```

## Components

### React client

- [App routing](https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Frontend/src/App.jsx): `Frontend/src/App.jsx`
- [Landing page](https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Frontend/src/components/landing/LandingPage.jsx): `Frontend/src/components/landing/LandingPage.jsx`
- [Login and register](https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Frontend/src/components/auth/Login.jsx): `Frontend/src/components/auth/Login.jsx`
- [Auth state](https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Frontend/src/context/AuthContext.jsx): `Frontend/src/context/AuthContext.jsx`
- [Auth API service](https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Frontend/src/services/authService.js): `Frontend/src/services/authService.js`
- [HTTP client](https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Frontend/src/services/api.js): `Frontend/src/services/api.js`
- [Chat workspace](https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Frontend/src/components/chat/ChatApp.jsx): `Frontend/src/components/chat/ChatApp.jsx`
- [Conversation view](https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Frontend/src/components/chat/ChatArea.jsx): `Frontend/src/components/chat/ChatArea.jsx`
- [Message composer](https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Frontend/src/components/chat/MessageInput.jsx): `Frontend/src/components/chat/MessageInput.jsx`
- [Contact management](https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Frontend/src/components/modals/RequestsModal.jsx): `Frontend/src/components/modals/RequestsModal.jsx`
- [Profile settings](https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Frontend/src/components/modals/SettingsModal.jsx): `Frontend/src/components/modals/SettingsModal.jsx`

### Spring backend

- [REST and chat controllers](https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Backend/src/main/java/com/chatapp/controller/ChatController.java): `Backend/src/main/java/com/chatapp/controller/ChatController.java`
- [User and contacts](https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Backend/src/main/java/com/chatapp/service/UserService.java): `Backend/src/main/java/com/chatapp/service/UserService.java`
- [Message operations](https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Backend/src/main/java/com/chatapp/service/ChatService.java): `Backend/src/main/java/com/chatapp/service/ChatService.java`
- [File handling](https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Backend/src/main/java/com/chatapp/service/FileService.java): `Backend/src/main/java/com/chatapp/service/FileService.java`

### Persistence and files

- [JPA repositories](https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Backend/src/main/java/com/chatapp/repository/MessageRepository.java): `Backend/src/main/java/com/chatapp/repository/MessageRepository.java`
- [User contact message records](https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Backend/src/main/java/com/chatapp/entity/Message.java): `Backend/src/main/java/com/chatapp/entity/Message.java`
- **MySQL database**
- **File storage**

### Authentication and transport

- [WebSocket client](https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Frontend/src/context/WebSocketContext.jsx): `Frontend/src/context/WebSocketContext.jsx`
- [JWT security](https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Backend/src/main/java/com/chatapp/security/JwtAuthFilter.java): `Backend/src/main/java/com/chatapp/security/JwtAuthFilter.java`
- [STOMP broker setup](https://github.com/trinadhgorrela/real-time-chat-app/blob/main/Backend/src/main/java/com/chatapp/config/WebSocketConfig.java): `Backend/src/main/java/com/chatapp/config/WebSocketConfig.java`

### Other components

- **User browser**

## Connections

- User browser → App routing: opens (evidence: `README.md`)
- App routing → Landing page: routes to (evidence: `Frontend/src/App.jsx`)
- App routing → Login and register: routes to (evidence: `Frontend/src/App.jsx`)
- App routing → Chat workspace: guards and routes (evidence: `Frontend/src/App.jsx`)
- Login and register → Auth state: updates (evidence: `Frontend/src/components/auth/Login.jsx`)
- Login and register → Auth API service: calls (evidence: `Frontend/src/components/auth/Login.jsx`)
- Auth API service → HTTP client: sends requests (evidence: `Frontend/src/services/authService.js`)
- Auth API service → REST and chat controllers: calls auth endpoints (evidence: `Frontend/src/services/authService.js`)
- Chat workspace → Conversation view: renders (evidence: `Frontend/src/components/chat/ChatApp.jsx`)
- Chat workspace → Contact management: opens requests (evidence: `Frontend/src/components/chat/ChatApp.jsx`)
- Chat workspace → Profile settings: opens settings (evidence: `Frontend/src/components/chat/ChatApp.jsx`)
- Conversation view → Message composer: renders (evidence: `Frontend/src/components/chat/ChatArea.jsx`)
- Conversation view → WebSocket client: subscribes and sends (evidence: `Frontend/src/components/chat/ChatArea.jsx`)
- Profile settings → Auth API service: calls profile endpoints (evidence: `Frontend/src/components/modals/SettingsModal.jsx`)
- Chat workspace → REST and chat controllers: uses contact API (evidence: `README.md`)
- Conversation view → REST and chat controllers: loads chat data (evidence: `README.md`)
- WebSocket client → STOMP broker setup: connects by STOMP (evidence: `README.md`)
- REST and chat controllers → User and contacts: delegates user work
- REST and chat controllers → Message operations: delegates chat work (evidence: `Backend/src/main/java/com/chatapp/controller/ChatController.java`)
- REST and chat controllers → File handling: delegates file work
- User and contacts → JPA repositories: queries and updates (evidence: `Backend/src/main/java/com/chatapp/service/UserService.java`)
- Message operations → JPA repositories: stores and reads messages (evidence: `Backend/src/main/java/com/chatapp/service/ChatService.java`)
- Message operations → File handling: deletes attachments (evidence: `Backend/src/main/java/com/chatapp/service/ChatService.java`)
- Message operations → STOMP broker setup: publishes events (evidence: `Backend/src/main/java/com/chatapp/service/ChatService.java`)
- JPA repositories → User contact message records: persists (evidence: `Backend/src/main/java/com/chatapp/repository/MessageRepository.java`)
- User contact message records → MySQL database: maps records (evidence: `README.md`)
- File handling → File storage: stores and loads (evidence: `Backend/src/main/java/com/chatapp/service/FileService.java`)
- JWT security → REST and chat controllers: filters requests
- JWT security → MySQL database: loads user records