Stagii pe Bune Front-End
Workshop
Requirements
As a
I want to
So that
Goal of the functionality
In order for Chatables to be complete, we still have to add the final and most important component: the chatroom itself. Users must be able to see what they sent, what messages they are retrieving, and the conversation history as well.
Acceptance Criteria
-
Messages you send are visible
-
Messages you receive are visible
-
Conversation history is available in the chat
-
Each message must have the text, the user's first name, last name and profile picture
-
Newest messages always on the bottom of the screen
Product Owner
display all the messages in the chatroom
users can see the conversation they're holding with other people
Design
Design
height: 70px
width: 70px
Message text:
color: #000000
font-size: 16px
User info:
color: #0875e7
General:
background-color: #ffffff
Message text:
color: #ffffff
font-size: 16px
User info:
color: #99c5f3
General:
background-color: #0875e7
max-width: 50% of container
position: left for incoming
right for outgoing
General component info:
background-color: #d2d2d2
Project Structure
Technologies
Framework
Modularization
Components
Object-Oriented
Strongly Typed
Widely Used
Overall Insane
Technologies
Socket.io
Let's get to work
Step 1:
Retrieve message history from database
Step 2:
Retrieve messages from socket
Step 3:
Add some styling to the chat component
Step 4:
Add some styling to the messages
Step 5:
Add the user picture for each message
