How yasaswitha18/twitter-clone works
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: post.controller.js Post services · App.jsx App router · routes API routes · ProfilePage.jsx Profile page
Components 24
React client
- App router
frontend/src/App.jsx - Home feed
frontend/src/pages/home/HomePage.jsx - Post composer
frontend/src/pages/home/CreatePost.jsx - Post interactions
frontend/src/components/common/Post.jsx - Post lists
frontend/src/components/common/Posts.jsx - Profile page
frontend/src/pages/profile/ProfilePage.jsx - Profile editor
frontend/src/pages/profile/EditProfileModal.jsx - Follow action
frontend/src/hooks/useFollow.jsx - Profile update
frontend/src/hooks/useUpdateUserProfile.jsx - Login and signup
frontend/src/pages/auth - Notifications page
frontend/src/pages/notification/NotificationPage.jsx
Express API
- HTTP server
backend/server.js - API routes
backend/routes
Social features
- Post services
backend/controllers/post.controller.js - Notification services
backend/controllers/notification.controller.js
Identity and profiles
- Authentication
backend/controllers/auth.controller.js - JWT route guard
backend/middleware/protectRoute.js - User services
backend/controllers/user.controller.js
Persistence and media
- User records
backend/models/user.model.js - Post records
backend/models/post.model.js - Notification records
backend/models/notification.model.js
Other components
- Visitor
- MongoDB
- Cloudinary
Connections 40
- Visitor → App router: opens
- App router → Home feed: routes to
frontend/src/App.jsx - App router → Login and signup: routes to
frontend/src/App.jsx - App router → Notifications page: routes to
frontend/src/App.jsx - App router → Profile page: routes to
frontend/src/App.jsx - Home feed → Post composer: renders
frontend/src/pages/home/HomePage.jsx - Home feed → Post lists: renders
frontend/src/pages/home/HomePage.jsx - Post lists → Post interactions: renders
frontend/src/components/common/Posts.jsx - Profile page → Post lists: renders
frontend/src/pages/profile/ProfilePage.jsx - Profile page → Profile editor: opens
frontend/src/pages/profile/ProfilePage.jsx - Profile page → Follow action: invokes
frontend/src/pages/profile/ProfilePage.jsx - Profile page → Profile update: invokes
frontend/src/pages/profile/ProfilePage.jsx - Profile editor → Profile update: uses
frontend/src/pages/profile/EditProfileModal.jsx - App router → HTTP server: requests auth
frontend/src/App.jsx - Follow action → HTTP server: posts follow
frontend/src/hooks/useFollow.jsx - Profile update → HTTP server: posts updates
frontend/src/hooks/useUpdateUserProfile.jsx - HTTP server → API routes: mounts
backend/server.js - API routes → Authentication: dispatches
backend/routes/auth.route.js - API routes → JWT route guard: protects
backend/routes/auth.route.js - JWT route guard → User records: loads user
backend/middleware/protectRoute.js - Authentication → User records: reads and writes
backend/controllers/auth.controller.js - Authentication → JWT route guard: guards identity
backend/routes/auth.route.js - API routes → User services: dispatches
backend/routes/user.route.js - User services → User records: reads and writes
backend/controllers/user.controller.js - User services → Notification records: creates follow alerts
backend/controllers/user.controller.js - API routes → Post services: dispatches
backend/routes/post.route.js - Post services → Post records: reads and writes
backend/controllers/post.controller.js - Post services → User records: reads and updates
backend/controllers/post.controller.js - Post services → Notification records: creates like alerts
backend/controllers/post.controller.js - API routes → Notification services: dispatches
backend/routes/notification.route.js - Notification services → Notification records: uses
backend/controllers/notification.controller.js - HTTP server → MongoDB: connects
backend/server.js - Post services → Cloudinary: uploads images
backend/controllers/post.controller.js - User services → Cloudinary: uploads images
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