How laiquanghai2k6/facebook works
Facebook Clone is a social networking application whose main workflow is user sign-in, browsing and interacting with posts, and receiving updates through notifications or real-time chat. The React client routes users to authentication, home, profile, and video experiences; Axios-backed requests reach Express routes and domain controllers, while Socket.IO handles live events separately. The README also lists Google login and post editing/deletion; the tree supports the relevant authentication and post modules, but their detailed wiring was not sampled. Backend relationships are shown at the router/controller level where source evidence is limited.
Main entry points: index.js Express server · App.tsx App and routes · service.tsx HTTP services · userControl.js User controller
Components 27
React client
- App and routes
client/src/App.tsx - Authentication
client/src/pages/Auth/Login.tsx - Home feed
client/src/pages/Home/Home.tsx - Profiles
client/src/pages/Home/Profile.tsx - Video experience
client/src/pages/Video/Video.tsx - Chat interface
client/src/component/Messenger.tsx - Notifications UI
client/src/component/Notification.tsx - Client state
client/src/store/store.ts - HTTP services
client/src/service/service.tsx
HTTP API
- Express server
server/index.js - User routes
server/Routers/userRoute.js - Post routes
server/Routers/postRoute.js - Comment routes
server/Routers/commentRoute.js - Chat routes
server/Routers/chatRoute.js - Message routes
server/Routers/messageRoute.js - Notification routes
server/Routers/notificationRoute.js - User controller
server/Controllers/userControl.js - Post controller
server/Controllers/postControl.js - Comment controller
server/Controllers/commentControl.js - Chat controller
server/Controllers/chatControl.js - Message controller
server/Controllers/messageControl.js - Notification controller
server/Controllers/notificationControl.js
Realtime
- Socket client
client/src/socket.ts - Socket server
socket/index.js
Persistence and media
- MongoDB
- Cloudinary media
Other components
- User
Connections 34
- User → App and routes: uses
- App and routes → Authentication: routes to
- App and routes → Home feed: routes to
- App and routes → Profiles: routes to
- App and routes → Video experience: routes to
- App and routes → Client state: dispatches events
- Home feed → HTTP services: requests data
- Profiles → HTTP services: requests data
- Authentication → HTTP services: requests auth
- Chat interface → HTTP services: requests chat
- Notifications UI → HTTP services: requests notifications
- HTTP services → Express server: HTTP requests
- Express server → User routes: mounts
- Express server → Post routes: mounts
- Express server → Comment routes: mounts
- Express server → Chat routes: mounts
- Express server → Message routes: mounts
- Express server → Notification routes: mounts
- User routes → User controller: dispatches
- Post routes → Post controller: dispatches
- Comment routes → Comment controller: dispatches
- Chat routes → Chat controller: dispatches
- Message routes → Message controller: dispatches
- Notification routes → Notification controller: dispatches
- App and routes → Socket client: connects
- Socket client → Socket server: socket events
- Socket server → Express server: updates offline status
- User controller → MongoDB: reads and writes
- Post controller → MongoDB: reads and writes
- Comment controller → MongoDB: reads and writes
- Chat controller → MongoDB: reads and writes
- Message controller → MongoDB: reads and writes
- Notification controller → MongoDB: reads and writes
- User controller → Cloudinary media: uploads images