How thanphuuuuu/whatsapp-clone works
This repository’s documented product is a real-time WhatsApp-style web application; the mobile tree contains platform wrappers but no sampled application runtime. A user signs in or restores a session, then uses protected chat, friend, profile, upload, and calling features. REST controllers delegate domain work to services, while Socket.IO handles messaging, presence, and call signaling. The graph includes documented capabilities whose source was not sampled, using supported feature or backend directory paths; their internal wiring is not inferred.
Main entry points: app.js Express app · sockets Socket event handlers · useWebRTC.ts WebRTC peer connection · AppRouter.tsx App routing
Components 30
Web experience
- App routing
frontend/src/routes/AppRouter.tsx - Sign-in and signup
frontend/src/pages - Chat interface
frontend/src/features/chat - Friends and profile
frontend/src/features/friends - Call interface
frontend/src/features/call - HTTP client
frontend/src/lib/axios.ts - Socket client
frontend/src/lib/socket.ts - Auth state
frontend/src/store/authStore.ts - Chat state
frontend/src/store/chatStore.ts - Call state
frontend/src/features/call/callStore.ts
REST application
- HTTP and socket server
backend/server.js - Express app
backend/src/app.js - Authentication API
backend/src/routes/auth.routes.js - Auth controller and service
backend/src/controllers/auth.controller.js - User and friend APIs
backend/src/routes - Conversation API
backend/src/routes/conversation.routes.js - Conversation controller
backend/src/controllers/conversation.controller.js - Media upload API
backend/src/controllers/upload.controller.js
Realtime features
- Socket event handlers
backend/src/sockets - Presence events
backend/src/sockets/presence.socket.js - Message events
backend/src/sockets/message.socket.js - Call signaling
backend/src/sockets/call.socket.js - WebRTC peer connection
frontend/src/features/call/hooks/useWebRTC.ts
Domain state
- Conversation and message services
backend/src/services - User and message models
backend/src/models - Local uploads
backend/src/controllers/upload.controller.js
Other components
- Web user
- MongoDB
- Cloudinary
- Remote call participant
Connections 36
- Web user → App routing: uses
- App routing → Sign-in and signup: routes
- App routing → Chat interface: routes
- App routing → Auth state: restores session
- Sign-in and signup → HTTP client: submits credentials
- Chat interface → HTTP client: requests chat data
- Friends and profile → HTTP client: requests friend data
- Call interface → WebRTC peer connection: controls calls
- HTTP client → Express app: sends REST requests
- Socket client → Socket event handlers: exchanges events
- HTTP and socket server → Express app: serves
- HTTP and socket server → Socket event handlers: initializes
- Express app → Authentication API: mounts
- Express app → User and friend APIs: mounts
- Express app → Conversation API: mounts
- Authentication API → Auth controller and service: dispatches
- Conversation API → Conversation controller: dispatches
- Conversation controller → Conversation and message services: calls
- Auth controller and service → User and message models: reads and writes
- Conversation and message services → User and message models: reads and writes
- User and message models → MongoDB: persists
- Express app → Media upload API: mounts upload routes
- Media upload API → Cloudinary: uploads optionally
- Media upload API → Local uploads: writes fallback files
- Express app → Socket event handlers: mounts socket handlers
- Socket event handlers → Presence events: registers
- Socket event handlers → Message events: registers
- Socket event handlers → Call signaling: registers
- Conversation controller → Socket event handlers: emits updates
- Chat interface → Socket client: subscribes to events
- Call interface → Socket client: uses signaling
- WebRTC peer connection → Socket client: sends signaling
- WebRTC peer connection → Remote call participant: connects media
- Remote call participant → WebRTC peer connection: returns media
- Chat interface → Chat state: updates state
- WebRTC peer connection → Call state: updates call state