search

ColinLefter / Accord

A real-time privacy-first social media platform leveraging feature-rich direct messaging text channels. Built as part of the course project for COSC 310 at UBC.
5 stars 1 forks source link

Outline of All Application Features #223

Open ColinLefter opened 2 months ago

ColinLefter commented 2 months ago

Home Page

  1. Styled home page
    1. Background video
    2. Features pop-over in navbar that shows the 4 core features of our app
    3. Interactive Text Channel demo where viewers can see what text channels look like before joining the platform
    4. Dynamically rendered log in button in the navbar that shows only if the user is logged out. Otherwise, a profile icon of the user is shown
    5. Footer

Site-Wide

  1. Authentication
    1. Enterprise-grade authentication via Clerk that supports everything from multifactor authentication via Apple, GitHub, Google and Microsoft, OTP by phone and email, password resets and the ability to create a simple account by username and password
    2. Authenticated user profile—a small user avatar that is displayed on both the home page and the application shell and allows users to manage their account or sign out. Managing account information supports changing usernames, email addresses, phone numbers, connected accounts and passwords. It also displays active devices and their associated IP address so that users can see when and where there was a successful log in. It also supports the ability to delete an account

Specialized Backend Processes

  1. Synchronizing our MongoDB database with webhooks
    1. Accounts are created and stored by the authentication provider. We synchronize our own MongoDB database with changes in account data received by the provider by scanning for three cases: account created, updated or deleted in real-time. Since the provider needs to communicate with our backend webhook, we are exposing that singular backend API on the internet by hosting it with ngrok. Since we would need to host our entire application to make this possible, we are bypassing that necessity by utilising a proxy server to expose only a backend endpoint.
  2. Real-time text messaging, system wide and cross-user update synchronization with Ably
    1. Ably is our real-time web socket provider that provides the infrastructure for pub/sub channels that facilitate real-time updates across our application
    2. We maintain a special systems channel called accord-systems that facilitates real-time updates across components and between users on different devices.
    3. Upon a user accepting a friend request, a message on the accord-systems channel is sent to the user whose request was just accepted, synchronizing the refresh of the friend list for both users in real-time
  3. Encrypted channel keys
    1. Pub/sub channel keys are encrypted via the SHA-256 encryption protocol. Channel keys are formed by using a custom primary key constituting channelName-channelMembers value pairs, in which channelMembers refers to the IDs received from Clerk, concatenated together and separated by commas. Those IDs themselves are randomly generated keys, so we have a multi-layer encryption protocol that makes it completely impossible to guess a channel key.
  4. Private Mode
    1. In addition to the ability to store message history, we introduced a unique feature called Private Mode that is exclusive to text channels. It implies that no message history is saved, and as soon as the user switches over to a different text channel, refreshes their browser or logs out, they will not see any existing messages on that channel anymore. This is exclusive to text channels as we retain all message history in direct messages.
  5. Reflecting user within-chat user account changes
    1. Due to our exceptional account for referential integrity in our MongoDB database, if a user changes any of their account details while texting, such as their username or profile picture, their account updates will be reflected in the next message they send to everyone in the chat
  6. Server-side rendering
    1. Given our choice to use Next.js as our full-stack framework, we get to leverage the unique benefits of Next.js over other React frameworks. A core benefit is lightning-fast page switching and responsiveness. Unlike other websites where a website undergoes a visible top-down refresh, our website does not do that and pages load instantly
  7. Tabs
    1. Our text and direct message channels, alongside the friend list, are all implemented within a tab-based view

Specialized Frontend Processes

  1. Component gradients (our logo, action buttons)
  2. Dynamic theme toggle. Our application supports a fully-featured light mode and dark mode
  3. Draggable text channels
    1. Users can sort text channels by their preference using a neat drag and drop effect!
  4. In-app push notifications
    1. All interactions with modals send out a confirmation notification indicating that the operation was performed successfully
  5. App shell
    1. We have a 3-column app shell that includes the left side bar, main section and right sidebar.
    2. Left sidebar
      1. Hosts all friend-related operations in the top left (viewing the friend list, adding a friend and removing a friend)
      2. Below that, we have our text channels section where you can add text channels via a “New Text Channel” modal and you can also see your existing text channels just below that. The text channels are within a scrollable container. At the bottom, we have our profile section where you can see your username, manage your account and view your sent and pending friend requests
  6. Blurred background on all modals
    1. As an additional UI enhancement, opening a modal blurs the background to emphasize the modal that is currently being displayed

