How ibrahimkataya/i-chatt-app works
This is a browser-based real-time chat application with account authentication, user profiles, direct messaging, image sharing, online presence, and theme selection. The main workflow is: a user signs in, the frontend loads other users and conversation history, then sends messages through the API; the backend persists messages and dispatches them to connected recipients over Socket.IO. Authentication and messaging controllers own their respective storage and dispatch operations. Several UI and infrastructure files were not sampled, so uncertain internal wiring is omitted.
Main entry points: useAuthStore.js Auth state · App.jsx App routing · index.js HTTP API · message.controller.js Message controller
Components 25
Frontend
- App routing
frontend/src/App.jsx - Auth pages
frontend/src/pages - Chat interface
frontend/src/pages/HomePage.jsx - Chat components
frontend/src/components - Theme state
frontend/src/store/useThemeStore.js - Profile page
frontend/src/pages/ProfilePage.jsx - Settings page
frontend/src/pages/SettingsPage.jsx
Authentication
- Auth state
frontend/src/store/useAuthStore.js - Auth routes
backend/src/routes/auth.route.js - Route protection
backend/src/middleware/auth.middleware.js - Auth controller
backend/src/controllers/auth.controller.js - Token utilities
backend/src/lib/utils.js
Messaging
- Chat state
frontend/src/store/useChatStore.js - Message routes
backend/src/routes/message.route.js - Message controller
backend/src/controllers/message.controller.js - Socket.IO server
backend/src/lib/socket.js
Persistence and realtime
- HTTP API
backend/src/index.js - User model
backend/src/models/user.model.js - Message model
backend/src/models/message.model.js - Database connection
backend/src/lib/db.js - MongoDB
- Supabase client
backend/src/lib/supabase.js - Supabase storage
Other components
- User
- Browser
Connections 37
- User → App routing: uses
- App routing → Auth state: checks session
- App routing → Auth pages: routes to
- App routing → Chat interface: routes to
- App routing → Profile page: routes to
- App routing → Settings page: routes to
- Chat interface → Chat state: loads chat state
- Chat interface → Chat components: renders
- Auth pages → Auth state: authenticates
- Auth state → HTTP API: calls auth API
- Chat state → HTTP API: calls message API
- Chat state → Auth state: uses socket
- Settings page → Theme state: selects theme
- Profile page → Auth state: updates profile
- HTTP API → Auth routes: dispatches
- HTTP API → Message routes: dispatches
- Auth routes → Auth controller: dispatches
- Auth routes → Route protection: protects routes
- Route protection → User model: loads user
- Auth controller → User model: reads and writes
- Auth controller → Token utilities: creates token
- Auth controller → Supabase client: manages profile images
- Message routes → Route protection: protects routes
- Message routes → Message controller: dispatches
- Message controller → User model: lists users
- Message controller → Message model: reads and writes
- Message controller → Supabase client: uploads images
- Message controller → Socket.IO server: emits message
- Auth state → Socket.IO server: connects client
- HTTP API → Database connection: connects on start
- Database connection → MongoDB: connects
- User model → MongoDB: persists users
- Message model → MongoDB: persists messages
- Supabase client → Supabase storage: uploads and removes
- Browser → HTTP API: HTTP requests
- Socket.IO server → Auth state: online users
- Socket.IO server → Chat state: new messages