How sameemirfan21/chatify works
Chatify is a real-time chat application. Users sign up or sign in, then browse contacts and prior chat partners, load a conversation, and send text or image messages; the backend persists messages and can deliver them over Socket.IO. The frontend also supports profile updates, Google OAuth, and welcome email flows. The graph follows the sampled routes, stores, controllers, and server setup; some UI components and integrations are represented at directory or service level where their implementation was not sampled.
Main entry points: auth.controller.js Auth operations · message.controller.js Message operations · App.jsx App routing · userAuthStore.js Auth state
Components 24
Web client
- App routing
frontend/src/App.jsx - Login and signup
frontend/src/pages/LoginPage.jsx - Chat workspace
frontend/src/pages/ChatPage.jsx - Conversation UI
frontend/src/components/ChatContainer.jsx - Message composer
frontend/src/components/MessageInput.jsx - Chat state
frontend/src/store/useChatStore.js - Auth state
frontend/src/store/userAuthStore.js - API client
frontend/src/lib/axios.js - Supabase client
frontend/src/lib/supabase.js
Identity and profiles
- HTTP and socket server
backend/src/server.js - Auth routes
backend/src/routes/auth.route.js - Auth operations
backend/src/controllers/auth.controller.js - Token verification
backend/src/middleware/auth.middleware.js - User profiles
backend/src/models/User.js
Chat and realtime
- Message routes
backend/src/routes/message.route.js - Message operations
backend/src/controllers/message.controller.js - Message records
backend/src/models/Message.js - Socket delivery
backend/src/lib/socket.js - Socket authentication
backend/src/middleware/socket.auth.middleware.js
External services
- Supabase Auth
- MongoDB
- Cloudinary
- Resend email
Other components
- Chat user
Connections 34
- Chat user → App routing: uses
- App routing → Auth state: checks session
frontend/src/App.jsx - App routing → Chat workspace: routes to
frontend/src/App.jsx - App routing → Login and signup: routes to
frontend/src/App.jsx - Login and signup → Auth state: submits credentials
frontend/src/pages/LoginPage.jsx - Chat workspace → Chat state: loads chat state
frontend/src/pages/ChatPage.jsx - Chat workspace → Conversation UI: renders
frontend/src/pages/ChatPage.jsx - Conversation UI → Chat state: loads messages
frontend/src/components/ChatContainer.jsx - Message composer → Chat state: sends messages
frontend/src/components/MessageInput.jsx - Auth state → Supabase client: authenticates
frontend/src/store/userAuthStore.js - Auth state → API client: requests profiles
frontend/src/store/userAuthStore.js - Chat state → API client: requests chat data
frontend/src/store/useChatStore.js - API client → Supabase client: gets access token
frontend/src/lib/axios.js - HTTP and socket server → Auth routes: mounts routes
backend/src/server.js - HTTP and socket server → Message routes: mounts routes
backend/src/server.js - Auth routes → Auth operations: dispatches requests
backend/src/routes/auth.route.js - Auth routes → Token verification: protects routes
backend/src/routes/auth.route.js - Message routes → Message operations: dispatches requests
backend/src/routes/message.route.js - Message routes → Token verification: protects routes
backend/src/routes/message.route.js - Token verification → Supabase Auth: verifies tokens
backend/src/middleware/auth.middleware.js - Token verification → User profiles: finds or creates
backend/src/middleware/auth.middleware.js - Auth operations → User profiles: creates profiles
backend/src/controllers/auth.controller.js - Auth operations → Supabase Auth: creates auth user
backend/src/controllers/auth.controller.js - Auth operations → Cloudinary: uploads profile image
backend/src/controllers/auth.controller.js - Auth operations → Resend email: sends welcome email
backend/src/controllers/auth.controller.js - Message operations → User profiles: queries contacts
backend/src/controllers/message.controller.js - Message operations → Message records: reads and writes
backend/src/controllers/message.controller.js - Message operations → Cloudinary: uploads message image
backend/src/controllers/message.controller.js - Message operations → Socket delivery: emits new message
backend/src/controllers/message.controller.js - Socket delivery → Socket authentication: authenticates sockets
backend/src/lib/socket.js - Socket authentication → Supabase Auth: verifies token
backend/src/middleware/socket.auth.middleware.js - Socket authentication → User profiles: resolves user
backend/src/middleware/socket.auth.middleware.js - Auth operations → MongoDB: persists profile
backend/src/controllers/auth.controller.js - Message operations → MongoDB: persists messages
backend/src/controllers/message.controller.js