How amritesh-mishra-15/chatify works
Purpose and entry points
This is a two-process real-time chat system: a React/Vite client and Node/Express API with Socket.IO. The backend starts from backend/src/server.js; the browser mounts through frontend/src/main.jsx and routes application state/UI through frontend/src/App.jsx.
Backend HTTP boundary
Express exposes authentication and messaging REST APIs through backend/src/routes/auth.route.js and backend/src/routes/message.route.js. Their controllers, backend/src/controllers/auth.controller.js and backend/src/controllers/message.controller.js, own request handling, validation/orchestration, and persistence-facing behavior.
Identity and request protection
Custom JWT authentication is enforced as middleware before protected API behavior in backend/src/middleware/auth.middleware.js. Arcjet protection/rate limiting forms a separate perimeter in backend/src/middleware/arcjet.middleware.js, backed by backend/src/lib/arcjet.js. Environment-derived secrets and service configuration are centralized in backend/src/lib/env.js.
Persistence and domain model
MongoDB connectivity is established in backend/src/lib/db.js. The persistent chat domain is modeled by users and messages in backend/src/models/User.js and backend/src/models/Message.js; controllers use these records to establish accounts, conversations, and message history.
Realtime transport and presence
Socket.IO is initialized and managed in backend/src/lib/socket.js. Socket-specific authentication is separated from HTTP auth in backend/src/middleware/socket.auth.middleware.js, creating an authenticated realtime boundary for message delivery, online/offline presence, and typing signals. The frontend chat state connects to this transport through frontend/src/store/useChatStore.js.
External-service integrations
User image/media upload support is delegated to Cloudinary via backend/src/lib/cloudinary.js. Signup-related welcome email delivery is delegated to Resend through backend/src/lib/resend.js, with dispatch and content separated in backend/src/emails/emailHandlers.js and backend/src/emails/emailTemplates.js. These integrations remain backend-only, shielding credentials from the browser.
Frontend state and chat experience
Zustand separates session identity from chat/conversation state in frontend/src/store/useAuthStore.js and frontend/src/store/useChatStore.js. REST calls are centralized behind frontend/src/lib/axios.js. The principal authenticated experience is frontend/src/pages/ChatPage.jsx, composed around conversation selection, history, and composition components such as frontend/src/components/ChatsList.jsx, frontend/src/components/ChatContainer.jsx, and frontend/src/components/MessageInput.jsx.
Primary flow
A user signs up or logs in from frontend/src/pages/SignUpPage.jsx or frontend/src/pages/LoginPage.jsx; the API creates/authenticates the user and returns JWT-backed session state. The client uses authenticated REST calls to load users/history and establish conversations, then opens an authenticated Socket.IO channel for live events. Sent messages cross the realtime/API boundary, are persisted to MongoDB, emitted to recipients, and rendered from the chat store; media and welcome-email side effects route to Cloudinary and Resend respectively.
Main entry points: env.js Service environment · auth.controller.js Auth and message controllers · socket.js Socket.IO gateway · App.jsx App routes
Components 20
React client
- Client entry
frontend/src/main.jsx - App routes
frontend/src/App.jsx - Login and signup
frontend/src/pages/LoginPage.jsx - Chat experience · Composes conversation selection, history, and message composition.
frontend/src/pages/ChatPage.jsx - Session state
frontend/src/store/useAuthStore.js - Chat state and socket · Owns conversations, live events, presence, and typing state.
frontend/src/store/useChatStore.js - REST client
frontend/src/lib/axios.js
API and security
- Backend server
backend/src/server.js - Auth and message APIs
backend/src/routes/auth.route.js - Auth and message controllers
backend/src/controllers/auth.controller.js - JWT API auth
backend/src/middleware/auth.middleware.js - Arcjet perimeter
backend/src/middleware/arcjet.middleware.js - Service environment · Supplies secrets and backend service configuration.
backend/src/lib/env.js
Realtime service
- Socket.IO gateway · Delivers messages, presence, and typing signals.
backend/src/lib/socket.js - Socket authentication
backend/src/middleware/socket.auth.middleware.js
Persistence
- MongoDB
backend/src/lib/db.js - Users and messages
backend/src/models/User.js
External services
- Cloudinary media
backend/src/lib/cloudinary.js - Welcome email dispatch · Builds and sends signup-related email using templates.
backend/src/emails/emailHandlers.js - Resend
backend/src/lib/resend.js
Connections 28
- Client entry → App routes: mounts
- App routes → Login and signup: routes to
- App routes → Chat experience: routes to
- Login and signup → Session state: establishes session
- Chat experience → Chat state and socket: renders from
- Session state → REST client: uses
- Chat state and socket → REST client: loads users and history
- REST client → Backend server: authenticated REST
- Backend server → Arcjet perimeter: protects requests
- Arcjet perimeter → Auth and message APIs: permits API traffic
- Auth and message APIs → JWT API auth: protects private endpoints
- JWT API auth → Auth and message controllers: authorizes
- Auth and message APIs → Auth and message controllers: dispatches requests
- Auth and message controllers → Users and messages: reads and writes
- Users and messages → MongoDB: persists in
- Chat state and socket → Socket.IO gateway: opens authenticated channel
- Socket.IO gateway → Socket authentication: authenticates connections
- Socket authentication → Users and messages: identifies users for events
- Auth and message controllers → Socket.IO gateway: emits message events
- Auth and message controllers → Cloudinary media: uploads media
- Auth and message controllers → Welcome email dispatch: triggers on signup
- Welcome email dispatch → Resend: sends through
- Service environment → Backend server: configures
- Service environment → Arcjet perimeter: configures
- Service environment → Socket.IO gateway: configures
- Service environment → MongoDB: configures
- Service environment → Cloudinary media: configures
- Service environment → Resend: configures