# yasaswitha18/twitter-clone architecture

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

- Interactive diagram: https://gitdiagram.com/yasaswitha18/twitter-clone
- Repository: https://github.com/yasaswitha18/twitter-clone

## Overview

This is a Twitter-style social network: users authenticate, browse feeds and profiles, publish and interact with posts, follow other users, and receive notifications. The React client routes these experiences and uses API requests; Express routes dispatch requests to controllers, which apply domain rules and persist users, posts, and notifications in MongoDB. Profile and post image uploads use Cloudinary. The README documents additional capabilities, but several client/API connections are not shown in sampled source, so those links are omitted or marked unverified.

Main entry points: [`backend/controllers/post.controller.js`](https://github.com/yasaswitha18/twitter-clone/blob/master/backend/controllers/post.controller.js) (Post services), [`frontend/src/App.jsx`](https://github.com/yasaswitha18/twitter-clone/blob/master/frontend/src/App.jsx) (App router), [`backend/routes`](https://github.com/yasaswitha18/twitter-clone/tree/master/backend/routes) (API routes), [`frontend/src/pages/profile/ProfilePage.jsx`](https://github.com/yasaswitha18/twitter-clone/blob/master/frontend/src/pages/profile/ProfilePage.jsx) (Profile page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["React client"]
  node_app["App router<br/>[App.jsx]"]
  node_home["Home feed<br/>[HomePage.jsx]"]
  node_compose["Post composer<br/>[CreatePost.jsx]"]
  node_postview["Post interactions<br/>[Post.jsx]"]
  node_posts["Post lists<br/>[Posts.jsx]"]
  node_profileui["Profile page<br/>[ProfilePage.jsx]"]
  node_editprofile["Profile editor"]
  node_followhook["Follow action<br/>[useFollow.jsx]"]
  node_profilehook["Profile update"]
  node_authui["Login and signup"]
  node_notificationui["Notifications page"]
end

subgraph group_api["Express API"]
  node_server["HTTP server<br/>[server.js]"]
  node_routes["API routes"]
end

subgraph group_social["Social features"]
  node_postsapi["Post services<br/>[post.controller.js]"]
  node_notificationsapi["Notification services"]
end

subgraph group_identity["Identity and profiles"]
  node_auth["Authentication<br/>[auth.controller.js]"]
  node_guard["JWT route guard<br/>[protectRoute.js]"]
  node_users["User services<br/>[user.controller.js]"]
end

subgraph group_persistence["Persistence and media"]
  node_userstore[("User records<br/>[user.model.js]")]
  node_poststore[("Post records<br/>[post.model.js]")]
  node_notifystore[("Notification records")]
end

node_visitor(("Visitor"))
node_mongo[("MongoDB")]
node_cloudinary["Cloudinary"]

node_visitor -->|"opens"| node_app
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_authui
node_app -->|"routes to"| node_notificationui
node_app -->|"routes to"| node_profileui
node_home -->|"renders"| node_compose
node_home -->|"renders"| node_posts
node_posts -->|"renders"| node_postview
node_profileui -->|"renders"| node_posts
node_profileui -->|"opens"| node_editprofile
node_profileui -->|"invokes"| node_followhook
node_profileui -->|"invokes"| node_profilehook
node_editprofile -->|"uses"| node_profilehook
node_app -->|"requests auth"| node_server
node_followhook -->|"posts follow"| node_server
node_profilehook -->|"posts updates"| node_server
node_server -->|"mounts"| node_routes
node_routes -->|"dispatches"| node_auth
node_routes -->|"protects"| node_guard
node_guard -->|"loads user"| node_userstore
node_auth -->|"reads and writes"| node_userstore
node_auth -->|"guards identity"| node_guard
node_routes -->|"dispatches"| node_users
node_users -->|"reads and writes"| node_userstore
node_users -->|"creates follow alerts"| node_notifystore
node_routes -->|"dispatches"| node_postsapi
node_postsapi -->|"reads and writes"| node_poststore
node_postsapi -->|"reads and updates"| node_userstore
node_postsapi -->|"creates like alerts"| node_notifystore
node_routes -->|"dispatches"| node_notificationsapi
node_notificationsapi -->|"uses"| node_notifystore
node_server -->|"connects"| node_mongo
node_postsapi -->|"uploads images"| node_cloudinary
node_users -->|"uploads images"| node_cloudinary
node_userstore -.->|"persists"| node_mongo
node_poststore -.->|"persists"| node_mongo
node_notifystore -.->|"persists"| node_mongo
node_compose -.->|"creates posts"| node_postsapi
node_postview -.->|"post actions"| node_postsapi
node_notificationui -.->|"loads alerts"| node_notificationsapi

click node_app "https://github.com/yasaswitha18/twitter-clone/blob/master/frontend/src/App.jsx"
click node_home "https://github.com/yasaswitha18/twitter-clone/blob/master/frontend/src/pages/home/HomePage.jsx"
click node_compose "https://github.com/yasaswitha18/twitter-clone/blob/master/frontend/src/pages/home/CreatePost.jsx"
click node_postview "https://github.com/yasaswitha18/twitter-clone/blob/master/frontend/src/components/common/Post.jsx"
click node_posts "https://github.com/yasaswitha18/twitter-clone/blob/master/frontend/src/components/common/Posts.jsx"
click node_profileui "https://github.com/yasaswitha18/twitter-clone/blob/master/frontend/src/pages/profile/ProfilePage.jsx"
click node_editprofile "https://github.com/yasaswitha18/twitter-clone/blob/master/frontend/src/pages/profile/EditProfileModal.jsx"
click node_followhook "https://github.com/yasaswitha18/twitter-clone/blob/master/frontend/src/hooks/useFollow.jsx"
click node_profilehook "https://github.com/yasaswitha18/twitter-clone/blob/master/frontend/src/hooks/useUpdateUserProfile.jsx"
click node_authui "https://github.com/yasaswitha18/twitter-clone/tree/master/frontend/src/pages/auth"
click node_notificationui "https://github.com/yasaswitha18/twitter-clone/blob/master/frontend/src/pages/notification/NotificationPage.jsx"
click node_server "https://github.com/yasaswitha18/twitter-clone/blob/master/backend/server.js"
click node_routes "https://github.com/yasaswitha18/twitter-clone/tree/master/backend/routes"
click node_auth "https://github.com/yasaswitha18/twitter-clone/blob/master/backend/controllers/auth.controller.js"
click node_guard "https://github.com/yasaswitha18/twitter-clone/blob/master/backend/middleware/protectRoute.js"
click node_users "https://github.com/yasaswitha18/twitter-clone/blob/master/backend/controllers/user.controller.js"
click node_postsapi "https://github.com/yasaswitha18/twitter-clone/blob/master/backend/controllers/post.controller.js"
click node_notificationsapi "https://github.com/yasaswitha18/twitter-clone/blob/master/backend/controllers/notification.controller.js"
click node_userstore "https://github.com/yasaswitha18/twitter-clone/blob/master/backend/models/user.model.js"
click node_poststore "https://github.com/yasaswitha18/twitter-clone/blob/master/backend/models/post.model.js"
click node_notifystore "https://github.com/yasaswitha18/twitter-clone/blob/master/backend/models/notification.model.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_home,node_compose,node_postview,node_posts,node_profileui,node_editprofile,node_followhook,node_profilehook,node_authui,node_notificationui toneBlue
class node_server,node_routes,node_mongo toneAmber
class node_postsapi,node_notificationsapi toneMint
class node_auth,node_guard,node_users toneRose
class node_userstore,node_poststore,node_notifystore,node_visitor,node_cloudinary toneIndigo
```

## Components

### React client

- [App router](https://github.com/yasaswitha18/twitter-clone/blob/master/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Home feed](https://github.com/yasaswitha18/twitter-clone/blob/master/frontend/src/pages/home/HomePage.jsx): `frontend/src/pages/home/HomePage.jsx`
- [Post composer](https://github.com/yasaswitha18/twitter-clone/blob/master/frontend/src/pages/home/CreatePost.jsx): `frontend/src/pages/home/CreatePost.jsx`
- [Post interactions](https://github.com/yasaswitha18/twitter-clone/blob/master/frontend/src/components/common/Post.jsx): `frontend/src/components/common/Post.jsx`
- [Post lists](https://github.com/yasaswitha18/twitter-clone/blob/master/frontend/src/components/common/Posts.jsx): `frontend/src/components/common/Posts.jsx`
- [Profile page](https://github.com/yasaswitha18/twitter-clone/blob/master/frontend/src/pages/profile/ProfilePage.jsx): `frontend/src/pages/profile/ProfilePage.jsx`
- [Profile editor](https://github.com/yasaswitha18/twitter-clone/blob/master/frontend/src/pages/profile/EditProfileModal.jsx): `frontend/src/pages/profile/EditProfileModal.jsx`
- [Follow action](https://github.com/yasaswitha18/twitter-clone/blob/master/frontend/src/hooks/useFollow.jsx): `frontend/src/hooks/useFollow.jsx`
- [Profile update](https://github.com/yasaswitha18/twitter-clone/blob/master/frontend/src/hooks/useUpdateUserProfile.jsx): `frontend/src/hooks/useUpdateUserProfile.jsx`
- [Login and signup](https://github.com/yasaswitha18/twitter-clone/tree/master/frontend/src/pages/auth): `frontend/src/pages/auth`
- [Notifications page](https://github.com/yasaswitha18/twitter-clone/blob/master/frontend/src/pages/notification/NotificationPage.jsx): `frontend/src/pages/notification/NotificationPage.jsx`

### Express API

- [HTTP server](https://github.com/yasaswitha18/twitter-clone/blob/master/backend/server.js): `backend/server.js`
- [API routes](https://github.com/yasaswitha18/twitter-clone/tree/master/backend/routes): `backend/routes`

### Social features

- [Post services](https://github.com/yasaswitha18/twitter-clone/blob/master/backend/controllers/post.controller.js): `backend/controllers/post.controller.js`
- [Notification services](https://github.com/yasaswitha18/twitter-clone/blob/master/backend/controllers/notification.controller.js): `backend/controllers/notification.controller.js`

### Identity and profiles

- [Authentication](https://github.com/yasaswitha18/twitter-clone/blob/master/backend/controllers/auth.controller.js): `backend/controllers/auth.controller.js`
- [JWT route guard](https://github.com/yasaswitha18/twitter-clone/blob/master/backend/middleware/protectRoute.js): `backend/middleware/protectRoute.js`
- [User services](https://github.com/yasaswitha18/twitter-clone/blob/master/backend/controllers/user.controller.js): `backend/controllers/user.controller.js`

### Persistence and media

- [User records](https://github.com/yasaswitha18/twitter-clone/blob/master/backend/models/user.model.js): `backend/models/user.model.js`
- [Post records](https://github.com/yasaswitha18/twitter-clone/blob/master/backend/models/post.model.js): `backend/models/post.model.js`
- [Notification records](https://github.com/yasaswitha18/twitter-clone/blob/master/backend/models/notification.model.js): `backend/models/notification.model.js`

### Other components

- **Visitor**
- **MongoDB**
- **Cloudinary**

## Connections

- Visitor → App router: opens
- App router → Home feed: routes to (evidence: `frontend/src/App.jsx`)
- App router → Login and signup: routes to (evidence: `frontend/src/App.jsx`)
- App router → Notifications page: routes to (evidence: `frontend/src/App.jsx`)
- App router → Profile page: routes to (evidence: `frontend/src/App.jsx`)
- Home feed → Post composer: renders (evidence: `frontend/src/pages/home/HomePage.jsx`)
- Home feed → Post lists: renders (evidence: `frontend/src/pages/home/HomePage.jsx`)
- Post lists → Post interactions: renders (evidence: `frontend/src/components/common/Posts.jsx`)
- Profile page → Post lists: renders (evidence: `frontend/src/pages/profile/ProfilePage.jsx`)
- Profile page → Profile editor: opens (evidence: `frontend/src/pages/profile/ProfilePage.jsx`)
- Profile page → Follow action: invokes (evidence: `frontend/src/pages/profile/ProfilePage.jsx`)
- Profile page → Profile update: invokes (evidence: `frontend/src/pages/profile/ProfilePage.jsx`)
- Profile editor → Profile update: uses (evidence: `frontend/src/pages/profile/EditProfileModal.jsx`)
- App router → HTTP server: requests auth (evidence: `frontend/src/App.jsx`)
- Follow action → HTTP server: posts follow (evidence: `frontend/src/hooks/useFollow.jsx`)
- Profile update → HTTP server: posts updates (evidence: `frontend/src/hooks/useUpdateUserProfile.jsx`)
- HTTP server → API routes: mounts (evidence: `backend/server.js`)
- API routes → Authentication: dispatches (evidence: `backend/routes/auth.route.js`)
- API routes → JWT route guard: protects (evidence: `backend/routes/auth.route.js`)
- JWT route guard → User records: loads user (evidence: `backend/middleware/protectRoute.js`)
- Authentication → User records: reads and writes (evidence: `backend/controllers/auth.controller.js`)
- Authentication → JWT route guard: guards identity (evidence: `backend/routes/auth.route.js`)
- API routes → User services: dispatches (evidence: `backend/routes/user.route.js`)
- User services → User records: reads and writes (evidence: `backend/controllers/user.controller.js`)
- User services → Notification records: creates follow alerts (evidence: `backend/controllers/user.controller.js`)
- API routes → Post services: dispatches (evidence: `backend/routes/post.route.js`)
- Post services → Post records: reads and writes (evidence: `backend/controllers/post.controller.js`)
- Post services → User records: reads and updates (evidence: `backend/controllers/post.controller.js`)
- Post services → Notification records: creates like alerts (evidence: `backend/controllers/post.controller.js`)
- API routes → Notification services: dispatches (evidence: `backend/routes/notification.route.js`)
- Notification services → Notification records: uses (evidence: `backend/controllers/notification.controller.js`)
- HTTP server → MongoDB: connects (evidence: `backend/server.js`)
- Post services → Cloudinary: uploads images (evidence: `backend/controllers/post.controller.js`)
- User services → Cloudinary: uploads images (evidence: `backend/controllers/user.controller.js`)
- User records → MongoDB: persists
- Post records → MongoDB: persists
- Notification records → MongoDB: persists
- Post composer → Post services: creates posts
- Post interactions → Post services: post actions
- Notifications page → Notification services: loads alerts