Chat Sync Application

An Real Time browser based application.

Table of Contents

1. About The Project
   • Technologies
2. Getting Started
3. Features
4. Database Design
5. Application Architecture
6. Websocket Message flows
   1. One to One Message
   2. Group Message
7. Websocket Events Screenshots
8. Application Screenshots
   1. Login & Registration
   2. Profile
   3. Contacts
   4. Groups
   5. Chats
   6. Logout
9. Future Enhancements

About The Project

Chat sync is a simple yet powerful tool for real-time communication. It allows users to connect with each other over the internet and exchange messages seamlessly. Whether you're looking to chat with friends, colleagues, or customers, our application provides a reliable platform for communication.

(back to top)

Technolgy Used

The following technologies and tools have been equipped to develop this project -

• Spring Boot - Spring Data JPA, Spring Web Socket
• Angular
• MySQL

(back to top)

Getting Started

To get a local copy up and running follow these simple example steps.

• java - jdk 21 and above
• npm

  npm install npm@latest -g

• MySQL
• Run Angular Application with

  ng serve
  

• Run Spring Boot application with

  ./mvnw
  

(back to top)

Features

• Real-time Messaging: Send and receive messages instantly without any delay.
• User Authentication: Secure login system to ensure only authorized users can access the chat.
• User Profiles: Customize your profile with a username and avatar.
• Group Chats: Create or join group conversations with multiple participants.
• Message History: View past messages for context and reference.
• File Sharing: Share files such as images, documents, etc., within the chat.
• Notifications: Receive notifications for new messages and mentions.

(back to top)

Database Design

(back to top)

Application Architecture

(back to top)

Websocket Message Flows

One To One Message

Group Message

(back to top)

Websocket Events Screenshots

Websocket subscribe event

Sent One to one message event

Sent Group message event

One to one message sent confirm received event

Receive one to one msg event

Receive group msg event

(back to top)

Application Screenshots

Login Registration

Registration

Login

Activation Request

(back to top)

Profile

(back to top)

Contacts

contacts tab

contact groups

contact chat confirm

contact delete confirm

global contacts tab

global contact groups

global contact add confirm

(back to top)

Groups

groups tab

group members dialog

add new member dialog

leave group confirm

delete group confirm

new group tab

new group filled page

(back to top)

Chats

Chat Page default

Receive One to One Msg, Inactive thread

Receive Grp Msg, Inactive thread

Open Inactive Msg thread

Open Inactive Grp thread

(back to top)

Logout

Logout confirm

(back to top)

Future Enhancements

• File & Image sharing support for one to one and group messaging
• Better UI UX design
• Websocket / REST APIs optimization & improvements

(back to top)