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).
#### Registration and Login
To be able to use the new and upgraded forum users will have to register and login. This is premium stuff. The registration and login process should take in consideration the following features:
- Users must be able to fill a register form to register into the forum. They will have to provide at least:
- Nickname
- Age
- Gender
- First Name
- Last Name
- E-mail
- Password
- The user must be able to connect using either the nickname or the e-mail combined with the password.
- The user must be able to log out from any page on the forum.
#### Posts and Comments
This part is pretty similar to the first forum. Users must be able to:
- Create posts
- Posts will have categories as in the first forum
- 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.
