💻 Deploy - 📕 Storybook - 🎨 Figma
Após fazer o clone do repositório, faça a instalação das dependências com o comando:
npm installEm seguida inicie o Next no modo desenvolvimento:
npm run devE acesse por http://localhost:3000
Para iniciar o Storybook, execute:
npm run storybookAcesse através http://localhost:6006
O objetivo principal do desafio proposto foi desenvolver uma aplicação utilizando um CEP para obter o endereço completo via API dos Correios (ViaCep ou BrasilAPI).
Além disso, precisava fazer uso de tecnologia como Next, Typescript, Tailwindcss, Styled Components e Storybook.
Como o desafio não fazia sugestão de nenhum layout, resolvi criar um formulário e utilizar como base componentes parecidos com o que a Kivid já utiliza em seu site.
Criei os principais componentes que mais se repetiam e/ou poderiam se repetir em escala, utilizando Styled Components. Com isso, os elementos ganham consistência e melhor manutenibilidade.
Já o Tailwindcss, usei suas classes modificadoras como um "layoutador". Isso quer dizer que, dei prioridade para estilizar estrutura e posicionamento dos componentes.
Para lidar com as consultas dos CEPs, resolvi utilizar a BrasilAPI, que trás mais informações de erros em seus retornos e por ter um padrão de inglês para o nome de suas chaves de objeto retornado.
Na função de consulta, criei utilizando o recurso de server side do Next, que faz toda parte de cacheamento dos dados, onde escolhi colocar um revalidate de 1 dia. Fazendo com que o endereço fique no cache do nosso servidor, deixando nossa aplicação mais rápida e leve.
Além dos detalhes mencionados acima:
- fiz uso de biblioteca para formatar CEP (@utils-fns/mask)
- Criei um hook chamado useFormAddress para lidar com toda as funcionalidades do formulário
- Fiz uso de useState e useEffects para trabalhar estados da aplicação no lado do cliente