Merge pull request #653 from 01-edu/real-time-forum

real-time-forum

subjects/real-time-forum/README.md

@@ -0,0 +1,85 @@
+## real-time-forum
+
+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.
+
+### Objectives
+
+On this project you will have to focus on a few points:
+
+- Registration and Login
+- Creation of posts
+  - Commenting posts
+- Private Messages
+
+As you already did the first forum you can use part of the code, but not all of it. Your new forum will have five different parts:
+
+- **SQLite**, in which you will store data, just like in the [previous forum](https://public.01-edu.org/subjects/forum/#communication)
+- **Golang**, in which you will handle data and Websockets (Backend)
+- **Javascript**, in which you will handle all the Frontend events and clients Websockets
+- **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
+- Create comments on the posts
+- See posts in a feed display
+  - See comments only if they click on a post
+
+#### Private Messages
+
+Users will be able to send private messages to each other, so you will need to create a chat, where it will exist :
+
+- 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.
+  - 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`)**
+
+- Messages must have a specific format:
+  - 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.
+
+This project will help you learn about:
+
+- The basics of web :
+  - HTML
+  - HTTP
+  - Sessions and cookies
+  - CSS
+  - Backend and Frontend
+  - DOM
+- [Go routines](https://golangbot.com/goroutines/)
+- [Go channels](https://medium.com/rungo/anatomy-of-channels-in-go-concurrency-in-go-1ec336086adb)
+- [WebSockets](https://en.wikipedia.org/wiki/WebSocket):
+  - Go Websockets
+  - JS Websockets
+- SQL language
+  - Manipulation of databases

subjects/real-time-forum/audit/README.md

@@ -0,0 +1,83 @@
+#### Functional
+
+###### Do you need to register/login in the forum to use it?
+
+##### Try registering as a new user
+
+###### Does the site asks for a nickname, age, gender, first and last name, email and password?
+
+##### Try to login as an unregistered user.
+
+###### Did it fail to enter the forum?
+
+##### Go to the login page.
+
+###### Does the login requests for a nickname or an email combined with a password?
+
+##### Try to login as a registered user.
+
+###### Are you able to login?
+
+##### After logging in, try to log out at different pages of the forum.
+
+###### Are you able to log out in every page?
+
+##### Try to create a post.
+
+###### Are you able to create a post?
+
+##### Log in as a registered user.
+
+###### Are you able to see the post you previously created?
+
+##### Log in as a registered user and try to comment a post.
+
+###### Are you able to comment on the post?
+
+##### Click on the post you created.
+
+###### Are you able to see the comment you previously created?
+
+###### Is there a section designed to show online users?
+
+###### Are the chat users organized by last message sent (just like discord)?
+
+##### Try and register a new user that does not have chat messages.
+
+###### Are the chat users organized in alphabetic order?
+
+##### Try to send a message.
+
+###### Does the message respect the format, by using the users name and the date that the message was sent?
+
+##### Open two browsers (ex: Chrome and Firefox), log in with different users in each one and with one of them try to send a private message to the other.
+
+###### Did the other user received a notification?
+
+##### Open two browsers (ex: Chrome and Firefox), log in with different users in each one and with one of them try to send a private message to the other.
+
+###### Did the other user received the message in real time, without refreshing the page?
+
+##### Try to open a private conversation, that has more then 10 messages.
+
+###### Is the last 10 messages sent to this user loaded for you to see?
+
+##### Try to open a private conversation, that has more then 20 messages and scroll up to see the rest of the conversation.
+
+###### Does it use the scroll event to load more messages?
+
+##### Try to open a private conversation, that has more then 20 messages and scroll up to see the rest of the conversation.
+
+###### Does it load just 10 messages, without spamming the scroll event (This can be done using the function [Throttle](https://css-tricks.com/debouncing-throttling-explained-examples/#throttle))?
+
+#### Bonus
+
+###### +Does the project runs quickly and effectively? (Favoring recursive, no unnecessary data requests, etc)
+
+###### +Does the code obey the [good practices](https://public.01-edu.org/subjects/good-practices/README.md)?
+
+###### +Does the users have profiles?
+
+###### +Can the users send images through the private messages?
+
+###### +Is the code using synchronicity (Promises and goroutines/channels) to increase performance?

subjects/real-time-forum/typing-in-progress/README.md

@@ -0,0 +1,33 @@
+## typing in progress
+
+### Objectives
+
+You must follow the same [principles](https://public.01-edu.org/subjects/real-time-forum/README.md) as the first subject.
+
+For this project you must create:
+
+- A [Typing in progress](https://i.insider.com/56996788dd0895a06c8b460c?width=1100&format=jpeg&auto=webp) engine
+
+### Instructions
+
+A typing in progress engine is a way that people can see that a user is typing in real time. Allowing you to see the other user is replying or sending a message.
+
+The typing in progress engine must work in real time! This meaning that if you start typing to a certain user this user will be able to see that you are typing.
+
+This engine must have/display:
+
+- A websocket to stablish the connection with both users
+- An animation so that the user can see that you are typing, this animation should be smooth (no interruptions/janks) and just enough to draw attention for the user to see (user friendly)
+- The name of the user that is typing
+- Whenever the user stops typing or finishes the conversation, it should not display the animation
+
+To help with the display of the typing in progress you can take a look on the js [event](https://developer.mozilla.org/en-US/docs/Web/Events) list, mainly the **Keyboard events** and the **Focus events**
+
+This project will help you learn about:
+
+- [Go routines](https://golangbot.com/goroutines/)
+- [Go channels](https://medium.com/rungo/anatomy-of-channels-in-go-concurrency-in-go-1ec336086adb)
+- [WebSockets](https://en.wikipedia.org/wiki/WebSocket):
+  - Go Websockets
+  - JS Websockets
+- [Events](https://developer.mozilla.org/en-US/docs/Web/Events)

subjects/real-time-forum/typing-in-progress/audit.md

@@ -0,0 +1,33 @@
+#### Functional
+
+##### Open two browsers (ex: Chrome and Firefox or private windows) and log in with different users in each one. With one user start typing.
+
+###### Is there any animation confirming that the typing in progress is working?
+
+##### Using the same two browsers, start typing with one of the users.
+
+###### Does the animation work smoothly, without movement interruptions?
+
+##### Using the same two browsers, start typing with one of the users.
+
+###### Is the animation from the typing in progress engine user friendly (easy to understand/see)?
+
+##### Using the same two browsers, start typing with one of the users.
+
+###### Can you confirm that the typing in progress has the name of the user that is typing?
+
+##### Open two browsers (ex: Chrome and Firefox or private windows) and log in with different users in each one. With one user start typing and then stop.
+
+###### Can you confirm that the typing in progress engine stopped when the user stop typing?
+
+##### Open two browsers (ex: Chrome and Firefox or private windows) and log in with different users in each one, then start a conversation between the users.
+
+###### Is typing in progress engine working properly in both users? (each one can see when the other is typing or not)
+
+#### Bonus
+
+###### +Does the project runs quickly and effectively? (Favoring recursive, no unnecessary data requests, etc)
+
+###### +Does the code obey the [good practices](https://public.01-edu.org/subjects/good-practices/README.md)?
+
+###### +Is the code using synchronicity (Promises and goroutines/channels) to increase performance?