How dhanunjaya23-02-2006/quickchat works
QuickChat is a real-time one-to-one chat product. Users authenticate, discover contacts, open message history, send text or image messages, and receive live delivery and presence updates; they can also edit profiles and track unread messages. The client coordinates authentication and chat state, while Express routes delegate to controllers backed by MongoDB, Cloudinary, and Socket.IO. The graph reflects the supplied excerpts, source-index references, and README; some UI and backend modules were not sampled, so their internal links are omitted where unsupported.
Main entry points: server.js Express and Socket.IO server · messageController.js Conversation and delivery logic · ChatContext.jsx Chat state and API client · App.jsx Routes and shell
Components 23
Web client
- Routes and shell
client/src/App.jsx - Login and signup
client/src/pages/LoginPage.jsx - Chat workspace
client/src/pages/HomePage.jsx - Profile editor
client/src/pages/ProfilePage.jsx - Contact sidebar
client/src/components/Sidebar.jsx - Conversation view
client/src/components/ChatContainer.jsx - Contact details
client/src/components/RightSidebar.jsx
Identity and profiles
- Auth state and socket client
client/context/AuthContext.jsx - Account routes
backend/routes/userRoutes.js - Account and profile logic
backend/controllers/UserController.js - JWT route guard
backend/middleware/auth.js
Messaging
- Chat state and API client
client/context/ChatContext.jsx - Message routes
backend/routes/messageRoutes.js - Conversation and delivery logic
backend/controllers/messageController.js
Realtime presence
- Express and Socket.IO server
backend/server.js - Socket transport
backend/lib/socket.js
Persistence and media
- User records
backend/models/user.js - Message records
backend/models/message.js - MongoDB connection
backend/lib/db.js - Image hosting
backend/lib/cloudinary.js
Other components
- Chat user
- MongoDB
- Cloudinary service
Connections 36
- Chat user → Routes and shell: uses
README.md - Routes and shell → Login and signup: routes to
client/src/App.jsx - Routes and shell → Chat workspace: routes to
client/src/App.jsx - Routes and shell → Profile editor: routes to
client/src/App.jsx - Chat workspace → Contact sidebar
- Chat workspace → Conversation view
- Chat workspace → Contact details
- Login and signup → Auth state and socket client: authenticates through
- Profile editor → Auth state and socket client: updates through
- Auth state and socket client → Account routes: calls auth API
client/context/AuthContext.jsx - Account routes → Account and profile logic: dispatches
backend/routes/userRoutes.js - Account routes → JWT route guard: protects routes
backend/routes/userRoutes.js - JWT route guard → User records: loads user
backend/middleware/auth.js - Account and profile logic → User records: reads and writes
backend/controllers/UserController.js - Account and profile logic → Image hosting: uploads profile image
backend/controllers/UserController.js - Image hosting → Cloudinary service: stores image
README.md - Conversation view → Chat state and API client: uses chat state
client/src/components/ChatContainer.jsx - Contact sidebar → Chat state and API client: uses chat state
client/src/components/Sidebar.jsx - Contact details → Chat state and API client: uses chat state
client/src/components/RightSidebar.jsx - Chat state and API client → Message routes: calls message API
client/context/ChatContext.jsx - Message routes → Conversation and delivery logic: dispatches
backend/routes/messageRoutes.js - Message routes → JWT route guard: protects routes
backend/routes/messageRoutes.js - Conversation and delivery logic → Message records: reads and writes
backend/controllers/messageController.js - Conversation and delivery logic → User records: reads contacts
backend/controllers/messageController.js - Conversation and delivery logic → Image hosting: uploads message image
backend/controllers/messageController.js - Express and Socket.IO server → Account routes: mounts routes
backend/server.js - Express and Socket.IO server → Message routes: mounts routes
backend/server.js - Express and Socket.IO server → Socket transport: initializes
backend/server.js - Express and Socket.IO server → MongoDB connection: connects database
backend/server.js - MongoDB connection → MongoDB: connects
README.md - User records → MongoDB: persists in
README.md - Message records → MongoDB: persists in
README.md - Auth state and socket client → Express and Socket.IO server: opens Socket.IO connection
client/context/AuthContext.jsx - Express and Socket.IO server → Socket transport: tracks presence
backend/server.js - Conversation and delivery logic → Socket transport: emits new message
backend/controllers/messageController.js - Chat state and API client → Socket transport: receives messages
client/context/ChatContext.jsx