- Desenvolver uma aplicação utilizando um CEP para obter o endereço completo via API dos Correios (ViaCep ou BrasilAPI).
- Obrigatórios: React, Next, Typescript, Tailwind CSS;
- Desejáveis: SWR, StoryBook (apenas um componente para mostrar o conhecimento).
Extras
- Dark mode
- Design no figma
Você pode visualizar o design do projeto através do link abaixo:
Design
OBS.: O projeto também suporta dark e light mode. É necessário apenas trocar entre as opções nas configurações de aparência do seu navegador
Esse projeto foi desenvolvido com as seguintes tecnologias:
- Bootstrapped com create next-app
$ npx create-next-app@latest
Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js e NPM. Além disto, é bom ter um editor, recomendo o:
Clone o projeto e acesse seu diretório.
$ git clone https://github.com/pedroab0/busca-cep
$ cd busca-cep
$ npm i
$ npm run dev
$ npm run storybook
Optei pelo app router por ser a configuração recomendada pela Vercel e não ter sido especificado no requisitos.
Escolhi apenas o TailwindCSS por estar como um requisito obrigatório apesar de ser possível usar ambos juntos e de eu ter uma proficiência maior com o styled-components
Decidi desativar as revalidações automáticas pelo dado trazido ser imutável. Fiz isso usando as options do `useSWR`, mas poderia também ter tido o mesmo resultado usando o `useImmutableSWR`.const { data, isLoading, error } = useSWR<FetchedAddressInterface, FetchedAddressError>(
formData ? `https://brasilapi.com.br/api/cep/v2/${formData}` : null, fetcher, {
revalidateIfStale: false,
revalidateOnFocus: false,
revalidateOnReconnect: false
}
)
export function Home () {}
Decidi usar as arrows functions por ter visto que é a preferência do dev front-end que já está no projeto Mas falo mais um pouco sobre isso em um post que eu fiz no linkedin
Feito com ❤️ por Pedro Barbosa 👋🏽 Entre em contato!