# shubhang-kuber/wisper architecture

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

- Interactive diagram: https://gitdiagram.com/shubhang-kuber/wisper
- Repository: https://github.com/shubhang-kuber/wisper

## Overview

Wisper is a full-stack, real-time 1:1 text-messaging app. A user signs up or logs in to obtain a JWT, opens a conversation through REST, then sends messages over Socket.io; the backend persists messages before broadcasting them. Conversation history supports reconnects, opening a conversation updates read state, and disconnects update last-seen time. The graph follows the documented workflow and sampled entry points; detailed wiring inside unsampled conversation, user, and chat components is not inferred.

Main entry points: [`backend/src/index.js`](https://github.com/shubhang-kuber/wisper/blob/main/backend/src/index.js) (HTTP server), [`backend/src/sockets/index.js`](https://github.com/shubhang-kuber/wisper/blob/main/backend/src/sockets/index.js) (Socket handlers), [`backend/src/routes/conversations.js`](https://github.com/shubhang-kuber/wisper/blob/main/backend/src/routes/conversations.js) (Conversation routes), [`database/schema.sql`](https://github.com/shubhang-kuber/wisper/blob/main/database/schema.sql) (MySQL data)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Web client"]
  node_app["App routes<br/>[App.jsx]"]
  node_authui["Auth forms<br/>[AuthPage.jsx]"]
  node_authstate["Auth session<br/>[AuthContext.jsx]"]
  node_restclient["REST client<br/>[client.js]"]
  node_authapi["Auth API<br/>[auth.js]"]
  node_dashboard["Chat dashboard<br/>[Dashboard.jsx]"]
  node_chatui["Chat interface<br/>[ChatLayout.jsx]"]
  node_conversationapi["Conversation API<br/>[conversations.js]"]
  node_usersapi["Users API<br/>[users.js]"]
  node_socketstate["Socket session<br/>[SocketContext.jsx]"]
end

subgraph group_api["REST backend"]
  node_server["HTTP server<br/>[index.js]"]
  node_authroutes["Auth routes<br/>[auth.js]"]
  node_authmw["JWT middleware<br/>[auth.js]"]
  node_conversationroutes["Conversation routes<br/>[conversations.js]"]
  node_userroutes["User routes<br/>[users.js]"]
end

subgraph group_realtime["Realtime messaging"]
  node_socketserver["Socket handlers<br/>[index.js]"]
end

subgraph group_data["Persistent data"]
  node_mysql[("MySQL data<br/>[schema.sql]")]
end

node_person(("User"))

node_person -->|"uses"| node_app
node_app -->|"routes to"| node_authui
node_app -->|"protects"| node_dashboard
node_authui -->|"authenticates via"| node_authstate
node_authstate -->|"requests"| node_authapi
node_authapi -->|"calls"| node_restclient
node_dashboard -->|"presents"| node_chatui
node_chatui -->|"loads chats"| node_conversationapi
node_chatui -->|"loads users"| node_usersapi
node_restclient -->|"sends REST"| node_server
node_server -->|"mounts"| node_authroutes
node_server -->|"mounts"| node_conversationroutes
node_server -->|"mounts"| node_userroutes
node_authroutes -->|"reads/writes"| node_mysql
node_conversationroutes -->|"authenticates with"| node_authmw
node_userroutes -->|"authenticates with"| node_authmw
node_conversationroutes -->|"reads/writes"| node_mysql
node_userroutes -->|"reads/writes"| node_mysql
node_server -->|"attaches"| node_socketserver
node_authstate -->|"provides token"| node_socketstate
node_socketstate -->|"connects to"| node_socketserver
node_socketserver -->|"persists messages"| node_mysql
node_socketserver -->|"broadcasts messages"| node_socketstate
node_conversationroutes -->|"emits read updates"| node_socketserver

click node_app "https://github.com/shubhang-kuber/wisper/blob/main/frontend/src/App.jsx"
click node_authui "https://github.com/shubhang-kuber/wisper/blob/main/frontend/src/components/auth/AuthPage.jsx"
click node_authstate "https://github.com/shubhang-kuber/wisper/blob/main/frontend/src/context/AuthContext.jsx"
click node_restclient "https://github.com/shubhang-kuber/wisper/blob/main/frontend/src/api/client.js"
click node_authapi "https://github.com/shubhang-kuber/wisper/blob/main/frontend/src/api/auth.js"
click node_dashboard "https://github.com/shubhang-kuber/wisper/blob/main/frontend/src/components/Dashboard.jsx"
click node_chatui "https://github.com/shubhang-kuber/wisper/blob/main/frontend/src/components/chat/ChatLayout.jsx"
click node_conversationapi "https://github.com/shubhang-kuber/wisper/blob/main/frontend/src/api/conversations.js"
click node_usersapi "https://github.com/shubhang-kuber/wisper/blob/main/frontend/src/api/users.js"
click node_socketstate "https://github.com/shubhang-kuber/wisper/blob/main/frontend/src/context/SocketContext.jsx"
click node_server "https://github.com/shubhang-kuber/wisper/blob/main/backend/src/index.js"
click node_authroutes "https://github.com/shubhang-kuber/wisper/blob/main/backend/src/routes/auth.js"
click node_authmw "https://github.com/shubhang-kuber/wisper/blob/main/backend/src/middleware/auth.js"
click node_conversationroutes "https://github.com/shubhang-kuber/wisper/blob/main/backend/src/routes/conversations.js"
click node_userroutes "https://github.com/shubhang-kuber/wisper/blob/main/backend/src/routes/users.js"
click node_socketserver "https://github.com/shubhang-kuber/wisper/blob/main/backend/src/sockets/index.js"
click node_mysql "https://github.com/shubhang-kuber/wisper/blob/main/database/schema.sql"

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_authstate,node_restclient,node_authapi,node_dashboard,node_chatui,node_conversationapi,node_usersapi,node_socketstate,node_person toneBlue
class node_server,node_authroutes,node_authmw,node_conversationroutes,node_userroutes toneAmber
class node_socketserver toneMint
class node_mysql toneRose
```

## Components

### Web client

- [App routes](https://github.com/shubhang-kuber/wisper/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Auth forms](https://github.com/shubhang-kuber/wisper/blob/main/frontend/src/components/auth/AuthPage.jsx): `frontend/src/components/auth/AuthPage.jsx`
- [Auth session](https://github.com/shubhang-kuber/wisper/blob/main/frontend/src/context/AuthContext.jsx): `frontend/src/context/AuthContext.jsx`
- [REST client](https://github.com/shubhang-kuber/wisper/blob/main/frontend/src/api/client.js): `frontend/src/api/client.js`
- [Auth API](https://github.com/shubhang-kuber/wisper/blob/main/frontend/src/api/auth.js): `frontend/src/api/auth.js`
- [Chat dashboard](https://github.com/shubhang-kuber/wisper/blob/main/frontend/src/components/Dashboard.jsx): `frontend/src/components/Dashboard.jsx`
- [Chat interface](https://github.com/shubhang-kuber/wisper/blob/main/frontend/src/components/chat/ChatLayout.jsx): `frontend/src/components/chat/ChatLayout.jsx`
- [Conversation API](https://github.com/shubhang-kuber/wisper/blob/main/frontend/src/api/conversations.js): `frontend/src/api/conversations.js`
- [Users API](https://github.com/shubhang-kuber/wisper/blob/main/frontend/src/api/users.js): `frontend/src/api/users.js`
- [Socket session](https://github.com/shubhang-kuber/wisper/blob/main/frontend/src/context/SocketContext.jsx): `frontend/src/context/SocketContext.jsx`

### REST backend

- [HTTP server](https://github.com/shubhang-kuber/wisper/blob/main/backend/src/index.js): `backend/src/index.js`
- [Auth routes](https://github.com/shubhang-kuber/wisper/blob/main/backend/src/routes/auth.js): `backend/src/routes/auth.js`
- [JWT middleware](https://github.com/shubhang-kuber/wisper/blob/main/backend/src/middleware/auth.js): `backend/src/middleware/auth.js`
- [Conversation routes](https://github.com/shubhang-kuber/wisper/blob/main/backend/src/routes/conversations.js): `backend/src/routes/conversations.js`
- [User routes](https://github.com/shubhang-kuber/wisper/blob/main/backend/src/routes/users.js): `backend/src/routes/users.js`

### Realtime messaging

- [Socket handlers](https://github.com/shubhang-kuber/wisper/blob/main/backend/src/sockets/index.js): `backend/src/sockets/index.js`

### Persistent data

- [MySQL data](https://github.com/shubhang-kuber/wisper/blob/main/database/schema.sql): `database/schema.sql`

### Other components

- **User**

## Connections

- User → App routes: uses
- App routes → Auth forms: routes to
- App routes → Chat dashboard: protects
- Auth forms → Auth session: authenticates via
- Auth session → Auth API: requests
- Auth API → REST client: calls
- Chat dashboard → Chat interface: presents
- Chat interface → Conversation API: loads chats
- Chat interface → Users API: loads users
- REST client → HTTP server: sends REST
- HTTP server → Auth routes: mounts
- HTTP server → Conversation routes: mounts
- HTTP server → User routes: mounts
- Auth routes → MySQL data: reads/writes
- Conversation routes → JWT middleware: authenticates with
- User routes → JWT middleware: authenticates with
- Conversation routes → MySQL data: reads/writes
- User routes → MySQL data: reads/writes
- HTTP server → Socket handlers: attaches
- Auth session → Socket session: provides token
- Socket session → Socket handlers: connects to
- Socket handlers → MySQL data: persists messages
- Socket handlers → Socket session: broadcasts messages
- Conversation routes → Socket handlers: emits read updates