How saqibshah-dev/fullstack-chatapplication works
Chatty is a MERN real-time messaging app. Users sign up or log in, choose another user, exchange text or image messages, and see online status; profile pictures and message images use Cloudinary. The graph separates the React experience and state, API/auth handling, and persistence/realtime infrastructure. The README documents the major capabilities; sampled code and the source index support the shown internal calls. Frontend-to-backend HTTP wiring is represented as unverified because the excerpts do not show a complete request-to-route connection.
Main entry points: App.jsx App routing · useChatStore.js Chat state · useAuthStore.js Auth state · message.controller.js Message handlers
Components 23
Chat experience
- App routing
frontend/src/App.jsx - Chat home
frontend/src/pages/HomePage.jsx - User sidebar
frontend/src/components/Sidebar.jsx - Conversation view
frontend/src/components/ChatContainer.jsx - Chat header
frontend/src/components/ChatHeader.jsx - Message composer
frontend/src/components/MessageInput.jsx - Chat state
frontend/src/store/useChatStore.js - Theme settings
frontend/src/store/useThemeStore.jsx
Backend API
- Auth routes
Backend/src/routes/auth.routes.js - Auth handlers
Backend/src/controllers/auth.controller.js - Message routes
Backend/src/routes/message.route.js - Message handlers
Backend/src/controllers/message.controller.js - JWT guard
Backend/src/middleware/auth.middleware.js
Realtime and storage
- User records
Backend/src/models/user.model.js - Message records
Backend/src/models/message.model.js - MongoDB
Backend/src/lib/db.js - Cloudinary media
Backend/src/lib/cloundinary.js - Socket presence
Backend/src/lib/socket.js
Identity and profile
- Sign-in and signup
frontend/src/pages/SignUpPage.jsx - Login page
frontend/src/pages/LoginPage.jsx - Profile page
frontend/src/pages/ProfilePage.jsx - Auth state
frontend/src/store/useAuthStore.js
Other components
- Chat user
Connections 34
- Chat user → App routing: uses
frontend/src/App.jsx - App routing → Chat home: routes to
frontend/src/App.jsx - App routing → Sign-in and signup: routes to
frontend/src/App.jsx - App routing → Login page: routes to
frontend/src/App.jsx - App routing → Profile page: routes to
frontend/src/App.jsx - Chat home → User sidebar: renders
frontend/src/pages/HomePage.jsx - Chat home → Conversation view: renders
frontend/src/pages/HomePage.jsx - Chat home → Chat state: reads state
frontend/src/pages/HomePage.jsx - User sidebar → Chat state: selects users
frontend/src/components/Sidebar.jsx - Conversation view → Chat state: loads messages
frontend/src/components/ChatContainer.jsx - Conversation view → Chat header: renders
frontend/src/components/ChatContainer.jsx - Conversation view → Message composer: renders
frontend/src/components/ChatContainer.jsx - Message composer → Chat state: sends messages
frontend/src/components/MessageInput.jsx - Chat state → Auth state: reads socket
frontend/src/store/useChatStore.js - Sign-in and signup → Auth state: submits signup
frontend/src/pages/SignUpPage.jsx - Login page → Auth state: submits login
frontend/src/pages/LoginPage.jsx - Profile page → Auth state: updates profile
frontend/src/pages/ProfilePage.jsx - App routing → Theme settings: reads theme
frontend/src/App.jsx - Auth state → Auth routes: calls auth API
- Chat state → Message routes: calls message API
- Auth routes → Auth handlers: dispatches
Backend/src/routes/auth.routes.js - Auth routes → JWT guard: guards routes
Backend/src/routes/auth.routes.js - Message routes → Message handlers: dispatches
Backend/src/routes/message.route.js - Message routes → JWT guard: guards routes
Backend/src/routes/message.route.js - Auth handlers → User records: reads and writes
Backend/src/controllers/auth.controller.js - Auth handlers → Cloudinary media: uploads profile image
Backend/src/controllers/auth.controller.js - JWT guard → User records: loads user
Backend/src/middleware/auth.middleware.js - Message handlers → User records: lists users
Backend/src/controllers/message.controller.js - Message handlers → Message records: reads and saves
Backend/src/controllers/message.controller.js - Message handlers → Cloudinary media: uploads image
Backend/src/controllers/message.controller.js - Message handlers → Socket presence: dispatches message
Backend/src/controllers/message.controller.js - Auth state → Socket presence: connects presence
- MongoDB → User records: persists
- MongoDB → Message records: persists