{"id":50798281,"url":"https://github.com/shawshank725/twitter","last_synced_at":"2026-06-12T16:34:26.841Z","repository":{"id":363578343,"uuid":"1263641019","full_name":"shawshank725/twitter","owner":"shawshank725","description":"This is a modular Twitter project, a major improvement upon a similar project based on microservices. This project is easily deployable and is optimized to reduce lines of code and also API calls as well. The project codebase is mostly the same, with changes in its architecture and API calling.","archived":false,"fork":false,"pushed_at":"2026-06-09T12:53:24.000Z","size":1839,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-09T14:21:18.527Z","etag":null,"topics":["api","java","modulith","mysql","mysql-database","neondb","reactjs","rest-api","restful-api","session-authentication","spring-boot","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shawshank725.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-09T06:18:31.000Z","updated_at":"2026-06-09T13:03:49.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/shawshank725/twitter","commit_stats":null,"previous_names":["shawshank725/twitter"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/shawshank725/twitter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shawshank725%2Ftwitter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shawshank725%2Ftwitter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shawshank725%2Ftwitter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shawshank725%2Ftwitter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shawshank725","download_url":"https://codeload.github.com/shawshank725/twitter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shawshank725%2Ftwitter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34253936,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-12T02:00:06.859Z","response_time":109,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","java","modulith","mysql","mysql-database","neondb","reactjs","rest-api","restful-api","session-authentication","spring-boot","typescript"],"created_at":"2026-06-12T16:34:25.503Z","updated_at":"2026-06-12T16:34:26.836Z","avatar_url":"https://github.com/shawshank725.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Twitter Clone Backend \u0026 Frontend\n\n\u003e **Status:** This project is based on a [previous microservice based project](https://github.com/shawshank725/twitter-clone-spring-boot-react-microservices). This project just introduces modulith architecture and fixes existing issues and can be deployed easily.\n\nThis is a **modulith-architecture based Twitter clone** built with **Spring Boot**, **Java**, **React.js** and **NeonDB (PostgreSQL)** as the database.  \nIt supports real-time interactions using **WebSockets** (for notifications) and includes advanced features like image cropping, open-feign clients, MySQL triggers (initially), and a fully functional timeline system.\n\n---\n\n## Tech Stack\n- **Backend**: Spring Boot (Java), WebSockets, MySQL triggers (for some logic), Modulith, Session Based authentication\n- **Frontend**: React, Vite, TanStack Query, React Easy Crop\n- **Database**: NeonDB (PostgreSQL), MySQL\n\n---\n\n## Project Structure\n```text\nBackend\n├── Authentication Module\n├── Posting Module\n│   ├── Posts\n│   ├── Likes\n│   └── Bookmarks\n├── Connection Module\n├── Notification Module\n├── Timeline Module\n└── Media Module\n\nFrontend\n```\n---\n\n\u003ch2\u003eArchitecture Comparison\u003c/h2\u003e\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eMetric\u003c/th\u003e\n      \u003cth\u003eMicroservices Version\u003c/th\u003e\n      \u003cth\u003eModulith Version\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eNumber of Services\u003c/td\u003e\n      \u003ctd\u003e8\u003c/td\u003e\n      \u003ctd\u003e1\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eSource Files\u003c/td\u003e\n      \u003ctd\u003e256\u003c/td\u003e\n      \u003ctd\u003e204\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eLines of Code\u003c/td\u003e\n      \u003ctd\u003e15,556\u003c/td\u003e\n      \u003ctd\u003e14,693\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eInter-Service Communication\u003c/td\u003e\n      \u003ctd\u003eREST API Calls\u003c/td\u003e\n      \u003ctd\u003eIn-Process Calls\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eAPI Calls Between Components\u003c/td\u003e\n      \u003ctd\u003eHigher\u003c/td\u003e\n      \u003ctd\u003eLower\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eDeployment Units\u003c/td\u003e\n      \u003ctd\u003e8 Services\u003c/td\u003e\n      \u003ctd\u003e1 Application\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eOperational Complexity\u003c/td\u003e\n      \u003ctd\u003eHigher\u003c/td\u003e\n      \u003ctd\u003eLower\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eLocal Development Setup\u003c/td\u003e\n      \u003ctd\u003eMore Complex\u003c/td\u003e\n      \u003ctd\u003eSimpler\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eDebugging\u003c/td\u003e\n      \u003ctd\u003eDistributed\u003c/td\u003e\n      \u003ctd\u003eCentralized\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n---\n\n## Prerequisites\n\n- Java 21\n- Node.js\n- MySQL Server\n- MySQL Workbench\n- Cloudinary Account\n- Giphy API Key\n\n---\n\n\n### 1. Fork or Clone the Repository\n\n```bash\ngit clone https://github.com/shawshank725/twitter\ncd twitter\n```\n\n### 2. Set Up the Database\n\n1. Install MySQL Server and MySQL Workbench.\n2. Open the `sql-scripts` folder.\n3. Execute all SQL scripts one by one.\n4. By default, the application uses a database named `twitter`.\n\nIf you change the database name, make sure to update both:\n- The SQL scripts\n- `application.properties`\n\n### 3. Set Up the Frontend\n\nOpen the `frontend` folder in VS Code (or any preferred code editor).\n\nInstall dependencies:\n\n```bash\nnpm install\n```\n\nCreate a `.env` file inside the `frontend` directory:\n\n```env\nGIPHY_API=your_giphy_api_key\n```\n\n### 4. Set Up the Backend\n\nOpen the `backend` folder in IntelliJ IDEA (recommended) or another Java IDE.\n\nImport the project and allow Maven to download all dependencies.\n\nCreate a `.env` file in the root of the `backend` directory:\n\n```env\nCLOUDINARY_CLOUD_NAME=your_cloud_name\nCLOUDINARY_API_KEY=your_api_key\nCLOUDINARY_API_SECRET=your_api_secret\n```\n\nOpen `application.properties` and configure your database credentials:\n\n```properties\nspring.datasource.username=your_username\nspring.datasource.password=your_password\nspring.datasource.url=jdbc:mysql://localhost:3306/twitter\n```\n\n### 5. Run the Backend\n\nStart the Spring Boot application from your IDE.\n\n### 6. Run the Frontend\n\nFrom the `frontend` directory:\n\n```bash\nnpm run dev\n```\n\n### 7. Register an Account\n\nOpen:\n\n```text\nhttp://localhost:5173/auth\n```\n\nCreate an account and start using the application.\n\n---\n\n## Algorithms \u0026 Flows\n\n### 🔹 Timeline Generation\n1. Connection service returns a list of followers \u0026 followees (given a user id).  \n2. Deduplicate into a **set**.  \n3. Another endpoint fetches **post IDs** for this set.  \n4. Send post IDs to frontend → frontend maps \u0026 displays posts.  \n5. Show first 10 posts → then \"Show more\" appends 10 more.  \n6. If \u003c10 posts → display global feed.  \n\n### 🔹 Suggested People to Follow\n1. Get list of users the logged-in user already follows.  \n2. Fetch all users (excluding self).  \n3. Compute: `All users – Followed users = Not Followed`.  \n4. Display max 4 at a time in frontend (React Query).  \n5. Once a user is followed, remove from list \u0026 replace with next.  \n\n### 🔹 Settings Page Includes\n- Change username  \n- Change password  \n- Delete account  \n\n🔹 **Change Username**  \n- Check backend if new username is already taken.  \n- Show green tick if available, red cross if not.  \n- Backend endpoint validates \u0026 updates.  \n\n---\n\n## Added Features \u0026 Fixes\n1. User authentication, logout, account deletion, and password validation\n2. Create, reply to, delete, like, bookmark, and quote-retweet posts\n3. Personalized timeline with profile posts, bookmarks, and private likes\n4. Follow / unfollow system\n5. Notification system for likes, follows, replies, and quote retweets\n6. User profile management with profile editing, photo cropping, profile/background photo removal, joined date display, and username validation\n7. Advanced post viewing with parent post navigation, post modal, clickable posts, quote-retweet viewer, and custom photo viewer\n8. Search functionality\n9. Settings page\n10. Tab-based navigation and improved profile layout\n11. Rich post formatting and improved date formatting\n12. Enhanced user experience through empty-state messages, UI fixes, sidebar improvements, and project restructuring\n\n---\n## Screenshots\n\n\u003ch3\u003eHome Page \u0026 Profile Page\u003c/h3\u003e\n\n\u003cp\u003e\n  \u003cimg src=\"./output/home%20page.png\" width=\"49%\"\u003e\n  \u003cimg src=\"./output/responsive%20profile%20page.png\" width=\"49%\"\u003e\n\u003c/p\u003e\n\n\u003ch3\u003eSettings \u0026 Likes\u003c/h3\u003e\n\n\u003cp\u003e\n  \u003cimg src=\"./output/settings.png\" width=\"49%\"\u003e\n  \u003cimg src=\"./output/likes%20tab.png\" width=\"49%\"\u003e\n\u003c/p\u003e\n\n\u003ch3\u003eNotifications\u003c/h3\u003e\n\n\u003cp\u003e\n  \u003cimg src=\"./output/follow%20notifications.png\" width=\"49%\"\u003e\n  \u003cimg src=\"./output/mention%20notifications.png\" width=\"49%\"\u003e\n\u003c/p\u003e\n\n---\n\n## License\nThis project is licensed under **All Rights Reserved**.  \nSee [LICENSE](./LICENSE) for details.\n\n---\n\n## Author\n**Shashank Verma**  \nCreator of this Twitter Clone Project.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshawshank725%2Ftwitter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshawshank725%2Ftwitter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshawshank725%2Ftwitter/lists"}