How shubhang-kuber/wisper works
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: src/index.js HTTP server · sockets/index.js Socket handlers · conversations.js Conversation routes · schema.sql MySQL data
Components 18
Web client
- App routes
frontend/src/App.jsx - Auth forms
frontend/src/components/auth/AuthPage.jsx - Auth session
frontend/src/context/AuthContext.jsx - REST client
frontend/src/api/client.js - Auth API
frontend/src/api/auth.js - Chat dashboard
frontend/src/components/Dashboard.jsx - Chat interface
frontend/src/components/chat/ChatLayout.jsx - Conversation API
frontend/src/api/conversations.js - Users API
frontend/src/api/users.js - Socket session
frontend/src/context/SocketContext.jsx
REST backend
- HTTP server
backend/src/index.js - Auth routes
backend/src/routes/auth.js - JWT middleware
backend/src/middleware/auth.js - Conversation routes
backend/src/routes/conversations.js - User routes
backend/src/routes/users.js
Realtime messaging
- Socket handlers
backend/src/sockets/index.js
Persistent data
- MySQL data
database/schema.sql
Other components
- User
Connections 24
- 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