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

Google

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

Yonder Stagii Pe Bune - Multidisciplinar FE Workshop

By alexgrigi

Yonder Stagii Pe Bune - Multidisciplinar FE Workshop

  • 549