# laiquanghai2k6/facebook architecture

> Architecture diagram of the GitHub repository laiquanghai2k6/facebook, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/laiquanghai2k6/facebook
- Repository: https://github.com/laiquanghai2k6/facebook

## Overview

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: [`server/index.js`](https://github.com/laiquanghai2k6/facebook/blob/main/server/index.js) (Express server), [`client/src/App.tsx`](https://github.com/laiquanghai2k6/facebook/blob/main/client/src/App.tsx) (App and routes), [`client/src/service/service.tsx`](https://github.com/laiquanghai2k6/facebook/blob/main/client/src/service/service.tsx) (HTTP services), [`server/Controllers/userControl.js`](https://github.com/laiquanghai2k6/facebook/blob/main/server/Controllers/userControl.js) (User controller)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["React client"]
  node_app["App and routes<br/>[App.tsx]"]
  node_auth["Authentication<br/>[Login.tsx]"]
  node_home["Home feed<br/>[Home.tsx]"]
  node_profile["Profiles<br/>[Profile.tsx]"]
  node_video["Video experience<br/>[Video.tsx]"]
  node_chatui["Chat interface<br/>[Messenger.tsx]"]
  node_notiui["Notifications UI<br/>[Notification.tsx]"]
  node_state["Client state<br/>[store.ts]"]
  node_services["HTTP services<br/>[service.tsx]"]
end

subgraph group_api["HTTP API"]
  node_server["Express server<br/>[index.js]"]
  node_userroute["User routes<br/>[userRoute.js]"]
  node_postroute["Post routes<br/>[postRoute.js]"]
  node_commentroute["Comment routes<br/>[commentRoute.js]"]
  node_chatroute["Chat routes<br/>[chatRoute.js]"]
  node_messageroute["Message routes<br/>[messageRoute.js]"]
  node_notificationroute["Notification routes"]
  node_usercontroller["User controller<br/>[userControl.js]"]
  node_postcontroller["Post controller<br/>[postControl.js]"]
  node_commentcontroller["Comment controller<br/>[commentControl.js]"]
  node_chatcontroller["Chat controller<br/>[chatControl.js]"]
  node_messagecontroller["Message controller<br/>[messageControl.js]"]
  node_notificationcontroller["Notification controller"]
end

subgraph group_realtime["Realtime"]
  node_socketclient["Socket client<br/>[socket.ts]"]
  node_socketserver["Socket server<br/>[index.js]"]
end

subgraph group_data["Persistence and media"]
  node_mongo[("MongoDB")]
  node_cloudinary["Cloudinary media"]
end

node_person(("User"))

node_person -->|"uses"| node_app
node_app -->|"routes to"| node_auth
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_profile
node_app -->|"routes to"| node_video
node_app -->|"dispatches events"| node_state
node_home -->|"requests data"| node_services
node_profile -->|"requests data"| node_services
node_auth -->|"requests auth"| node_services
node_chatui -->|"requests chat"| node_services
node_notiui -->|"requests notifications"| node_services
node_services -->|"HTTP requests"| node_server
node_server -->|"mounts"| node_userroute
node_server -->|"mounts"| node_postroute
node_server -->|"mounts"| node_commentroute
node_server -->|"mounts"| node_chatroute
node_server -->|"mounts"| node_messageroute
node_server -->|"mounts"| node_notificationroute
node_userroute -->|"dispatches"| node_usercontroller
node_postroute -->|"dispatches"| node_postcontroller
node_commentroute -->|"dispatches"| node_commentcontroller
node_chatroute -->|"dispatches"| node_chatcontroller
node_messageroute -->|"dispatches"| node_messagecontroller
node_notificationroute -->|"dispatches"| node_notificationcontroller
node_app -->|"connects"| node_socketclient
node_socketclient -->|"socket events"| node_socketserver
node_socketserver -->|"updates offline status"| node_server
node_usercontroller -->|"reads and writes"| node_mongo
node_postcontroller -->|"reads and writes"| node_mongo
node_commentcontroller -->|"reads and writes"| node_mongo
node_chatcontroller -->|"reads and writes"| node_mongo
node_messagecontroller -->|"reads and writes"| node_mongo
node_notificationcontroller -->|"reads and writes"| node_mongo
node_usercontroller -.->|"uploads images"| node_cloudinary

click node_app "https://github.com/laiquanghai2k6/facebook/blob/main/client/src/App.tsx"
click node_auth "https://github.com/laiquanghai2k6/facebook/blob/main/client/src/pages/Auth/Login.tsx"
click node_home "https://github.com/laiquanghai2k6/facebook/blob/main/client/src/pages/Home/Home.tsx"
click node_profile "https://github.com/laiquanghai2k6/facebook/blob/main/client/src/pages/Home/Profile.tsx"
click node_video "https://github.com/laiquanghai2k6/facebook/blob/main/client/src/pages/Video/Video.tsx"
click node_chatui "https://github.com/laiquanghai2k6/facebook/blob/main/client/src/component/Messenger.tsx"
click node_notiui "https://github.com/laiquanghai2k6/facebook/blob/main/client/src/component/Notification.tsx"
click node_state "https://github.com/laiquanghai2k6/facebook/blob/main/client/src/store/store.ts"
click node_services "https://github.com/laiquanghai2k6/facebook/blob/main/client/src/service/service.tsx"
click node_server "https://github.com/laiquanghai2k6/facebook/blob/main/server/index.js"
click node_userroute "https://github.com/laiquanghai2k6/facebook/blob/main/server/Routers/userRoute.js"
click node_postroute "https://github.com/laiquanghai2k6/facebook/blob/main/server/Routers/postRoute.js"
click node_commentroute "https://github.com/laiquanghai2k6/facebook/blob/main/server/Routers/commentRoute.js"
click node_chatroute "https://github.com/laiquanghai2k6/facebook/blob/main/server/Routers/chatRoute.js"
click node_messageroute "https://github.com/laiquanghai2k6/facebook/blob/main/server/Routers/messageRoute.js"
click node_notificationroute "https://github.com/laiquanghai2k6/facebook/blob/main/server/Routers/notificationRoute.js"
click node_usercontroller "https://github.com/laiquanghai2k6/facebook/blob/main/server/Controllers/userControl.js"
click node_postcontroller "https://github.com/laiquanghai2k6/facebook/blob/main/server/Controllers/postControl.js"
click node_commentcontroller "https://github.com/laiquanghai2k6/facebook/blob/main/server/Controllers/commentControl.js"
click node_chatcontroller "https://github.com/laiquanghai2k6/facebook/blob/main/server/Controllers/chatControl.js"
click node_messagecontroller "https://github.com/laiquanghai2k6/facebook/blob/main/server/Controllers/messageControl.js"
click node_notificationcontroller "https://github.com/laiquanghai2k6/facebook/blob/main/server/Controllers/notificationControl.js"
click node_socketclient "https://github.com/laiquanghai2k6/facebook/blob/main/client/src/socket.ts"
click node_socketserver "https://github.com/laiquanghai2k6/facebook/blob/main/socket/index.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_auth,node_home,node_profile,node_video,node_chatui,node_notiui,node_state,node_services,node_person toneBlue
class node_server,node_userroute,node_postroute,node_commentroute,node_chatroute,node_messageroute,node_notificationroute,node_usercontroller,node_postcontroller,node_commentcontroller,node_chatcontroller,node_messagecontroller,node_notificationcontroller toneAmber
class node_socketclient,node_socketserver toneMint
class node_mongo,node_cloudinary toneRose
```

## Components

### React client

- [App and routes](https://github.com/laiquanghai2k6/facebook/blob/main/client/src/App.tsx): `client/src/App.tsx`
- [Authentication](https://github.com/laiquanghai2k6/facebook/blob/main/client/src/pages/Auth/Login.tsx): `client/src/pages/Auth/Login.tsx`
- [Home feed](https://github.com/laiquanghai2k6/facebook/blob/main/client/src/pages/Home/Home.tsx): `client/src/pages/Home/Home.tsx`
- [Profiles](https://github.com/laiquanghai2k6/facebook/blob/main/client/src/pages/Home/Profile.tsx): `client/src/pages/Home/Profile.tsx`
- [Video experience](https://github.com/laiquanghai2k6/facebook/blob/main/client/src/pages/Video/Video.tsx): `client/src/pages/Video/Video.tsx`
- [Chat interface](https://github.com/laiquanghai2k6/facebook/blob/main/client/src/component/Messenger.tsx): `client/src/component/Messenger.tsx`
- [Notifications UI](https://github.com/laiquanghai2k6/facebook/blob/main/client/src/component/Notification.tsx): `client/src/component/Notification.tsx`
- [Client state](https://github.com/laiquanghai2k6/facebook/blob/main/client/src/store/store.ts): `client/src/store/store.ts`
- [HTTP services](https://github.com/laiquanghai2k6/facebook/blob/main/client/src/service/service.tsx): `client/src/service/service.tsx`

### HTTP API

- [Express server](https://github.com/laiquanghai2k6/facebook/blob/main/server/index.js): `server/index.js`
- [User routes](https://github.com/laiquanghai2k6/facebook/blob/main/server/Routers/userRoute.js): `server/Routers/userRoute.js`
- [Post routes](https://github.com/laiquanghai2k6/facebook/blob/main/server/Routers/postRoute.js): `server/Routers/postRoute.js`
- [Comment routes](https://github.com/laiquanghai2k6/facebook/blob/main/server/Routers/commentRoute.js): `server/Routers/commentRoute.js`
- [Chat routes](https://github.com/laiquanghai2k6/facebook/blob/main/server/Routers/chatRoute.js): `server/Routers/chatRoute.js`
- [Message routes](https://github.com/laiquanghai2k6/facebook/blob/main/server/Routers/messageRoute.js): `server/Routers/messageRoute.js`
- [Notification routes](https://github.com/laiquanghai2k6/facebook/blob/main/server/Routers/notificationRoute.js): `server/Routers/notificationRoute.js`
- [User controller](https://github.com/laiquanghai2k6/facebook/blob/main/server/Controllers/userControl.js): `server/Controllers/userControl.js`
- [Post controller](https://github.com/laiquanghai2k6/facebook/blob/main/server/Controllers/postControl.js): `server/Controllers/postControl.js`
- [Comment controller](https://github.com/laiquanghai2k6/facebook/blob/main/server/Controllers/commentControl.js): `server/Controllers/commentControl.js`
- [Chat controller](https://github.com/laiquanghai2k6/facebook/blob/main/server/Controllers/chatControl.js): `server/Controllers/chatControl.js`
- [Message controller](https://github.com/laiquanghai2k6/facebook/blob/main/server/Controllers/messageControl.js): `server/Controllers/messageControl.js`
- [Notification controller](https://github.com/laiquanghai2k6/facebook/blob/main/server/Controllers/notificationControl.js): `server/Controllers/notificationControl.js`

### Realtime

- [Socket client](https://github.com/laiquanghai2k6/facebook/blob/main/client/src/socket.ts): `client/src/socket.ts`
- [Socket server](https://github.com/laiquanghai2k6/facebook/blob/main/socket/index.js): `socket/index.js`

### Persistence and media

- **MongoDB**
- **Cloudinary media**

### Other components

- **User**

## Connections

- 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