https://github.com/shawshank725/twitter

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.
https://github.com/shawshank725/twitter

api java modulith mysql mysql-database neondb reactjs rest-api restful-api session-authentication spring-boot typescript

Last synced: 7 days ago
JSON representation

Host: GitHub
URL: https://github.com/shawshank725/twitter
Owner: shawshank725
Created: 2026-06-09T06:18:31.000Z (10 days ago)
Default Branch: main
Last Pushed: 2026-06-09T12:53:24.000Z (10 days ago)
Last Synced: 2026-06-09T14:21:18.527Z (10 days ago)
Topics: api, java, modulith, mysql, mysql-database, neondb, reactjs, rest-api, restful-api, session-authentication, spring-boot, typescript
Language: TypeScript
Homepage:
Size: 1.75 MB
Stars: 0
Watchers: 0
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Twitter Clone Backend & Frontend

> **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.

This is a **modulith-architecture based Twitter clone** built with **Spring Boot**, **Java**, **React.js** and **NeonDB (PostgreSQL)** as the database.
It 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.

---

## Tech Stack
- **Backend**: Spring Boot (Java), WebSockets, MySQL triggers (for some logic), Modulith, Session Based authentication
- **Frontend**: React, Vite, TanStack Query, React Easy Crop
- **Database**: NeonDB (PostgreSQL), MySQL

---

## Project Structure
```text
Backend
├── Authentication Module
├── Posting Module
│ ├── Posts
│ ├── Likes
│ └── Bookmarks
├── Connection Module
├── Notification Module
├── Timeline Module
└── Media Module

Frontend
```
---

Architecture Comparison

Metric
Microservices Version
Modulith Version

Number of Services
8
1

Source Files
256
204

Lines of Code
15,556
14,693

Inter-Service Communication
REST API Calls
In-Process Calls

API Calls Between Components
Higher
Lower

Deployment Units
8 Services
1 Application

Operational Complexity
Higher
Lower

Local Development Setup
More Complex
Simpler

Debugging
Distributed
Centralized

---

## Prerequisites

- Java 21
- Node.js
- MySQL Server
- MySQL Workbench
- Cloudinary Account
- Giphy API Key

---

### 1. Fork or Clone the Repository

```bash
git clone https://github.com/shawshank725/twitter
cd twitter
```

### 2. Set Up the Database

1. Install MySQL Server and MySQL Workbench.
2. Open the `sql-scripts` folder.
3. Execute all SQL scripts one by one.
4. By default, the application uses a database named `twitter`.

If you change the database name, make sure to update both:
- The SQL scripts
- `application.properties`

### 3. Set Up the Frontend

Open the `frontend` folder in VS Code (or any preferred code editor).

Install dependencies:

```bash
npm install
```

Create a `.env` file inside the `frontend` directory:

```env
GIPHY_API=your_giphy_api_key
```

### 4. Set Up the Backend

Open the `backend` folder in IntelliJ IDEA (recommended) or another Java IDE.

Import the project and allow Maven to download all dependencies.

Create a `.env` file in the root of the `backend` directory:

```env
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
```

Open `application.properties` and configure your database credentials:

```properties
spring.datasource.username=your_username
spring.datasource.password=your_password
spring.datasource.url=jdbc:mysql://localhost:3306/twitter
```

### 5. Run the Backend

Start the Spring Boot application from your IDE.

### 6. Run the Frontend

From the `frontend` directory:

```bash
npm run dev
```

### 7. Register an Account

Open:

```text
http://localhost:5173/auth
```

Create an account and start using the application.

---

## Algorithms & Flows

### 🔹 Timeline Generation
1. Connection service returns a list of followers & followees (given a user id).
2. Deduplicate into a **set**.
3. Another endpoint fetches **post IDs** for this set.
4. Send post IDs to frontend → frontend maps & displays posts.
5. Show first 10 posts → then "Show more" appends 10 more.
6. If <10 posts → display global feed.

### 🔹 Suggested People to Follow
1. Get list of users the logged-in user already follows.
2. Fetch all users (excluding self).
3. Compute: `All users – Followed users = Not Followed`.
4. Display max 4 at a time in frontend (React Query).
5. Once a user is followed, remove from list & replace with next.

### 🔹 Settings Page Includes
- Change username
- Change password
- Delete account

🔹 **Change Username**
- Check backend if new username is already taken.
- Show green tick if available, red cross if not.
- Backend endpoint validates & updates.

---

## Added Features & Fixes
1. User authentication, logout, account deletion, and password validation
2. Create, reply to, delete, like, bookmark, and quote-retweet posts
3. Personalized timeline with profile posts, bookmarks, and private likes
4. Follow / unfollow system
5. Notification system for likes, follows, replies, and quote retweets
6. User profile management with profile editing, photo cropping, profile/background photo removal, joined date display, and username validation
7. Advanced post viewing with parent post navigation, post modal, clickable posts, quote-retweet viewer, and custom photo viewer
8. Search functionality
9. Settings page
10. Tab-based navigation and improved profile layout
11. Rich post formatting and improved date formatting
12. Enhanced user experience through empty-state messages, UI fixes, sidebar improvements, and project restructuring

---
## Screenshots