How kaydo214/chatty works
Chatty is a full-stack one-to-one messaging app. Users sign up or log in, then select a contact, load the conversation, and send text or images; messages persist and are also delivered over Socket.IO, with online presence shown in the chat UI. The graph captures authentication, profile-photo uploads, chat REST/storage, real-time presence and delivery, and browser-persisted themes. Unexcerpted relationships are included only where the README or SOURCE INDEX supports them.
Main entry points: App.jsx App routes · routes REST routes · useAuthStore.js Auth state · useChatStore.js Chat state
Components 22
Client experience
- App routes
frontend/src/App.jsx - Login and signup
frontend/src/pages - Chat home
frontend/src/pages/HomePage.jsx - Contact sidebar
frontend/src/components/Sidebar.jsx - Conversation view
frontend/src/components/ChatContainer.jsx - Chat controls
frontend/src/components/MessageInput.jsx - Profile screen
frontend/src/pages/ProfilePage.jsx - Theme settings
frontend/src/pages/SettingsPage.jsx - Theme state
frontend/src/store/useThemeStore.js
Identity and profiles
- Auth state
frontend/src/store/useAuthStore.js - Auth handlers
backend/src/controller/auth.controller.js - Cookie auth
backend/src/middleware/auth.middleware.js - User records
backend/src/models/user.model.js
Messaging
- Chat state
frontend/src/store/useChatStore.js - Message handlers
backend/src/controller/message.controller.js - Message records
backend/src/models/message.model.js - Socket presence
backend/src/lib/socket.js
Backend runtime
- REST routes
backend/src/routes - Cloudinary media
backend/src/lib/cloudinary.js - Server bootstrap
backend/src/index.js
Other components
- Chat user
- MongoDB
Connections 36
- Chat user → App routes: uses
frontend/src/App.jsx - App routes → Login and signup: routes to
frontend/src/App.jsx - App routes → Chat home: routes to
frontend/src/App.jsx - App routes → Profile screen: routes to
frontend/src/App.jsx - App routes → Theme settings: routes to
frontend/src/App.jsx - App routes → Auth state: checks session
frontend/src/App.jsx - App routes → Theme state: reads theme
frontend/src/App.jsx - Login and signup → Auth state: submits credentials
frontend/src/pages/LoginPage.jsx - Chat home → Contact sidebar: renders
frontend/src/pages/HomePage.jsx - Chat home → Conversation view: renders
frontend/src/pages/HomePage.jsx - Chat home → Chat state: selects contact
frontend/src/pages/HomePage.jsx - Contact sidebar → Chat state: loads contacts
frontend/src/components/Sidebar.jsx - Conversation view → Chat state: loads conversation
frontend/src/components/ChatContainer.jsx - Conversation view → Chat controls: renders
frontend/src/components/ChatContainer.jsx - Chat controls → Chat state: sends message
frontend/src/components/MessageInput.jsx - Profile screen → Auth state: updates profile
frontend/src/pages/ProfilePage.jsx - Theme settings → Theme state: sets theme
frontend/src/pages/SettingsPage.jsx - Auth state → REST routes: calls auth API
frontend/src/store/useAuthStore.js - Chat state → REST routes: calls chat API
frontend/src/store/useChatStore.js - Auth state → Socket presence: opens socket
frontend/src/store/useAuthStore.js - Chat state → Socket presence: receives messages
frontend/src/store/useChatStore.js - Server bootstrap → REST routes: mounts routes
backend/src/index.js - Server bootstrap → Socket presence: starts server
backend/src/index.js - Server bootstrap → MongoDB: connects
backend/src/index.js - REST routes → Auth handlers: dispatches auth
backend/src/routes/auth.route.js - REST routes → Message handlers: dispatches messages
backend/src/routes/message.route.js - REST routes → Cookie auth: protects routes
backend/src/routes/auth.route.js - Cookie auth → User records: loads user
backend/src/middleware/auth.middleware.js - Auth handlers → User records: reads and writes
backend/src/controller/auth.controller.js - Auth handlers → Cloudinary media: uploads profile
backend/src/controller/auth.controller.js - Message handlers → User records: lists contacts
backend/src/controller/message.controller.js - Message handlers → Message records: reads and writes
backend/src/controller/message.controller.js - Message handlers → Cloudinary media: uploads image
backend/src/controller/message.controller.js - Message handlers → Socket presence: emits message
backend/src/controller/message.controller.js - Socket presence → Auth state: publishes presence
- Chat user → Socket presence: connects live