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.
- The user must be able to consult other people profiles and see everything except the e-mail and the password (obviously).
#### 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
- Create comments on the posts
- See posts in a feed display
- See comments only if they click on a post
But there is a twist. If some user creates a post, that post has to be created to all users without refreshing the page and the same goes for the comments. You can achieve this with [WebSockets](https://en.wikipedia.org/wiki/WebSocket).
- A section to show who is online and able to talk to:
- 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.
- A section that when clicked on the user that you want to send a message, reloads the past messages. Messages that where already sent:
- For this you will have to be able to see the previous messages that you had with the user
- Reload the 10 last messages and when scrolled up to see more messages you must provide the user with 10 more messages. **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.