diff --git a/README.md b/README.md new file mode 100644 index 0000000..c651bcc --- /dev/null +++ b/README.md @@ -0,0 +1,57 @@ +# WhatsLab1 +Atividade em dupla desenvolvida pela [Labenu](https://www.labenu.com.br/). +O objetivo é aplicar e desafiar a praticar os conceitos ministrados nas aulas de React. + +### Instrutores: +[Bruno](https://github.com/BrunoMovio), [Amandinha](https://github.com/amandarangel/), [Darvas](https://github.com/pdarvas/) e [Camis](https://github.com/monteirocamis/). + +## Conceitos aplicados: +- Componentes de classe e Estados +- Renderização de Listas +- Componentes Funcionais + #### Estilização: +- Styled-Components + +## Desenvolvedores +[Gabriela Fogaça](https://github.com/Fogabi) e +[Gabriel Azevedo](https://github.com/gabazevdo) + +## 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](http://whats4-mvp.surge.sh/) +[Estilização dos balões.](https://www.notion.so/Estilizando-um-bal-o-de-conversa-responsivo-e-bonitinho-9245f28811644abe8d0147d9f686e7f3) + + +## Desafios para o projeto + + - [X] Faça com que tanto o botão de enviar, como o botão "enter" envie + as mensagens. + - [X] Agora, vamos melhorar o design do nosso projeto. + (Obs.: é uma funcionalidade bem parecida com os grupos do Whatsapp). Tentem + seguir o [layout do exemplo](http://whats4-desafio.surge.sh/) 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. + + diff --git a/build/asset-manifest.json b/build/asset-manifest.json new file mode 100644 index 0000000..9457899 --- /dev/null +++ b/build/asset-manifest.json @@ -0,0 +1,18 @@ +{ + "files": { + "main.js": "/static/js/main.3ee415c7.chunk.js", + "main.js.map": "/static/js/main.3ee415c7.chunk.js.map", + "runtime-main.js": "/static/js/runtime-main.e056dd94.js", + "runtime-main.js.map": "/static/js/runtime-main.e056dd94.js.map", + "static/js/2.bc5de5f7.chunk.js": "/static/js/2.bc5de5f7.chunk.js", + "static/js/2.bc5de5f7.chunk.js.map": "/static/js/2.bc5de5f7.chunk.js.map", + "index.html": "/index.html", + "static/js/2.bc5de5f7.chunk.js.LICENSE.txt": "/static/js/2.bc5de5f7.chunk.js.LICENSE.txt", + "static/media/BackgroundWhats.c6f33f60.png": "/static/media/BackgroundWhats.c6f33f60.png" + }, + "entrypoints": [ + "static/js/runtime-main.e056dd94.js", + "static/js/2.bc5de5f7.chunk.js", + "static/js/main.3ee415c7.chunk.js" + ] +} \ No newline at end of file diff --git a/build/index.html b/build/index.html new file mode 100644 index 0000000..aa0133d --- /dev/null +++ b/build/index.html @@ -0,0 +1 @@ +
{mensagens.texto}
\r\n{mensagens.texto}
+