ChatMate – A Real-Time Chat Application

ChatMate is a real-time chat application built with Spring Boot, WebSocket (STOMP), Spring Messaging, and React.js. It allows users to join a public chat room, send private messages, and manage their online/offline status seamlessly.

🌐 Live Project

🎥 Demo Video

📑 Table of Contents

• Features
• Tech Stack
• Project Structure
• Screenshots
• Demo Video
• Usage
• Examples
• Troubleshooting
• Contributors
• License

✨ Features

• Real-time messaging using WebSocket (STOMP protocol)
• Public chat room for group discussions
• Private messaging between users
• Online/Offline status tracking
• User-friendly React.js frontend
• Notification of user join/leave events
• See when others are typing..
• Send Emojis
• Spring Boot backend with scalable architecture

🛠 Tech Stack

Backend (Spring Boot)

• Java 17 – Primary programming language
• Spring Boot 3.x – Application framework
• Spring Security – Authentication and authorization
• Spring Data JPA – Database abstraction layer
• WebSocket – Real-time bidirectional communication
• JWT – JSON Web Tokens for stateless authentication
• Maven – Dependency management and build tool
• WebSTOMP & Spring Messaging – Real-time messaging

Database

• MySQL – Primary relational database for production
• H2 Database – In-memory database for testing

Frontend (Based on project structure)

• React.js – Frontend framework
• JavaScript – Type-safe JavaScript development
• WebSocket Client – Real-time communication
• REST API Integration – HTTP client for API calls

DevOps & Tools

• Docker – Containerization
• Spring Boot Test – Integration testing
• Lombok – Reduced boilerplate code
• Git & GitHub – Version control

📂 Project Structure

ChatMate-A-Real-Time-Chat-Application/
│── backend/       # Spring Boot backend (WebSocket, messaging, REST APIs)
│── frontend/      # React.js frontend (UI components, chat interface)
│── README.md      # Project documentation
  

📸 Screenshots

Main Page View : Showcase before login or signup page.

Login Page: User authentication interface

Public Chat Room: Group conversation interface

Private Messaging: One-on-one conversation view

User List: Shows online/offline status of all users

Typing Indicator: Shows when someone is typing

Emoji Picker: Easy emoji selection interface

▶️ Usage

1. Start the backend server.
2. Start the frontend application.
3. Open the app in your browser and:
   • Join the public chat room
   • Send private messages to specific users
   • See who's online/offline

💡 Examples

• Public Chat: Multiple users join and see all messages in real time.
• Private Messaging: Send a direct message to another user using their username.
• Status Tracking: Instantly see when a user comes online or goes offline.

🐞 Troubleshooting

• If WebSocket doesn't connect, check backend server logs.
• Ensure backend runs on port 8080 and frontend connects correctly.
• Run npm install again if frontend dependencies fail.

👨‍💻 Contributors

• SAdhikary2 – Creator & Developer

📜 License

This project is licensed under the MIT License

↑ Back to top