Skip to content

future4code/Johnson-whatslab1

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

WhatsLab1

Atividade em dupla desenvolvida pela Labenu. O objetivo é aplicar e desafiar a praticar os conceitos ministrados nas aulas de React.

Instrutores:

Bruno, Amandinha, Darvas e Camis.

Conceitos aplicados:

  • Componentes de classe e Estados
  • Renderização de Listas
  • Componentes Funcionais

    Estilização:

  • Styled-Components

Desenvolvedores

Gabriela Fogaça e Gabriel Azevedo

Link Surge

https://whatslab1.surge.sh/


Escopo do projeto

Criar um aplicativo de troca de mensagens para bater de frente com os gigantes que existem atualmente, tais como WhatsApp, Telegram, Messenger e muitos outros.

Um projeto tão grande como este, normalmente, começa com a elaboração de um MVP. MVP significa "Minimum Valiable Product", em tradução livre, "mínimo produto viável". Isto significa que começaremos implementando as features (funcionalidades) que indiquem o objetivo principal do produto do nosso cliente. Desta forma, não há a necessidade de se desenvolver um sistema que envie e receba mensagens de fora - criaremos algo que simplesmente mostra novas mensagens.

O escopo deste MVP é:

1. Lista de mensagem:

  • Cada mensagem deve possuir um remetente (ou seja, um usuário que enviou) e o conteúdo em si.
  • No layout, eles devem ficar assim: nome do remente: conteúdo da mensagem

2. Envio de mensagem:

  • Abaixo da lista citada, deve existir um local onde o usuário escolhe o nome do remetente (input) ; o conteúdo da mensagem (input) e um botão de enviar;
  • No layout, eles devem ficar um ao lado do outro. Sendo o campo do remetente com largura muito menor do que o campo do conteúdo
  • Ao enviar a mensagem, os campos devem ser resetados para ficar em branco novamente.

Exemplos:

MVP
Estilização dos balões.

Desafios para o projeto

  • Faça com que tanto o botão de enviar, como o botão "enter" envie as mensagens.
  • Agora, vamos melhorar o design do nosso projeto. (Obs.: é uma funcionalidade bem parecida com os grupos do Whatsapp). Tentem seguir o layout do exemplo como guia.
  • Implemente a funcionalidade de deletar mensagem. Sempre que o usuário clicar duas vezes em cima de uma mensagem ela deve ser apagada.

About

No description or website provided.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published