For a small amount of bonus points, you can implement a small front end or back end improvement to our code base, such as increasing our test coverage or modernizing some of the front end code (converting class components to functional components, converting some components to Typescript, etc.). Note that this is optional and should be of a small scope

There are some bugs in our starting code that we would like you to investigate and resolve. First, when you send a new message, it does not immediately appear on the screen. We would like new messages to be immediately added to the chat UI for both existing conversations and new conversations. (Note: This may require more than one change)
Additionally, messages are not displayed in the correct order on page load. Messages should be displayed in order with the oldest messages at the top and newest messages at the bottom.

We currently have sockets implemented, but would like to improve how we do so. We know our sockets are not efficient, and that they have poor security. Please address these issues, as well as make any other improvements as you see fit.

We want to track for each message if it has been read by the recipient, and to make several front end UI updates with this information, such as displaying how many unread messages there are in a given conversation.
You can reference the spec in this zip folder for the various updates to be made to reflect unread messages. (Note that the zip folder includes more than just the spec needed for this feature). Please include a screenshot in your PR description showing your updated UI.