Bate-papo UOL

Table of contents

• Project Description
• Status
• Mockup
• Requirements
• Author

Project Description

My fifth project for the Driven Education bootcamp was the JavaScript implementation of a fully functional chat, inspired by the homesick Bate-Papo UOL (famous Brazilian website), using an API to enable communication

Status

Mockup

Requirements

• GENERAL
  

  • Do not use any library to implement this project (jQuery, lodash, react, etc), or other languages that compile to JS (TypeScript, ELM, etc), only pure JavaScript.
  • The project must be developed using Git and GitHub, in a public repository.
  • For each requirement implemented make a commit with a descriptive message of what you have evolved.

• LAYOUT

  • Apply layout for mobile

• CHAT

  • When entering the site, it must load the messages from the server and display them according to the layout provided
  • There are 3 types of message:
  • Status messages (Entered or Leave the room): must have a gray background
  • Reserved messages (Reservedly): must have a pink background
  • Normal messages: must have a white background
  • Every 3 seconds the site must reload messages from the server to keep it always up to date
  • The chat should have automatic scrolling by default, that is, whenever new messages are added to the end of the chat it should scroll to the end
  • Messages with Privately should only be displayed if the recipient's name is the same as the name of the user who is using the chat (or else he could see messages reserved for other people)

• *ENTRANCE TO THE ROOM

  • When enter on the site, the user should be asked with a prompt
  • After enter the name, it must be sent to the server to register the user
  • If the server responds successfully, the user will be able to enter the room
  • If the server responds with an error, the user must be asked to enter another name, as it is already in use
  • While the user is in the room, every 5 seconds the site must notify the server that the user is still present, otherwise it will be considered "Leave the room"

• ORDER SUBMISSION

  • When sending a message, it must be sent to the server
  • In case the server responds successfully, you must get messages from the server again and update the chat
  • If the server responds with an error, it means that this user is no longer in the room and the page must be updated (and thus returning to the step of asking for the name)
  • in this send, you must inform a sender, the addressee and if the message is reserved or not

• BONUS

• ACTIVE PARTICIPANTS

  • When clicking on the participants' top right icon, the side menu should open above the chat according to the layout. A semi-transparent dark background should be above the chat.
  • When clicking on the dark background, the side menu should be hidden again
  • The site must get the participant list as soon as it enters the chat and must update the list every 10 seconds
  • When clicking on a person or in public/privately, the option clicked must be marked with a check and the others unmarked
  • In addition to the check above, when changing these parameters, the sentence that informs the recipient must also be changed, which is below the message input

• LOGIN SCREEN

  • Instead of a prompt, make loogin screen (according to the layout provided)

• SEND WITH ENTER

  • Make it so that, if the user presses ENTER in the message screen, it will be sent (that is, it should have the same behavior if the user clicks on the send button)

Author

---

Thales Gomes Targino