Vaga Pessoa Desenvolvedora Front End.
O desafio é criar um componente de input para que o usuário possa preencher seu telefone na nossa aplicação. O layout é auto explicativo, mas o detalhe é um menu dropdown com a lista de países com a bandeira a esquerda e o nome do país a direita, quando selecionado um país da lista, a máscara (DDD) deve ser dinâmica baseada no país, ou seja, o usuário digita o número com DDD e fica no padrão (48)99999-9999.
- TypeScript
- SCSS
- Padrão Funcional
- O componente deve aceitar apenas valores númericos;
- O componente deve receber um valor que seja apenas uma string (exemplo: para um usuário que escolheu Brasil (.55) e digitou 48999999999 deve enviar +5548999999999);
Para ter uma cópia local e fazer rodá-lo, siga esses passos:
Ter instalado no computador:
- node superior a versão 12
node -vEsse processo é caso você desejar ver o código na sua máquina e rodar localmente a aplicação, para caso só queira ver a aplicação funcionando, siga para a parte de Deploy.
🔻 Comandos devem ser digitados pelo terminal
Para clonar o projeto:
git clone https://github.com/amandabrbz/artio.git
cd artio
npm installSubir o servidor local:
npm startApós a aplicação inicializar, deve abrir uma aba automaticamente no browser padrão, rodando o projeto na porta :3000
🚫 Caso a porta já esteja sendo utilizada, a própria aplicação avisa e tenta outra porta.
Para desenvolver utilizei algumas do features do GitHub. Como issues para ver quais tasks precisava fazer e o board presente na aba Projects onde rolou um kanban automatizado com as issues. Com essas features consigo ver como está o progresso de desenvolvimento.
Trabalhei com branchs, maior parte do desenvolvimento abri uma branch para cada issue e ia trabalhando nela quando necessário.
Caso fosse preciso voltar em uma branch, eu rodava o comando de git pull origin main para atualizar a branch conforme a main.
Não trabalhei com PRs e nem SemVer pois achei que não era necessário para um projeto simples.
A princípio ia configurar o deploy na Heroku, pois já tinha alguma experiência e sabia que o deploy de aplicações React era automatizado, entretanto ouve algum conflitos de versão e build que não soube resolver e tentei a Netlify.
O deploy pode ocorrer de três maneiras:
- Via GitHub
A escolhida foi essa, pois sem se preocupar com rodas comandos o não. Só é necessário fazer um commit/merge e dar push da main para origin.
- Via terminal*
npm run build
netlify deploy --prod_* É necessário ter instalado o CLI._
- Ou manualmente na ferramenta.
Layout dado pela empresa e pode ser visto no Adobe XD
Ideias?
Para simular um envio e de confirmação, fazer um modal que ocupe metade da tela com a impressão do telefone.
Simular um formulário para complementar a página.
Vi bastante que meus estudos avançaram desde que peguei os primeiros testes em react, acredito que ainda tenho que melhorar muito, mas tentei dar o meu melhor para desenvolver.
Conhecer um pouco do universo typescript foi bem legal, apesar das dificuldades.
Criar e utilizar componentes de SASS 🌟
Foi um teste muito divertido de fazer e muito prazeroso também, aprendi e consegui aplicar algumas coisas que tenho aprendido, sai alguns dias 😵 assim de tanta coisa vista rs
Tive bastante dificuldade com o TypeScript, dei uma estudada de como utilizar, entretanto encontrei dois deficits no meio do caminho que me atrapalharam um pouco no desenvolvimento que é a tipagem e a OO.
A arquitetura de projeto em React também é meio confuso para mim, procurei algumas arquiteturas e a que mais me chamou a atenção foi de separar os componentes e as views que eram chamadas e também de separar a lógica da interface.
E manipulação de lib, pois a documentação não estava tão clara e o CSS da lib veio quebrado.
Identificados by me.
➕ Orientação a Objetos e Tipagem.
➕ Arquitetura de projetos React.
➕ Mais react e typescript e testes.
Github - Source Code | Netlify - Render
Amanda Barboza @ LinkedIn