Status do Projeto: Concluído ✔️

Danilo Mourelle

Atualmente um desenvolvedor Web Fullstack (NodeJS), tenho 3 anos de experiência em programação de robôs industriais, onde desenvolvi habilidade na área de programação de linguagens de alto nível e lógica de programação. Também fiz parte, por 4 anos, de um grupo de pesquisa científica em sistemas neurais com foco em memória, aprendizado e Doença de Alzheimer onde obtive familiaridade com documentações em lingua inglesa e a repetibilidade de protocolos pré-estabelecidos.

Canais de comunicação:

Labenu | Full-Stack Web Development Bootcamp

Desenvolvimento de aplicações completas, incluindo frontend Web com React e backend com Node.js.

Whats4

Escopo do Projeto

O cliente de hoje está tentando fazer novo 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 Viable 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 é:

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

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;

Linguagens

HTML
CSS
JavaScript

Tecnologias/Ferramentas

Terminal
Git
BrowserDevTools
Vanilla Javascript
Node.js
React
Estilização Avançada com CSS
Responsividade e adaptação de aplicação web para front.

O que a plataforma é capaz de fazer 🏁

🏆 Simular o funcionamento de um aplicativo mensageiro de forma responsiva para Browser e Mobile

🏆 Renderizar condicionalmente o bloco de mensagem de acordo com o remetente da mensagem ("eu")

Linguagens e libs utilizadas 📚

React: versão 16.12.0
Styled Components: versão 5.0.1

Conhecimentos adquiridos durante o projeto 🎓

Gerenciamento de versões com Git/GitHub em trabalho colaborativo
Posicionamento de containers com CSS (flexbox e grid)
Estilização condicional através da biblioteca styled-components
Desenvolvimento em React com troca de informações entre componentes via props
Renderização de listas em arrays (variáveis dinâmicas)

Como rodar a aplicação ▶️

No terminal, clone o projeto:

git clone https://github.com/danilomourelle/Whats4.git

Navegue para dentro da raiz do projeto

cd Whats4

Instale as dependências

npm i

Execute a aplicação

npm start

Você poderá acessar a aplicação em localhost:3000

Projeto inicialmente desenvolvido em 14/02/2020 neste Repo em parceria com:

Henrique Mendes

RESULTADO FINAL

Site do projeto