How vishnuvardhankakara21/mern-realtime-chat works
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: userModel.js User records · server.js Express and Socket.IO · Chatpage.jsx Chat page · messageControllers.js Message operations
Components 20
Chat interface
- React app
frontend/src/App.jsx - Chat page
frontend/src/Pages/Chatpage.jsx - Home page
frontend/src/Pages/Homepage.jsx - Chat context
frontend/src/Context/ChatProvider.jsx - Chat box
frontend/src/components/ChatBox.jsx - Chat list
frontend/src/components/MyChats.jsx - User forms
frontend/src/components/login.jsx
REST API
- Express and Socket.IO
backend/server.js - User routes
backend/routes/userRoutes.js - Chat routes
backend/routes/chatRoutes.js - Message routes
backend/routes/messageRoutes.js - User operations
backend/controllers/userControllers.js - Chat operations
backend/controllers/chatControllers.js - Message operations
backend/controllers/messageControllers.js - JWT protection
backend/middleware/authMiddleware.js
Persistent data
- User records
backend/models/userModel.js - Chat records
backend/models/chatModel.js - Message records
backend/models/messageModel.js
Other components
- Chat user
- MongoDB
Connections 29
- 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