HootOut: A web application for Instant Messaging

HootOut is a real-time messaging application.

Send direct messages to friends or join a Server to chat with multiple people. Organize your conversations in Channels and send messages to other Server members.

This is a work in progress. In this Phase 1, only functional and technical goals are defined. Implementation has not yet begun.

Goals:

HootOut aims to be an instant messaging application where you can chat with direct messages, or join a server and chat with many people at the same time.

Functional Goals:

The goals of this project are that users can send messages to other users. They can send them via direct messages or in group chats called "Servers".

Add other users as friends so you can send direct messages to them.
Send emojis, gifs, images, videos, audio and files.
Create or join a server and chat with multiple people at the same time.
Organize server conversations by having different Channels.
Manage the server permissions by creating and assigning roles to members.
Add third party applications to your servers to extend the functionality.

Technical goals:

The main technical challenge is the real time nature of the application. Serving messages to multiple clients, preventing synchronization issues, connecting and disconnecting clients, clients with unstable connections.

Frontend SPA in Vue.js.
Backend REST API and Websockets with ASP.NET Core.
Message broker with RabbitMQ to handle real time traffic and horizontal scaling.
PostgreSQL as the main database, and Elasticsearch for message queries.
Automated backend and frontend testing, and code analysis with Sonar.
GitHub Flow for git versioning and GitHub Projects with a Kanvan board for project management.
Workflow automations with CI through GitHub Actions.
Docker and Docker compose for deployments.

Approach

This project is designed as a two-parts project. The first one is the development of the Instant Messaging application, and the second part is the cloud deployment of the application, ensuring scalability, and continuous deployment.

This is the approach and planning of the first project:

Phase 1: Definition of functionalities and Screens of the application (September 15)
Phase 2: Repository, CI and Sonar configuration (October 1)
Phase 3: Basic functionality with tests: Unit tests, Integration tests and End to End tests (November 1)
Phase 4: Version 1.0 - Full functionality and Docker (December 15)
Phase 5: Memory (January 15)

Grantt Diagram:

gantt
    title Project Timeline: Sep 2026 - Jan 2027
    dateFormat  YYYY-MM-DD
    axisFormat  %b %d 

    section Phase 1 
    Requirements and Screens    :a1, 2026-09-04, 2026-09-15

    section Phase 2
    Repository, CI and Sonar    :a2, 2026-09-15, 2026-10-01

    section Phase 3
    Basic Functionality         :a3, 2026-10-01, 2026-11-01

    section Phase 4
    Version 1.0                 :a4, 2026-11-01, 2026-12-15

    section Phase 5
    Memory                      :a5, 2026-12-15, 2027-01-15

Detailed Functionality:

Basic Functionality:

Unregistered users will have access only to public facing pages, such as the Landing Page, Register and Login.
Users can register with an email (unique), username (unique) and a password. They will be able to upload a profile picture after registration.
Users will need to confirm their email address to activate their account.
Users can send a friend request to another user by username.
Two users that are friends can send direct messages between them.
Users can create a group chat, called "Server. The Server will have a server name, a short description and a Server picture.
The creator of the Server will be able to edit name, description and picture. They will be able to delete the Server.
Users that join a Server, will be able to add users to a Server.
Users inside a Server will be able to create, edit and delete Channels inside a Server. A Channel will only have a name.
Users will be able to send messages inside a Channel of a Server they are part of.
All messages will have the username, the profile picture, the local time when the message was stored on the server and the message content.
Messages can include text, pictures, GIFs, videos, audio files, and documents. The user will be able to download them.
Messages composed of text, pictures, GIFs, videos or audio will be displayed on the applications.
Users will have a connection status. These statuses are connected or disconnected. Users will be able to see friend and Server members status.
Messages sent on a Channel will be sent to all the Server members with status connected.
When a disconnected user connects, it will receive the last messages of a Server. After that, the user will be able to fetch older messages in a paginated way.

Intermediate Functionality:

Users will be able to upload custom Emojis and Stickers to a Server.
Introduction of Rol and permissions on Servers.
Users will be able to create Roles in a Server. A role will have a name and a list of permissions.
There will be a fixed set of permissions for Servers and Channels. Examples are:
Edit/delete a Server.
Create, edit and delete a Channel
Delete other User messages on the Server.
Invite/kick Users from a Server.
When creating a Server, the User will have the role "Server Admin" with all the permissions.
When a user joins a Server, he will have a default Rol "member".
A User can have multiple roles in a Server.

Advanced Functionality:

Integration with "Bots" and Third-Party Applications.
Authorization and Authentication of Bots will be made via tokens.
A Bot will be able to join a Server as a member and will have the rol "Bot".
Bots can have additional roles like any other member.
Users will be able to send commands on a Server on the chat. Commands will start with "/".
Third Party Applications will be able to register commands to a Server.
Bots can use the API to interact with the Server they are part of.
Bots will be able to send and receive messages in real time. (Either through websockets or some type of Endpoint Callback).

