Remember the forum you did a while ago? Well it's time to make one even better also using JS, private messages, real time actions, live sharing video and live screen sharing too. Well, maybe not the last two. To get things straight there is a list below of what you will have to do.
- **HTML**, in which you will organize the elements of the page
- **CSS**, in which you will stylize the elements of the page
You will have only one HTML file, so every change of page you want to do, should be handled in the Javascript. This can be called having a [single page application](https://en.wikipedia.org/wiki/Single-page_application).
To be able to use the new and upgraded forum users will have to register and login, otherwise they will only see the registration or login page. This is premium stuff. The registration and login process should take in consideration the following features:
- This section must be organized by the last message sent (just like discord). If the user is new and does not present messages you must organize it in alphabetic order.
- The user must be able to send private messages to the users who are online.
- This section must be visible at all times.
- A section that when clicked on the user that you want to send a message, reloads the past messages. Chats between users must:
- Be visible, for this you will have to be able to see the previous messages that you had with the user
- Reload the last 10 messages and when scrolled up to see more messages you must provide the user with 10 more, without spamming the scroll event. **Do not forget what you learned!! (`Throttle`, `Debounce`)**
- A **`date`** that shows when the message was sent
- The **`user name`**, that identifies the user that sent the message
As it is expected, the messages should work in real time, in other words, if a user sends a message, the other user should receive the notification of the new message without refreshing the page. Again this is possible through the usage of WebSockets in backend and frontend.