Easter Eggs

  1. A custom 404 error page that shows when running the application in production mode and attempting to navigate to a non-existent page (try navigating to /accord in production mode!)

Application

  1. Add friend modal
    1. Client-side validation: clicking “Add friend” without entering a username displays an error message.
    2. Server-side validation: entering a username that does not exist on the platform returns an error message indicating that the user does not exist
  2. Remove friends modal
    1. The user is greeted with a combobox where users can select a series of friends they want to remove from their friend list. This means that users can delete multiple friends at once to enhance the user experience.
  3. Inbox
    1. Is split in two parts: sent friend requests and received friend requests. As soon as a friend request is sent by adding a friend via the “Add friend” modal, it will appear under the “Sent Friend Requests” section of the inbox until the friend on the receiving end accepts the friend request, after which it will be automatically deleted for both users in real-time. The way we are facilitating this real-time update is with polling. Polling was the best solution as this enables friends to receive friend requests even when they are not online.
  4. Text Channels (Colin)
    1. Text channels are the star feature of our platform due to the degree of flexibility that comes with creating a channel, alongside the robustness of the channel creation pipeline.
    2. Users can specify a channel name, add members to a channel and specify any admins.
    3. The modal is fully-featured with client-side and server-side validation such that attempting to submit an incomplete form raises an error, and attempting to create an already existing channel notifies the user.
    4. Admins can only be included in a server if they are also participants of a server, and we have accounted for that by synchronizing the channel members and admin members’ combo boxes. For example, deleting a member from the channel members list also removes them from the admin box within the modal.
    5. Text channels are group chats that support an unlimited number of members. We require text channels to have at least 3 participants in them, which is why we do not support the creation of text channels with only two users, as we want to separate text channels from direct messages.
    6. Our next unique feature is private mode: (extract from specialized backend processes): In addition to the ability to store message history, we introduced a unique feature called Private Mode that is exclusive to text channels. It implies that no message history is saved, and as soon as the user switches over to a different text channel, refreshes their browser or logs out, they will not see any existing messages on that channel anymore. This is exclusive to text channels as we retain all message history in direct messages.
    7. Once a text channel is created, it will appear in the left sidebar. All text channels are draggable, and they are marked as private channels if private mode was specified.
    8. (extract from specialized backend processes) All channel keys across text channels and direct message channels are encrypted via the SHA-256 encryption protocol, meaning it is impossible to hijack an existing channel that you are not part of.
    9. (extract from specialized backend processes) Our text and direct message channels, alongside the friend list, are all implemented within a tab-based view. To demo the private mode, I’ll send a text message on a private channel, switch over to a non-private channel and send a text message there, and then switch back to the private channel to see if it is there. As you can see, the message was not saved in the private channel, but it was saved in the non-private channel.
  5. Direct Messages
    1. This is the precursor text channels and direct messages between users can be accessed by clicking on a friend in your friend list.
    2. (extract from specialized backend processes): Due to our exceptional account for referential integrity in our MongoDB database, if a user changes any of their account details while texting, such as their username or profile picture, their account updates will be reflected in the next message they send to everyone in the chat
    3. Message Deletion
      1. In text channels and direct messages, users can delete their own messages by hovering over a message, navigating to the 3 dots on the right. User’s can’t delete the messages of other users unless they are an admin or owner of the text channel.
  6. Member Management
    1. Member management is exclusive to text channels. The right sidebar conditionally renders depending on whether you are within a text channel or not. It appears when you are in a text channel and you are the owner or admin of that text channel.
    2. It enables owners and admins to add members, which can be done by clicking the “Add members” button just below the list of members in the channel.
    3. For someone that has admin privileges, clicking on a member opens up a menu where you can promote a user to admin or remove them from the server. Promoting a user to admin will give them the same privileges that we see here, in which they will then too be able to manage users, and they will then gain access to the right sidebar as well.
    4. The feature is robust such that removing yourself from a text channel will change the view back to the friend list and remove the channel from the left sidebar such that you no longer have access to it. This has the same functionality as leaving a server.
    5. Upon removing a user from a text channel, they will undergo a real-time tab switch on their end where they are taken back to the friends tab view and the left sidebar is refreshed in real-time to prevent them from being able to open that channel again. That means if they got removed while looking at a channel, they will be taken back to the friend list.
    6. Admin privileges
      1. Admins and channel owners can delete messages from all users. Non-admins can only delete their own messages. Likewise, having admin privileges also comes with being able to add additional users to a text channel.