seancassiere / message-box

All the code for the final year project of my undergrad program.

> whoami

Hi, I'm Sean!

Hobbyist software-developer-guy?

• 👨‍💻 Super interested in the development of full-stack web apps and everything bleeding-edge in the space.
• 🤝 Huge advocate of Open-Source and a maintainer of Tanstack Router.
• 🌏 Based in New Zealand 🇳🇿 (formerly from Sri Lanka 🇱🇰).
• 📖 Pursuing my Masters @ Southern Institute of Technology.
• 👨🏼‍🏫 Big advocate of the T3 Axioms.

Tech that hypes me up

You can reach me here

message-box's Issues

Viewing all tasks

New a separate screen to view all the completed tasks.

This will require the for param of the GET /Tasks endpoint, to support returning the tasks.

A user with task:admin should be able to select other users to preview.

publishing current the user status

Users should be able to broadcast their current status/activity alongside the colour of the event.

The system will need to;

• store all the statuses (and their colours) for a user w/ the default system statuses
• create a new status and assign a colour
• set their status on the system at login
• on each browser/tab load fetch the current user's status IF the user is already logged in on the system

add reset 2fa config for user accounts

UI: Calendar/Planner interface to be added into the web-client

https://devexpress.github.io/devextreme-reactive/react/scheduler/

Add date-formatting

Add date-formatting to the ISO Date strings on the web-client

microservice provisioning for chat messages

Provisioning of the application-data-service (microservice) for storing the following.

• Chat rooms - store multiple users for a conversation
• Messages - content type should be stored for every message

show error when 2fa code is invalid

Caching JWKs on API gateway

Look into caching the JWKs on the API gateway.

improvements to the calendar

• Calendar-event interaction based on the user's role and access.
• Time limit on events being created, should not matter if the calendar event is an all-day event.
• Drag and drop calendar events.
  • If this is possible, use a PATCH request (/Api/CalendarEvent/{id})to update the dates.

Send access token type with login

Returning the token type with the login.

migration to vite for the web-client

If easy, move the web client to Vite.

Ensure, that the builds still continue to deploy on Netlify.

setup api-gateway to accept web-socket connections

• should allow socket.io connections to the API-gateway
• sockets made must only allow valid access tokens
• a single user id can have multiple socket-ids so this must be tracked

backend storage for calendar events

Add backend storage in the application-data microservice and make it accessible via the API gateway.

resolve the warning thrown in the console on the Autocomplete component of the Calendar page

The following warning is thrown in the console of the Calendar page, from the Autocomplete TextField component used to Search & Select the user being viewed.

websocket for creating and joining chat rooms

WebSocket provisioning for creating and joining chat rooms.

On selecting a chat room, join the common chat room space by chat room id.
Receive WebSocket events even if you are not joined in the specific chat room.

implement user tasks

Other:

• change the task-service to a common application storage service

Required:

1. GET task by ID
2. POST (create) task
3. PUT (update) task by ID
4. DELETE task by ID
5. GET tasks main params (userId) for params (today, overdue, tomorrow)
6. Share tasks with other users

Optional:

• add attachments

A task should have:

1. Task title
2. Date due
3. Description / Content (HTML / Markdown rich-text)
4. Has been completed
5. Is the task overdue (calculate on every request)
6. Background colour (optional)
7. Shared users (optional)

navbar notification panel & setting of user status

• add a notification panel to be shown when the notification button is clicked
• change the status dropdown to displaying the user's status, to be typeable and to define a custom status

Add reports screen ui

socket.io integration on the web-client

• Add connectivity from the web-client to the socket.io instance on the api-gateway.
• Socket.io connection should not be initiated on login.
• Socket.io connection should be dropped on logout.
• Add functionality to subscribe to all the active users based on the message_box_client_id.

Implement task sorting for Today, Overdue, and Tomorrow

Implement the server functionality for Sorting the tasks based on params of Today, Overdue, and Tomorrow.

migrating to zustand and react-query

Add user permissions

In the auth-service,

• A Role should be able to store an array of permissions keys.
• A user should be able to get all permissions for a Client.
• In the access token, the permissions should be returned to the user.

Basic permission schema

id UUID / NanoID
key String
name String

In the web client,

• The client should store the permissions from the access token.
• The client should allow the user to add/update permissions into a role.

on logout user being set to offline

A current feature of the Socket.io instance is that the user is set to offline on disconnection in the client's common online-users pool.

However, if the user is logged in on multiple devices/browsers, the user shouldn't be marked as offline unless all the associated socket IDs for the user are 0.

Optimize microservice build time

setup architecture for storing attachments

Look into implementing a system for uploading and storing documents in MessageBox.

An assumption can be made that each document is related to a module/entity within the application (Calendar Event, Task, Message, etc.)

The uploaded documents should be stored on a cloud storage provider (AWS, GCP, Azure, etc.)

expire one-time passwordless pin after use

Currently, the one-time passwordless pin only expires after the allotted 15 minutes.

Ideally, it should expire directly after it has been used in the 2FA-Code-Login method.

remove create-react-app project

work on a few more features, once confident in the Vite project delete the create-react-app project

add team admins/leaders for each team

Utilize the bgColor attribute on tasks

support passwordless login

Requirement

On the login page, once the user has typed in their email, the web client can check if the email has been validated and then trigger the code login functionality on the login page.

Optional

Support email passwordless login method, to bypass TOTP generated tokens. Emailing a temporary code for login, this code can be stored in Redis. If implemented, deletion of the temporary code from Redis should also be supported.

Updating role permissions without the application

A separate executable/method/function is required to be able to update the default roles (assigned to clients), with any changes to the default associated permissions.

restrict routes based on user access

Currently, a user without access to the team-activity is able to access it.

To do reproduce this issue, the following can be done.

1. Enter the following URL in the browser navigator - https://localhost:3000/team-activity

Once completed, the user will be shown the module (although admin-level elements are still restricted).

UI for the team activity screen

Implement the UI for the team activity module as seen in the Figma Design Screen.

Note:

• All members of the team should be displayed regardless of their online status.
• Privileged users, should only be able to view teams in which the user is a Team Leader.
• Admin users, should be able to view all teams.

Adding dashboard widgets

Initial Provisioning

• Add a new page for the dashboard
• Add the database provisioning to store dashboard widget data for each user.

Add chat ui

Scaffold and build out the basic chat ui.

difficult to read the task completion widget on the dashboard

There is a bug present, which makes it difficult to read the Task Completion pie chart based on the rate of completion of the user.

This fix should be implemented in web-client where the widget and the preview image should be changed.

See the image below regarding the issue presented.