{"id":32532702,"url":"https://github.com/saadmdsabah/discord-clone-using-spring-boot-stomp-client-and-react-js","last_synced_at":"2026-04-14T05:33:51.729Z","repository":{"id":319977826,"uuid":"1080286581","full_name":"saadmdsabah/Discord-Clone-using-Spring-boot-Stomp-Client-and-React-JS","owner":"saadmdsabah","description":"A full-stack, real-time chat application inspired by Discord, featuring a containerized architecture for easy setup and seamless communication. ","archived":false,"fork":false,"pushed_at":"2025-10-22T08:48:07.000Z","size":37,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-11-16T05:03:13.548Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"","language":null,"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/saadmdsabah.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":"2025-10-21T06:36:37.000Z","updated_at":"2025-10-22T08:48:11.000Z","dependencies_parsed_at":"2025-10-21T15:17:02.145Z","dependency_job_id":"6d5433e7-f8e9-4eb2-a851-9166ff1406fb","html_url":"https://github.com/saadmdsabah/Discord-Clone-using-Spring-boot-Stomp-Client-and-React-JS","commit_stats":null,"previous_names":["saadmdsabah/discord-clone-using-spring-boot-stomp-client-and-react-js"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/saadmdsabah/Discord-Clone-using-Spring-boot-Stomp-Client-and-React-JS","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saadmdsabah%2FDiscord-Clone-using-Spring-boot-Stomp-Client-and-React-JS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saadmdsabah%2FDiscord-Clone-using-Spring-boot-Stomp-Client-and-React-JS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saadmdsabah%2FDiscord-Clone-using-Spring-boot-Stomp-Client-and-React-JS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saadmdsabah%2FDiscord-Clone-using-Spring-boot-Stomp-Client-and-React-JS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/saadmdsabah","download_url":"https://codeload.github.com/saadmdsabah/Discord-Clone-using-Spring-boot-Stomp-Client-and-React-JS/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saadmdsabah%2FDiscord-Clone-using-Spring-boot-Stomp-Client-and-React-JS/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31784253,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T02:24:21.117Z","status":"ssl_error","status_checked_at":"2026-04-14T02:24:20.627Z","response_time":153,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["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"],"created_at":"2025-10-28T12:56:05.070Z","updated_at":"2026-04-14T05:33:51.705Z","avatar_url":"https://github.com/saadmdsabah.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Discord Clone 🚀\r\n\r\nA 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.\r\n\r\n\u003cimg width=\"1401\" height=\"412\" alt=\"image\" src=\"https://github.com/user-attachments/assets/5dd27a47-f7c4-4bde-91ba-fc1c3ca9a932\" /\u003e\r\n\r\n## 🏛️ Architecture Overview\r\n\r\nThe 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.\r\n\r\n* **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.\r\n\r\n* **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).\r\n\r\n* **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**.\r\n\r\n* **Database**: **MongoDB** database acts as the primary data store, persisting all user information, group details, and message history.\r\n\r\n* **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.\r\n\r\n---\r\n\r\n## 💻 Tech Stack\r\n\r\n| Area      | Technology                                                                                                                                                                                                                                                                                       |\r\n| :-------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| **Backend** | ![Java](https://img.shields.io/badge/Java-21-blue) ![Spring Boot](https://img.shields.io/badge/Spring_Boot-3.x-brightgreen) ![WebSocket](https://img.shields.io/badge/WebSocket-STOMP-orange) ![JWT](https://img.shields.io/badge/JWT-Authentication-black)                                          |\r\n| **Frontend**| ![TypeScript](https://img.shields.io/badge/TypeScript-3178C6) ![React](https://img.shields.io/badge/React-18-blue) ![Vite](https://img.shields.io/badge/Vite-JS-yellow) ![Redux](https://img.shields.io/badge/Redux-Toolkit-764ABC) ![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC) ![StompJS](https://img.shields.io/badge/Stomp.js-client-red) ![Hot Toast](https://img.shields.io/badge/React_Hot_Toast-FF4154) |\r\n| **Database**| ![MongoDB](https://img.shields.io/badge/MongoDB-blue)                                                                                                                                                                                                                                            |\r\n| **DevOps** | ![Docker](https://img.shields.io/badge/Docker-blue) ![Nginx](https://img.shields.io/badge/Nginx-green)                                                                                                                                                                                             |\r\n\r\n---\r\n\r\n## ⚙️ Application Workflow\r\n\r\nThe following diagrams illustrate the core operational flows of the application.\r\n\r\n### User Authentication \u0026 Session Management\r\n\r\n\u003cimg width=\"1402\" height=\"804\" alt=\"Screenshot 2025-10-21 135510\" src=\"https://github.com/user-attachments/assets/bbe6c706-1dd0-4de5-86fa-096d6bdbf9e3\" /\u003e\r\n\r\nThe 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.\r\n\r\n### Group Management \u0026 Join Requests\r\n\r\n\u003cimg width=\"1237\" height=\"755\" alt=\"Screenshot 2025-10-21 140217\" src=\"https://github.com/user-attachments/assets/52df9c0d-0404-44c3-944a-f93f954239f1\" /\u003e\r\n\r\nUsers 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.\r\n\r\n### Real-Time Messaging\r\n\r\n\u003cimg width=\"1797\" height=\"551\" alt=\"Screenshot 2025-10-21 140334\" src=\"https://github.com/user-attachments/assets/45a12f35-cca4-41e6-a06c-7b2f89566a9f\" /\u003e\r\n\r\nOnce 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.\r\n\r\n### User Logout\r\n\r\n\u003cimg width=\"1339\" height=\"242\" alt=\"Screenshot 2025-10-21 140035\" src=\"https://github.com/user-attachments/assets/d32668ec-b0f9-4fe0-853e-5f6af208bc60\" /\u003e\r\n\r\nDuring 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.\r\n\r\n---\r\n\r\n## ⚡ Caching Layer (Redis)\r\n\r\nTo 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.\r\n\r\nThe 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.\r\n\r\nThe following data is cached:\r\n\r\n| Cache Name              | Cached Data           | Description                                  | Relevant API Endpoints                               |\r\n| :---------------------- | :-------------------- | :------------------------------------------- | :--------------------------------------------------- |\r\n| `joinedRooms`           | List of rooms         | A user's list of joined chat rooms.          | `GET /api/v1/room/joined/{userName}`                 |\r\n| `createdRooms`          | List of rooms         | A user's list of created chat rooms.         | `GET /api/v1/room/created/{userName}`                |\r\n| `invitationsBySender`   | List of invitations   | A user's pending sent invitations.           | `GET /api/v1/invitation/sent/{userName}`             |\r\n| `invitationsByReceiver` | List of invitations   | A user's pending received invitations.       | `GET /api/v1/invitation/received/{userName}`         |\r\n| `checkIfEntryPossible`  | Boolean               | Verifies if a user is a member of a room.    | `GET /api/v1/room/is-joined/{roomId}/{userName}`     |\r\n| `roomCreator`           | String (username)     | The creator of a specific room.              | `GET /api/v1/room/creator/{roomId}`                  |\r\n\r\n---\r\n\r\n## 🔌 WebSocket API Endpoints\r\n\r\nThe 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.\r\n\r\n| Endpoint                    | Description                                                               | Payload                   | Broadcast Topic(s)                                                                                                                                                                 |\r\n| :-------------------------- | :------------------------------------------------------------------------ | :------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| `/sendMessage/{roomId}`     | Sends a chat message to a specific room. The returned message is broadcasted to all members. | `MessageDto`              | `/topic/rooms/{roomId}`                                                                                                                                            |\r\n| `/createRoom/{roomId}`      | Creates a new public or private chat room.                                | `CreateRoomDto`           | `/topic/rooms/{userName}` (Notifies the creator to join the new room)                                                                                                              |\r\n| `/addRoom/{userName}/{roomId}` | Adds a user to an existing public room.                                  | None                      | `/topic/rooms/{userName}` (Notifies the user to join the new room)                                                                                                                 |\r\n| `/createInvitation`         | Sends an invitation to a user to join a private room.                     | `CreateInvitationDto`     | `/topic/sentInvitations/{sender}` \u003cbr\u003e `/topic/receivedInvitations/{receiver}`                                                                                                    |\r\n| `/updateStatusOfInvitation` | Updates an invitation's status to `ACCEPTED` or `REJECTED`.               | `UpdateInvitationStatusDto` | **If Accepted:** \u003cbr\u003e `/topic/remove/sentInvitations/{sender}` \u003cbr\u003e `/topic/rooms/{sender}` \u003cbr\u003e\u003cbr\u003e **If Rejected:** \u003cbr\u003e `/topic/remove/sentInvitations/{sender}`                   |\r\n\r\n---\r\n\r\n## 📂 Project Structure\r\n\r\nThis 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.\r\n\r\n* `chat-application-backend/`: The Spring Boot backend service.\r\n* `chat-application-frontend/`: The React and TypeScript frontend application.\r\n* `docker-compose.yml`: The Docker Compose file to build and run the entire application stack.\r\n\r\n---\r\n\r\n## 🚀 Getting Started\r\n\r\nYou can get the entire application running on your local machine with just a few commands, thanks to Docker.\r\n\r\n### Prerequisites\r\n\r\n* [Git](https://git-scm.com/)\r\n* [Docker](https://www.docker.com/products/docker-desktop/)\r\n* [Docker Compose](https://docs.docker.com/compose/install/)\r\n\r\n### Method 1: Build from Source\r\n\r\n1.  **Clone the repository with its submodules:**\r\n    ```bash\r\n    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)\r\n    ```\r\n\r\n2.  **Navigate into the project directory:**\r\n    ```bash\r\n    cd Discord-Clone-using-Spring-boot-Stomp-Client-and-React-JS\r\n    ```\r\n\r\n3.  **Build and run the application using Docker Compose:**\r\n    ```bash\r\n    docker-compose up --build\r\n    ```\r\n    This will build the custom Docker images from the source code and then start all the services.\r\n\r\n### Method 2: Use Pre-built Images (Faster)\r\n\r\nIf you don't need to build the images from the source code, you can pull them directly from Docker Hub.\r\n\r\n1.  **Pull the latest pre-built images:**\r\n    ```bash\r\n    docker pull saadsabahuddin/discord-clone-backend:latest\r\n    docker pull saadsabahuddin/discord-clone-frontend:latest\r\n    ```\r\n\r\n2.  **Clone the repository (submodules are not needed):**\r\n    ```bash\r\n    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)\r\n    cd Discord-Clone-using-Spring-boot-Stomp-Client-and-React-JS\r\n    ```\r\n\r\n3.  **Start the application:**\r\n    ```bash\r\n    docker-compose up\r\n    ```\r\n    This will use the images you pulled instead of building them locally.\r\n\r\n### Access the Application\r\n\r\nOnce the containers are running (using either method), open your web browser and navigate to:\r\n**[http://localhost:5173](http://localhost:5173)**\r\n\r\n---\r\n\r\n## Submodule Details\r\n\r\nFor more detailed information about the frontend or backend implementation, please visit their respective repositories.\r\n\r\n* Backend Repository: **[saadmdsabah/chat-application-backend](https://github.com/saadmdsabah/chat-application-backend/tree/a6dc5b7f7631b29113003c9eb6a659a1896b0bad)**\r\n\r\n* Frontend Repository: **[saadmdsabah/chat-application-frontend](https://github.com/saadmdsabah/chat-application-frontend/tree/47bbe350c7a3f3db73b68dea057fdb28f53f7f3f)**\r\n\r\n## 📜 License\r\n\r\nThis project is licensed under the MIT License. See the LICENSE file for more details.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaadmdsabah%2Fdiscord-clone-using-spring-boot-stomp-client-and-react-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaadmdsabah%2Fdiscord-clone-using-spring-boot-stomp-client-and-react-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaadmdsabah%2Fdiscord-clone-using-spring-boot-stomp-client-and-react-js/lists"}