Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

future4code/Johnson-whatslab1

Open more actions menu

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
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

Packages

Contributors

Languages

Morty Proxy This is a proxified and sanitized view of the page, visit original site.