# pratik-vats/spillthetea architecture

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

- Interactive diagram: https://gitdiagram.com/pratik-vats/spillthetea
- Repository: https://github.com/pratik-vats/spillthetea

## Overview

SpillTheTea is an anonymous, multi-room real-time chat app. A visitor uses the React interface to connect without an account, receives a temporary identity, joins or creates a room, and exchanges messages; the interface also shows room activity, loads history, and supports invite links. Socket handlers coordinate identity, room membership, validation, rate limits, message history, and broadcasts. MongoDB provides persistence with documented in-memory fallback for messages. The map follows documented capabilities where socket-handler details were not sampled; those internal edges are limited to supported responsibilities.

Main entry points: [`backend/src/sockets/chatSocket.js`](https://github.com/pratik-vats/spillthetea/blob/main/backend/src/sockets/chatSocket.js) (Chat event handlers), [`frontend/src/App.jsx`](https://github.com/pratik-vats/spillthetea/blob/main/frontend/src/App.jsx) (App layout), [`frontend/src/hooks/useChat.js`](https://github.com/pratik-vats/spillthetea/blob/main/frontend/src/hooks/useChat.js) (Chat state), [`backend/src/server.js`](https://github.com/pratik-vats/spillthetea/blob/main/backend/src/server.js) (HTTP and socket server)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Chat interface"]
  node_app["App layout<br/>[App.jsx]"]
  node_chatwindow["Chat window<br/>[ChatWindow.jsx]"]
  node_roomsui["Room navigation<br/>[Sidebar.jsx]"]
  node_createroom["Create room UI"]
  node_input["Message input<br/>[MessageInput.jsx]"]
  node_usechat["Chat state<br/>[useChat.js]"]
  node_socketclient["Socket client<br/>[socket.js]"]
end

subgraph group_realtime["Socket coordination"]
  node_server["HTTP and socket server<br/>[server.js]"]
  node_httpapp["HTTP health endpoint<br/>[app.js]"]
  node_chatsocket["Chat event handlers<br/>[chatSocket.js]"]
end

subgraph group_domain["Chat services"]
  node_security["Message validation<br/>[security.js]"]
  node_users["Anonymous sessions<br/>[userManager.js]"]
  node_ratelimiter["Rate limiting<br/>[rateLimiter.js]"]
  node_rooms["Room lifecycle<br/>[roomManager.js]"]
  node_messages["Message history<br/>[messageManager.js]"]
end

subgraph group_storage["Persistence"]
  node_dbconfig["Database connection<br/>[database.js]"]
  node_messagemodel["Message records<br/>[Message.js]"]
  node_roommodel["Room records<br/>[Room.js]"]
end

node_visitor(("Visitor"))
node_mongodb[("MongoDB")]

node_visitor -->|"uses"| node_app
node_app -->|"reads chat state"| node_usechat
node_app -->|"renders"| node_chatwindow
node_app -->|"renders"| node_roomsui
node_app -->|"renders"| node_createroom
node_chatwindow -->|"renders"| node_input
node_chatwindow -->|"calls actions"| node_usechat
node_roomsui -->|"calls room actions"| node_usechat
node_createroom -->|"creates room"| node_usechat
node_usechat -->|"emits and receives"| node_socketclient
node_socketclient -->|"Socket.IO events"| node_chatsocket
node_server -->|"creates app"| node_httpapp
node_server -->|"connects database"| node_dbconfig
node_server -->|"registers handlers"| node_chatsocket
node_chatsocket -->|"manages sessions"| node_users
node_chatsocket -->|"checks messages"| node_ratelimiter
node_chatsocket -->|"validates payloads"| node_security
node_chatsocket -->|"manages membership"| node_rooms
node_chatsocket -->|"saves and loads"| node_messages
node_messages -->|"reads and writes"| node_messagemodel
node_rooms -->|"reads and writes"| node_roommodel
node_rooms -->|"deletes room messages"| node_messagemodel
node_messagemodel -->|"persists records"| node_mongodb
node_roommodel -->|"persists rooms"| node_mongodb
node_dbconfig -->|"connects and reconnects"| node_mongodb

click node_app "https://github.com/pratik-vats/spillthetea/blob/main/frontend/src/App.jsx"
click node_chatwindow "https://github.com/pratik-vats/spillthetea/blob/main/frontend/src/components/ChatWindow.jsx"
click node_roomsui "https://github.com/pratik-vats/spillthetea/blob/main/frontend/src/components/Sidebar.jsx"
click node_createroom "https://github.com/pratik-vats/spillthetea/blob/main/frontend/src/components/CreateRoomModal.jsx"
click node_input "https://github.com/pratik-vats/spillthetea/blob/main/frontend/src/components/MessageInput.jsx"
click node_usechat "https://github.com/pratik-vats/spillthetea/blob/main/frontend/src/hooks/useChat.js"
click node_socketclient "https://github.com/pratik-vats/spillthetea/blob/main/frontend/src/services/socket.js"
click node_server "https://github.com/pratik-vats/spillthetea/blob/main/backend/src/server.js"
click node_httpapp "https://github.com/pratik-vats/spillthetea/blob/main/backend/src/app.js"
click node_chatsocket "https://github.com/pratik-vats/spillthetea/blob/main/backend/src/sockets/chatSocket.js"
click node_security "https://github.com/pratik-vats/spillthetea/blob/main/backend/src/middleware/security.js"
click node_users "https://github.com/pratik-vats/spillthetea/blob/main/backend/src/services/userManager.js"
click node_ratelimiter "https://github.com/pratik-vats/spillthetea/blob/main/backend/src/services/rateLimiter.js"
click node_rooms "https://github.com/pratik-vats/spillthetea/blob/main/backend/src/services/roomManager.js"
click node_messages "https://github.com/pratik-vats/spillthetea/blob/main/backend/src/services/messageManager.js"
click node_dbconfig "https://github.com/pratik-vats/spillthetea/blob/main/backend/src/config/database.js"
click node_messagemodel "https://github.com/pratik-vats/spillthetea/blob/main/backend/src/models/Message.js"
click node_roommodel "https://github.com/pratik-vats/spillthetea/blob/main/backend/src/models/Room.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_chatwindow,node_roomsui,node_createroom,node_input,node_usechat,node_socketclient toneBlue
class node_server,node_httpapp,node_chatsocket,node_mongodb toneAmber
class node_security,node_users,node_ratelimiter,node_rooms,node_messages toneMint
class node_dbconfig,node_messagemodel,node_roommodel toneRose
class node_visitor toneIndigo
```

## Components

### Chat interface

- [App layout](https://github.com/pratik-vats/spillthetea/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Chat window](https://github.com/pratik-vats/spillthetea/blob/main/frontend/src/components/ChatWindow.jsx): `frontend/src/components/ChatWindow.jsx`
- [Room navigation](https://github.com/pratik-vats/spillthetea/blob/main/frontend/src/components/Sidebar.jsx): `frontend/src/components/Sidebar.jsx`
- [Create room UI](https://github.com/pratik-vats/spillthetea/blob/main/frontend/src/components/CreateRoomModal.jsx): `frontend/src/components/CreateRoomModal.jsx`
- [Message input](https://github.com/pratik-vats/spillthetea/blob/main/frontend/src/components/MessageInput.jsx): `frontend/src/components/MessageInput.jsx`
- [Chat state](https://github.com/pratik-vats/spillthetea/blob/main/frontend/src/hooks/useChat.js): `frontend/src/hooks/useChat.js`
- [Socket client](https://github.com/pratik-vats/spillthetea/blob/main/frontend/src/services/socket.js): `frontend/src/services/socket.js`

### Socket coordination

- [HTTP and socket server](https://github.com/pratik-vats/spillthetea/blob/main/backend/src/server.js): `backend/src/server.js`
- [HTTP health endpoint](https://github.com/pratik-vats/spillthetea/blob/main/backend/src/app.js): `backend/src/app.js`
- [Chat event handlers](https://github.com/pratik-vats/spillthetea/blob/main/backend/src/sockets/chatSocket.js): `backend/src/sockets/chatSocket.js`

### Chat services

- [Message validation](https://github.com/pratik-vats/spillthetea/blob/main/backend/src/middleware/security.js): `backend/src/middleware/security.js`
- [Anonymous sessions](https://github.com/pratik-vats/spillthetea/blob/main/backend/src/services/userManager.js): `backend/src/services/userManager.js`
- [Rate limiting](https://github.com/pratik-vats/spillthetea/blob/main/backend/src/services/rateLimiter.js): `backend/src/services/rateLimiter.js`
- [Room lifecycle](https://github.com/pratik-vats/spillthetea/blob/main/backend/src/services/roomManager.js): `backend/src/services/roomManager.js`
- [Message history](https://github.com/pratik-vats/spillthetea/blob/main/backend/src/services/messageManager.js): `backend/src/services/messageManager.js`

### Persistence

- [Database connection](https://github.com/pratik-vats/spillthetea/blob/main/backend/src/config/database.js): `backend/src/config/database.js`
- [Message records](https://github.com/pratik-vats/spillthetea/blob/main/backend/src/models/Message.js): `backend/src/models/Message.js`
- [Room records](https://github.com/pratik-vats/spillthetea/blob/main/backend/src/models/Room.js): `backend/src/models/Room.js`

### Other components

- **Visitor**
- **MongoDB**

## Connections

- Visitor → App layout: uses
- App layout → Chat state: reads chat state
- App layout → Chat window: renders
- App layout → Room navigation: renders
- App layout → Create room UI: renders
- Chat window → Message input: renders
- Chat window → Chat state: calls actions
- Room navigation → Chat state: calls room actions
- Create room UI → Chat state: creates room
- Chat state → Socket client: emits and receives
- Socket client → Chat event handlers: Socket.IO events
- HTTP and socket server → HTTP health endpoint: creates app
- HTTP and socket server → Database connection: connects database
- HTTP and socket server → Chat event handlers: registers handlers
- Chat event handlers → Anonymous sessions: manages sessions
- Chat event handlers → Rate limiting: checks messages
- Chat event handlers → Message validation: validates payloads
- Chat event handlers → Room lifecycle: manages membership
- Chat event handlers → Message history: saves and loads
- Message history → Message records: reads and writes
- Room lifecycle → Room records: reads and writes
- Room lifecycle → Message records: deletes room messages
- Message records → MongoDB: persists records
- Room records → MongoDB: persists rooms
- Database connection → MongoDB: connects and reconnects