websocket-chat 💬

This real-time messaging app features instant message sending, and persistent message storage. It supports user presence indicators, chat creation and management (including group chats), and some chat filtering. Users can search for contacts, send messages, and receive notifications, all while enjoying a responsive design with Vue 3, TypeScript, and TailwindCSS. Built with Spring Boot and Java 21, the app ensures real-time updates through WebSockets. The objective of this project was to learn about WebSockets and dive deeper into Vue and TailwindCSS.

How it works

The application uses Spring Boot 3, Java 21 and WebSockets for all its backend architecture, and Vue 3 with tailwind CSS for UI and frontend logic.

Back-End

Here's the functionalities of the backend API:

• User Authentication via JWT: It lets users sign in securely using JSON Web Tokens (JWT).
• Realtime message sending: Instantly relays messages to recipients via WebSocket connections and stores them in the database for future retrieval and access.
• User status monitoring: Tracks user connections and disconnections in real-time, updating their online/offline status.
• Notification handling: Sends notifications for new messages to users, regardless of their online status, and stores them in the database if a user is not currently active.

Front-End

Here's the functionalities of the front-end UI:

• Authentication: Login and register page.
• Realtime message sending: Displays incoming messages in real-time as they arrive.
• Filter and Search Chats: Allows users to view conversations by type, such as group chats, private messages, or all chats, for easier organization and navigation.
• Chat History: Loads and displays previous messages when a user opens a chat, allowing them to view the conversation history.
• User status monitoring: Dynamically updates the UI to reflect the user's online/offline status.
• Notification handling: Displays real-time notifications for incoming messages, even if the app is in the background.

What's Under the Hood?

Here's the technologies used for the implementation:

• Spring Data JPA for efficient data management.
• Spring Security with JWT tokens for authentication.
• WebSocket with STOMP for realtime messaging.
• MySql for the database.
• Flyway for the database migrations.
• modelmapper for the DTOs.
• Vue 3 with Typescript for the UI and front-end logic.
• Tailwind CSS for styling the components.

What’s Next?

Here's some future funcionalities to be implemented:

• User registration: Processes user information, verifies it, and stores it in the database to create a new profile and grant access to the app.
• User Search: Allows users to find and select contacts by username to start a new conversation or send messages directly.
• Create and Manage Group Chats: Enables users to start new group chats by selecting participants and naming the group, as well as members.

How do i run it?

Working on docker support.