Status do Projeto: Concluído ✔️
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:
Desenvolvimento de aplicações completas, incluindo frontend Web com React e backend com Node.js.
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;
- HTML
- CSS
- JavaScript
- Terminal
- Git
- BrowserDevTools
- Vanilla Javascript
- Node.js
- React
- Estilização Avançada com CSS
- Responsividade e adaptação de aplicação web para front.
🏆 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")
- React: versão 16.12.0
- Styled Components: versão 5.0.1
- 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)
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: