💬 MsgKaro — Real-Time Chat Application

A full-stack real-time chat application built with React on the frontend and Spring Boot on the backend, enabling users to create or join chat rooms and exchange messages instantly via WebSocket.

---

🖼️ Features

• Create & Join Rooms — Enter a unique Room ID to create a new chat room or join an existing one
• Real-Time Messaging — Bi-directional live communication powered by WebSocket (STOMP over SockJS)
• Persistent Message History — Messages are stored in MongoDB and loaded on room entry with pagination support
• User Avatars — Color-coded initials-based avatars generated per username
• Live Connection Status — Pulsing indicator showing active WebSocket connection
• Responsive Design — Works on both desktop and mobile with an adaptive header layout
• Dark Mode UI — Deep forest green aesthetic with animated firefly canvas background

---

🛠️ Tech Stack

Frontend

Tool	Version
React	19
Vite	7
Tailwind CSS	4
SockJS Client	1.6
STOMP.js	7
Axios	1.13
React Router	7
React Hot Toast	2.6

Backend

Tool	Version
Spring Boot	4.0.1
Spring WebSocket (STOMP)	—
Spring Data MongoDB	—
Lombok	—
Java	17+

Database

• MongoDB (local instance on port 27017, database: chatapp)

---

📁 Project Structure

Chat Web Application/
├── frontend-chat/               # React + Vite frontend
│   ├── src/
│   │   ├── components/
│   │   │   ├── ChatPage.jsx     # Main chat room UI
│   │   │   └── JoinCreateChat.jsx  # Room entry page
│   │   ├── config/
│   │   │   ├── AxiosHelper.js   # Axios base URL config
│   │   │   ├── Helper.js        # timeAgo utility
│   │   │   └── Routes.jsx       # App routes
│   │   ├── context/
│   │   │   └── ChatContext.jsx  # Global state (roomId, user, connected)
│   │   ├── services/
│   │   │   └── RoomService.js   # API calls (create/join/messages)
│   │   └── main.jsx
│   └── package.json
│
└── chat-app-backend/            # Spring Boot backend
    └── src/main/java/com/chat/app/
        ├── config/
        │   └── WebSocketConfig.java   # STOMP + SockJS configuration
        ├── controllers/
        │   ├── RoomController.java    # REST: create/join rooms, get messages
        │   └── ChatController.java    # WebSocket: handle & broadcast messages
        ├── entities/
        │   ├── Room.java              # MongoDB document
        │   └── Message.java           # Embedded message model
        ├── repositories/
        │   └── RoomRepository.java
        └── services/
            └── RoomService.java

---

🚀 Getting Started

Prerequisites

• Node.js v18+
• Java 17+
• Maven 3.8+
• MongoDB running locally on port 27017

---

1. Start the Backend

cd "chat-app-backend/chat-app-backend"
./mvnw spring-boot:run

The backend starts on http://localhost:8080.

---

2. Start the Frontend

cd frontend-chat
npm install
npm run dev

The frontend starts on http://localhost:5173.

---

🔌 API Reference

REST Endpoints

Method	Endpoint	Description
POST	/api/v1/rooms	Create a new room (body: plain text Room ID)
GET	/api/v1/rooms/{roomId}	Join / get room details
GET	/api/v1/rooms/{roomId}/messages?page=0&size=20	Get paginated message history

WebSocket

Type	Destination	Description
Connect	ws://localhost:8080/chat (via SockJS)	Establish connection
Subscribe	/topic/room/{roomId}	Receive messages for a room
Publish	/app/sendMessage/{roomId}	Send a message to a room

Message payload:

{
  "sender": "username",
  "content": "Hello!",
  "roomId": "my-room"
}

---

⚙️ Configuration

Backend — src/main/resources/application.properties:

spring.application.name=chat-app-backend
spring.data.mongodb.uri=mongodb://localhost:27017/chatapp

Frontend — src/config/AxiosHelper.js:

export const baseURL = "http://localhost:8080";

CORS is configured to allow http://localhost:5173 on both the REST controller and the WebSocket endpoint.

---

📦 Build for Production

Frontend:

cd frontend-chat
npm run build
# Output: frontend-chat/dist/

Backend:

cd chat-app-backend/chat-app-backend
./mvnw clean package
java -jar target/chat-app-backend-0.0.1-SNAPSHOT.jar

---

📝 License

This project is for educational/personal use.