Analysis:

Screens and navigation:

Landing Page:

Home page of the application. From here users can Login or Register.

Login:

Register:

Direct Message:

After Login or Registration, they get to the Direct Messages page. Here users can chat with the users on their Friend List, by selecting them on their friend list. Before selecting any friend to chat.

Direct Message with a friend.

Friend Requests:

Users can send friend requests and see their friend requests by clicking on the icons to the right of "Friends: "

Send Friend Request.

Accept Friend Requests.

User Profile:

By clicking on their username and profile picture at the top right, users can go to their profile. There they can update their profile picture or delete their account.

Clicking their username or profile picture. They can also Log out.

User profile.

Servers:

At the left, there will be the Server list. The profile picture of the Server will be shwon there. At the bottom there will be a button to create a new Server.

Create Server.

Server messages chat. A list of Channels will be at the left, with a button to create a new Channel.

Server Configuration:

Clicking on the Server Settings icon, will open the Server configuration. Here users can change the Server profile picture, the Server name, the description and manage Roles, Server Members, Emojis and Stickers.

Server Settings:

Server settings.

Server Roles:

List of roles on a Server.

Edit Rol properties.

Edit Rol Permissions.

Edit Rol Members.

Add Member to Rol.

Server Members:

List of Server Members

Similar to Add Friend, close to the Server Configuration icon there is an icon to add Users to a Server.

Entities:

The aim of this section is to identify the primary entities that will be used on the application, their attributes and their relations. Here is a short description of the main entities:

User: Registered user of the platform, with unique username and email.
Server: Group chat that has Channels.
Channel: Where users send messages inside a Server. Belongs to a Server.
DirectMessage: Direct message between two users. The message is stored on the Message table.
ChannelMessage: Message sent in a Channel. The message is stored on the Message table.
Message: The text content of the message. Messages attachments will be on its own table.
MessageAttachment: File attatchment on a message.
MediaFile: The information of a file uploaded to the platform. It stores information on how to retreive it, not the file itself. User profile pictures, server profile pictures, emojis, stickers and message attachments are stored in this table. It also stores the uploader/owner of this file.
ServerMember: Each entry represents that a user is member of a Server. A user can be in many Servers, but only once in the same Server.
UserRelation: Used to represent if two users are friends. The status is if a friend request is pending, accepted or rejected.
ServerRol: Rol created on a Server.
UserRol: Rol assigned to a User on a Server.
RolPermission: Each entry is a permission assigned to a Rol.
Permission: The list of permissions that can be assigned to a Rol. These are the same for the whole application and cannot be changed by users.
ServerEmoji: Emojis uploaded to a Server.
StickerEmoji: Stickers uploaded to a Server.

Entity attributes:

User:

Id	UserName	Email	Password	ProfilePictureId	Deleted	CreatedAt	ModifiedAt

Server:

Id	Name	Description	ProfilePictureId	OwnerId	Deleted	CreatedAt	ModifiedAt

Channel:

Id	Name	ServerId	Deleted	CreatedAt	ModifiedAt

DirectMessage:

Id	SenderId	ReceiverId	MessageId	CreatedAt

ChannelMessage:

Id	SenderId	ChannelId	MessageId	CreatedAt

Message:

Id	Content	Deleted	CreatedAt	ModifiedAt

MessageAttachment:

Id	MessageId	MediaFileId	MediaType	CreatedAt

MediaFile:

Id	FileName	FileSize	Md5	FileLocation	OwnerId	CreatedAt	ModifiedAt

ServerMember:

Id	UserId	ServerId	Deleted	CreatedAt	ModifiedAt

UserRelation:

Id	User1Id	User2Id	Status	CreatedAt	ModifiedAt

ServerRol:

Id	ServerId	Name	Deleted	CreatedAt	ModifiedAt

UserRol:

Id	UserId	RolId	CreatedAt	ModifiedAt

RolPermission:

Id	ServerRolId	PermissionId	ModifiedAt

Permission:

Id	Name	Value	CreatedAt	ModifiedAt

ServerEmoji:

Id	Name	ServerId	MediaFileId	CreatedAt	ModifiedAt

ServerSticker:

Id	Name	ServerId	MediaFileId	CreatedAt	ModifiedAt

Entity Relations:

