https://github.com/saadmdsabah/discord-clone-using-spring-boot-stomp-client-and-react-js
A full-stack, real-time chat application inspired by Discord, featuring a containerized architecture for easy setup and seamless communication.
https://github.com/saadmdsabah/discord-clone-using-spring-boot-stomp-client-and-react-js
docker docker-compose dockerhub java-21 jwt-authentication mongodb nginx-docker react react-hot-toast reactjs redis-cache redux-toolkit spring-boot stompjs tailwindcss typescript vite websocket
Last synced: about 2 months ago
JSON representation
A full-stack, real-time chat application inspired by Discord, featuring a containerized architecture for easy setup and seamless communication.
- Host: GitHub
- URL: https://github.com/saadmdsabah/discord-clone-using-spring-boot-stomp-client-and-react-js
- Owner: saadmdsabah
- Created: 2025-10-21T06:36:37.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-10-22T08:48:07.000Z (8 months ago)
- Last Synced: 2025-11-16T05:03:13.548Z (7 months ago)
- Topics: docker, docker-compose, dockerhub, java-21, jwt-authentication, mongodb, nginx-docker, react, react-hot-toast, reactjs, redis-cache, redux-toolkit, spring-boot, stompjs, tailwindcss, typescript, vite, websocket
- Homepage:
- Size: 36.1 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Discord Clone 🚀
A real-time, full-stack chat application inspired by Discord. This project leverages a powerful combination of Spring Boot for the backend, React with TypeScript for the frontend, and WebSockets for seamless, bidirectional communication. The entire application is containerized using Docker for easy setup and deployment.
## 🏛️ Architecture Overview
The application is built on a modern, decoupled architecture designed for real-time performance and scalability. Each component is containerized to ensure a consistent and portable environment.
* **Frontend**: A dynamic, type-safe user interface built with **React** and **TypeScript**, and bundled by **Vite**. Global state is managed efficiently by **Redux Toolkit**, with user sessions seamlessly maintained across reloads using **Redux Persist**. The responsive design is crafted with **Tailwind CSS**, and the final static build is served by an **Nginx** web server.
* **Backend**: A robust and secure RESTful API powered by **Spring Boot**. It handles all business logic, while **Spring Security** protects the endpoints and manages user authentication and authorization using **JWT** (JSON Web Tokens).
* **Real-time Communication**: Instant, bidirectional messaging is powered by **STOMP over WebSocket**. The Spring backend provides the message broker, and the React frontend connects using **STOMP.js**. This enables live chat and delivers instant UI updates and notifications via **React Hot Toast**.
* **Database**: **MongoDB** database acts as the primary data store, persisting all user information, group details, and message history.
* **Containerization**: The entire ecosystem—frontend, backend, and database—is orchestrated by **Docker Compose**. This approach guarantees a simple, one-command setup and a consistent environment from development to production.
---
## đź’» Tech Stack
| Area | Technology |
| :-------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Backend** |     |
| **Frontend**|        |
| **Database**|  |
| **DevOps** |   |
---
## ⚙️ Application Workflow
The following diagrams illustrate the core operational flows of the application.
### User Authentication & Session Management
The authentication process is initiated when a user submits their credentials. The **Spring Boot** backend validates these against the **MongoDB** database. Upon success, a **JWT** is generated and returned to the client. The **React** frontend then persists the token and user data in the **Redux Store** and establishes a WebSocket connection for real-time updates.
### Group Management & Join Requests
Users can create public or private groups. Joining a public group is instantaneous, with the backend directly adding the user. For private groups, a join request is sent to the backend, which then notifies the group owner in real-time. The owner's decision (accept/reject) is processed by the backend, updating the request status and notifying the original user of the outcome via WebSocket.
### Real-Time Messaging
Once connected, a user sends a message through the **WebSocket Client**. The message is transmitted to the **Spring Boot** backend via its STOMP endpoint. The backend first persists the message in **MongoDB** for chat history and then broadcasts it to all members subscribed to that specific group's topic, ensuring instantaneous delivery.
### User Logout
During logout, the client-side action clears the user's session data from the **Redux Store** and removes the persisted state. Simultaneously, it sends a command to disconnect from the **WebSocket Server**, gracefully terminating the real-time communication channel.
---
## ⚡ Caching Layer (Redis)
To enhance performance and reduce database load, the application integrates **Redis** as a distributed caching layer. Frequently accessed data that doesn't change often is cached in-memory, leading to significantly faster API responses for repeat requests.
The caching logic is implemented in the Spring Boot backend using Spring's Cache Abstraction. When data is modified (e.g., a user joins a new room or an invitation is accepted), the relevant caches are automatically **evicted** (cleared) to prevent stale data and ensure consistency across the application.
The following data is cached:
| Cache Name | Cached Data | Description | Relevant API Endpoints |
| :---------------------- | :-------------------- | :------------------------------------------- | :--------------------------------------------------- |
| `joinedRooms` | List of rooms | A user's list of joined chat rooms. | `GET /api/v1/room/joined/{userName}` |
| `createdRooms` | List of rooms | A user's list of created chat rooms. | `GET /api/v1/room/created/{userName}` |
| `invitationsBySender` | List of invitations | A user's pending sent invitations. | `GET /api/v1/invitation/sent/{userName}` |
| `invitationsByReceiver` | List of invitations | A user's pending received invitations. | `GET /api/v1/invitation/received/{userName}` |
| `checkIfEntryPossible` | Boolean | Verifies if a user is a member of a room. | `GET /api/v1/room/is-joined/{roomId}/{userName}` |
| `roomCreator` | String (username) | The creator of a specific room. | `GET /api/v1/room/creator/{roomId}` |
---
## 🔌 WebSocket API Endpoints
The application uses STOMP over WebSocket for real-time communication. Clients can send messages to the destinations listed below to perform actions, and they should subscribe to the broadcast topics to receive real-time updates.
| Endpoint | Description | Payload | Broadcast Topic(s) |
| :-------------------------- | :------------------------------------------------------------------------ | :------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `/sendMessage/{roomId}` | Sends a chat message to a specific room. The returned message is broadcasted to all members. | `MessageDto` | `/topic/rooms/{roomId}` |
| `/createRoom/{roomId}` | Creates a new public or private chat room. | `CreateRoomDto` | `/topic/rooms/{userName}` (Notifies the creator to join the new room) |
| `/addRoom/{userName}/{roomId}` | Adds a user to an existing public room. | None | `/topic/rooms/{userName}` (Notifies the user to join the new room) |
| `/createInvitation` | Sends an invitation to a user to join a private room. | `CreateInvitationDto` | `/topic/sentInvitations/{sender}`
`/topic/receivedInvitations/{receiver}` |
| `/updateStatusOfInvitation` | Updates an invitation's status to `ACCEPTED` or `REJECTED`. | `UpdateInvitationStatusDto` | **If Accepted:**
`/topic/remove/sentInvitations/{sender}`
`/topic/rooms/{sender}`
**If Rejected:**
`/topic/remove/sentInvitations/{sender}` |
---
## đź“‚ Project Structure
This repository acts as a parent project that orchestrates the backend and frontend using Docker. The actual source code for the frontend and backend services resides in separate Git submodules.
* `chat-application-backend/`: The Spring Boot backend service.
* `chat-application-frontend/`: The React and TypeScript frontend application.
* `docker-compose.yml`: The Docker Compose file to build and run the entire application stack.
---
## 🚀 Getting Started
You can get the entire application running on your local machine with just a few commands, thanks to Docker.
### Prerequisites
* [Git](https://git-scm.com/)
* [Docker](https://www.docker.com/products/docker-desktop/)
* [Docker Compose](https://docs.docker.com/compose/install/)
### Method 1: Build from Source
1. **Clone the repository with its submodules:**
```bash
git clone --recurse-submodules [https://github.com/saadmdsabah/Discord-Clone-using-Spring-boot-Stomp-Client-and-React-JS.git](https://github.com/saadmdsabah/Discord-Clone-using-Spring-boot-Stomp-Client-and-React-JS.git)
```
2. **Navigate into the project directory:**
```bash
cd Discord-Clone-using-Spring-boot-Stomp-Client-and-React-JS
```
3. **Build and run the application using Docker Compose:**
```bash
docker-compose up --build
```
This will build the custom Docker images from the source code and then start all the services.
### Method 2: Use Pre-built Images (Faster)
If you don't need to build the images from the source code, you can pull them directly from Docker Hub.
1. **Pull the latest pre-built images:**
```bash
docker pull saadsabahuddin/discord-clone-backend:latest
docker pull saadsabahuddin/discord-clone-frontend:latest
```
2. **Clone the repository (submodules are not needed):**
```bash
git clone [https://github.com/saadmdsabah/Discord-Clone-using-Spring-boot-Stomp-Client-and-React-JS.git](https://github.com/saadmdsabah/Discord-Clone-using-Spring-boot-Stomp-Client-and-React-JS.git)
cd Discord-Clone-using-Spring-boot-Stomp-Client-and-React-JS
```
3. **Start the application:**
```bash
docker-compose up
```
This will use the images you pulled instead of building them locally.
### Access the Application
Once the containers are running (using either method), open your web browser and navigate to:
**[http://localhost:5173](http://localhost:5173)**
---
## Submodule Details
For more detailed information about the frontend or backend implementation, please visit their respective repositories.
* Backend Repository: **[saadmdsabah/chat-application-backend](https://github.com/saadmdsabah/chat-application-backend/tree/a6dc5b7f7631b29113003c9eb6a659a1896b0bad)**
* Frontend Repository: **[saadmdsabah/chat-application-frontend](https://github.com/saadmdsabah/chat-application-frontend/tree/47bbe350c7a3f3db73b68dea057fdb28f53f7f3f)**
## đź“ś License
This project is licensed under the MIT License. See the LICENSE file for more details.