Uma aplicação Web responsiva desenvolvida em NextJS que consulta a API Open Weather para pesquisar a previsão do tempo.
Demo FIGMA: https://www.figma.com/challenge-charlie
Demo FRONT-END: https://challenge-charlie-mu.vercel.app/
Clone o projeto e acesse a pasta:
$ git clone git@github.com:vitoremanuelqf/challenge-charlie.git && cd challenge-charlieSiga os passos a baixo para rodar a aplicação localmente:
# Certifique-se de que todas as variáveis de ambiente estão com as chaves das APIs ativas.
# Instale as dependências:
$ yarn
# Inciar a aplicação
$ yarn startPara rodar os testes:
# Instale as dependências:
$ yarn
# Rodar o comando de teste:
$ yarn test
Siga os passos a baixo para rodar a aplicação com Docker e Makefile:
make build-development
make start-development
make build-staging
make start-staging
make build-production
make start-production
public/
|---- images/
src/
|---- assets/
|---- components/
|---- contexts/
|---- functions/
|---- hooks/
|---- pages/
|---- styles/
|---- tests/
|---- types/Next.js:
O Next.js é conhecido por oferecer suporte para renderização do lado do servidor, o que pode melhorar significativamente o desempenho da página, especialmente em conexões de internet mais lentas. Quanto a performance, o Next.js é projetado para oferecer o melhor desempenho, utilizando estratégias como o pré-carregamento de páginas e o lazy loading para melhorar o tempo de carregamento.
ChakraUI:
O ChakraUI permite a criação de interfaces de usuário rapidamente, sem precisar escrever CSS personalizado ou estilizar cada componente individualmente. Isso economiza tempo e aumenta a produtividade. O framework também se preocupa com a acessibilidade, e seus componentes são projetados com esse recurso em mente. Isso significa que você pode criar interfaces de usuário que sejam acessíveis.
React Hook Form:
O React Hook Form é projetado para ser flexível e escalável, permitindo que os desenvolvedores escolham as bibliotecas de UI que desejam usar e personalizem as funcionalidades de validação e manipulação de dados para atender às suas necessidades específicas, sendo assim, é possível criar formulários em React de forma mais rápida e fácil, reduzindo a quantidade de código necessário e melhorando a eficiência e desempenho do aplicativo.
Nookies:
Nookies é uma biblioteca de gerenciamento de cookies em JavaScript que pode ser utilizada em aplicações web. Ela permite que desenvolvedores gerenciem cookies no lado do cliente de forma fácil e flexível.
-
Contornar o erro de CORS ao consumir a API do bing, em meio a pesquisas encontrei a solução com a implementação da feature de API Routes do NextJS
-
Elaborar e implementar os testes com Jest e Testing Library
Alert:
-
O uso de alertas na web é uma forma eficaz de exibir informações importantes ou notificações aos usuários de um site ou aplicação web.
Skeleton:
-
O uso de skeleton para loading (ou carregamento) é uma técnica que pode melhorar significativamente a experiência do usuário em aplicações web ou mobile, especialmente em situações em que há carregamento assíncrono de conteúdo.
Sugestões de Pesquisa no Input:
-
O uso de sugestões de autocompletar (ou autopreencher) em campos de entrada de formulários em aplicações web ou mobile pode ajudar a melhorar a experiência do usuário de várias maneiras, uma delas é evitar erros de digitação e garantir que os dados inseridos estejam precisos e consistentes.
-
Para implementar as sugestões de autopreenchimento, foi necessário integrar a API de localidades dos serviços de dados do IBGE. A integração com a API de localidades do IBGE foi fundamental para viabilizar as sugestões de autopreenchimento em nosso sistema. Por meio dessa integração, conseguimos acessar informações precisas e atualizadas sobre as localidades do país, o que nos permitiu fornecer sugestões relevantes e confiáveis aos usuários.
Qualquer dúvida, sugestão ou crítica estarei à disposição!
Obrigado pela oportunidade!
E-mail: vitoremanuelqf@gmail.com
WhatsApp: (15) 99605-5714