erDiagram

  USER ||--o{ USER_RELATION: User1
  USER ||--o{ USER_RELATION: User2

  USER ||--o{ DIRECT_MESSAGE: Sends
  USER ||--o{ DIRECT_MESSAGE: Receives

  USER ||--|| MEDIA_FILE: ProfilePicture

  SERVER ||--|{ CHANNEL: has
  CHANNEL ||--o{ CHANNEL_MESSAGE: has_multiple
  SERVER ||--|| MEDIA_FILE: ProfilePicture
  SERVER ||--o{ SERVER_EMOJI: has
  SERVER ||--o{ SERVER_STICKER: has
  SERVER ||--|{ SERVER_MEMBER: has
  USER }o--o{ SERVER_MEMBER: are
  SERVER ||--|{ SERVER_ROL: has
  SERVER_ROL ||--o{ PERMISSION: has

  USER_ROL }o--|{ SERVER_ROL: isAssigned
  USER_ROL ||--|| USER: user

  CHANNEL_MESSAGE ||--|| MESSAGE: has
  MESSAGE ||--o{ MESSAGE_ATTACHMENT: can_have
  MESSAGE_ATTACHMENT ||--|| MEDIA_FILE: mediaFIle

  USER {
    int Id
    string UserName
    string Email
    string Password
    int ProfilePictureId
    boolean Deleted
    date CreatedAt
    date ModifiedAt
  }

  SERVER {
    int Id
    string Name
    string Description
    int ProfilePictureId
    int OwnerId
    boolean Deleted
    date CreatedAt
    date ModifiedAt
  }

  CHANNEL {
    int Id
    string Name
    int ServerId
    boolean Deleted
    date CreatedAt
    date ModifiedAt
  }

  DIRECT_MESSAGE {
    int Id
    int SenderId
    int ReceiverId
    int MessageId
    date CreatedAt
  }

  CHANNEL_MESSAGE {
    int Id
    int SenderId
    int ChannelId
    int MessageId
    date CreatedAt
  }

  MESSAGE {
    int Id
    string Content
    boolean Deleted
    date CreatedAt
    date ModifiedAt
  }

  MESSAGE_ATTACHMENT {
    int Id
    int MessageId
    int MediaFileId
    int MediaType
    date CreatedAt
  }

  MEDIA_FILE {
    int Id
    string FileName
    int FileSize
    string Md5
    string FileLocation
    int OwnerId
    date CreatedAt
    date ModifiedAt
  }

  USER_RELATION {
    int Id
    int User1Id
    int User2Id
    int Status
    date CreatedAt
    date ModifiedAt
  }

  SERVER_EMOJI {
    int Id 
    string Name 
    int ServerId 
    int MediaFileId 
    date CreatedAt 
    date ModifiedAt 
  }

  SERVER_STICKER {
    int Id 
    string Name 
    int ServerId 
    int MediaFileId 
    date CreatedAt 
    date ModifiedAt 
  }

  SERVER_MEMBER {
    int Id
    int UserId
    int ServerId
    boolean Deleted
    date CreatedAt
    date ModifiedAt 
  }

  SERVER_ROL {
    int Id
    int ServerId
    string Name
    boolean Deleted
    date CreatedAt
    date ModifiedAt 
  }

  USER_ROL {
    int Id
    int UserId
    int RolId
    date CreatedAt
    date ModifiedAt 
  }

  PERMISSION {
    int Id
    string Name
    int Value
    date CreatedAt
    date ModifiedAt 
  }

User Permissions:

For Create, Read, Update and Delete actions that a user can perform, we will use the C.R.U.D. acronym.

What a user can do will depend on what permissions have on each server.

Unregistered user:

Unregistered users won't be able to access the application, they can login or register.

Access to public facing pages (Landing page, Login, Register)
Create a user account

Registered User:

RUD a user account
Send friend requests, accept friend requests and see their friend list.
CRUD messages on direct messages.
CRUD a Server
CRUD Channels in a Server
CRUD messages in a Server
Invite and kick members from a Server. See the members of a Server.
CRUD Roles and permissions in a Server

Images:

Users will be able to upload a profile picture when creating an Account. They update their profile picture at any time.

Users will be able to upload a Server picture that will act as a profile picture for the Server.

Users can upload images as part of a message.

Users can upload images to a Server as emojis and stickers.

Complementary Technologies:

For real time communication, we will use Websockets to keep an open connection between client and server.

For managing backend services communication, as well as infrastructure scalability, we will use a message broker. In this case we will use RabbitMQ

We will use MinIO as a High Performance Object Storage to store user uploaded files. Its API is compatible with Amazon S3

Elasticsearch for message querying.

Advanced Query:

Users messages querying and filtering will be done with Elasticsearch. Users can search old messages by the content of the message, both in direct messages and in Server Channels. Those results will be paginated.

Project tracking:

Project tracking and task management will be done with a GitHub Project. A Kanban board will be used.

Author:

This application is being developed as part of the double Bachelor's Degree for Computer Science and Software Engineering at the "Escuela Técnica Superior de Ingeniería Informática (ETSII) de la Universidad Rey Juan Carlos (URJC)"

This first version will be part of the Software Engineering Degree Final Project. A future version will be developed for the Computer Science Degree Final Project.

The author of this project is Iván Motos Montalbán, under the academic supervision of Michel Maes Bermejo, the Tutor of the Bachelor's Degree Thesis.

Name		Name	Last commit message	Last commit date
docs/images		docs/images
AI_USAGE.md		AI_USAGE.md
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md

Uh oh!

Latest commit

History

Folders and files

Repository files navigation