Research how to create a Chatbox component

[Malinovka]

Fun fact: in Agile, tickets like these are called spikes. ⭐ If requirements are fuzzy, we define them before doing the work.

Making a chat box with text editor from scratch is too much work, so let's find a solution that already exists. We need a few things to make a chat box possible.

• [ ] Research and pick a library for a rich text editor to use in our react app
  • [x] Usual requirements of a rich text editor. (Decide if you want all of these or not, maybe it's too much effort to do it all):
  • Formatting: Users can apply styles like bold, italic, and underline, as well as adjust font typefaces and text size
  • Rich media: Users can embed images, videos, and other rich media into their content
  • Hyperlinks: Users can embed links in their messages
• [ ] Research how chat messages are stored in a database
  • [x] What tables are required?
  • [ ] How do we handle storing rich media (hyperlinks, images)
• [ ] Hard mode: How to handle real-time-communications
  • [ ] Find out what the heck websockets are and how we could use them in our project, see if there's a library we could use.

[drizzle846]

There's two we can use for the rich text editor

• Quill
• TipTap

[drizzle846]

A relational database can store chat messages in a table with columns for the message ID, sender ID, recipient ID, timestamp, and message content

https://quickblox.com/blog/beginners-guide-to-chat-app-architecture/#II.%20Understanding%20the%20basic%20structure%20of%20a%20Chat%20Application

[enora-sun]

https://www.geeksforgeeks.org/what-is-web-socket-and-how-it-is-different-from-the-http/ WebSocket is bidirectional, a full-duplex protocol that is used in the same scenario of client-server communication. It is a stateful protocol, which means the connection between client and server will stay alive until it gets terminated by either party (client or server). After closing the connection by either of the client or server, the connection is terminated from both ends.