Esse projeto permite o usuário obter alguns dados de pokemons seja na lista padrão, pelo campo de busca ou pelo tipo.
Os dados vem da PokeApi e são filtrados para a exibição.
Ele é totalmente responsivo!
Para construção do projeto foi necessário o uso de diversas bibliotecas adicionais como:
- React Hook Form: para gerenciamento do formulário
- Zod: para validação do formulário
- React Spring: para animações de transição
- React Router: para gerenciar o caminho das páginas
- useAnimations: para carregamento
- React Icons: para ícones
- React testing library + Vitest + Jsdom: para realização dos testes
- Mock Service Worker: para fazer o mock da API para os testes
Embora muitos desenvolvedores já tenham realizado projetos semelhantes (seria este um evento canônico? 🕸), a experiência de construir os componentes, lidar com diversas condições e lidar com as chamadas de api foi incrivelmente enriquecedora. O processo não apenas solidificou meu entendimento prático, mas também proporcionou insights valiosos sobre a arquitetura e a otimização do código.
|💂🏼 | 👮🏼♀️| Separação de responsabilidades foi um desafio inicial, porque no começo de um projeto não existem todos os componentes e mesmo com muito planejamento acaba aparecendo algo novo pra adicionar durante a criação.
📜 Formulários no React funcionam de uma forma um pouco diferente do que eu estava acostumado, aqui precisamos gerenciar os inputs de diversas formas e graças ao react hook forms consegui implementar o funcionamento de uma forma mais sucinta e otimizada.
🕵️♂️ Ainda sobre formulários a validação impôs um enorme desafio, porque com a criação de schema no Zod podemos determinar a forma que o dado será tratado, eu optei por string o que gerou o questionamento:
"E se o usuário colocar um ID inválido de um pokemon?? Vai ficar fazendo call pra api mesmo sabendo que os dados não são válidos?? 🤔"
Para evitar isso foi necessário criar uma regra que verifica o tipo de input com um regex, se for aceito converte o input em número e dai então utiliza esse input convertido como parâmetro para validar (🤯):
.refine(
(value) =>
/^\d+$/.test(value)
? ((currentNumber) => {
return (
!isNaN(currentNumber) &&
currentNumber >= 1 &&
currentNumber <= 1017
)
})(Number(value))
: value,
{ message: "Must be a number between 1 and 1017" }
)💅 Um novo aprendizado foi o uso de Styled Components para ter os estilos dentro dos componentes, as maiores vantagens estão em saber exatamente aonde esta o estilo daquele pedaço específico do código e o uso de props para modificar o estilo de forma condicional.
🎨 O design foi complicado porque não sou a pessoa mais criativa do mundo, ter de navegar pelos intricados detalhes do design exigiu uma consideração cuidadosa de cada elemento visual. Ao enfrentar esse desafio, pude explorar e desenvolver estratégias para superar um pouco as limitações da minha abordagem menos criativa, resultando em um design que, embora desafiador, acabou sendo uma conquista significativa.
📑TESTES! Desenvolver testes para um site React proporcionou desafios estimulantes. A intricada natureza das funcionalidades demandou uma abordagem meticulosa, enfatizando a necessidade de uma cobertura abrangente na testagem automatizada. A criação completa da estrutura de testes, felizmente, elevou consideravelmente a confiança na qualidade do código, proporcionando uma compreensão mais aprofundada nos processos de teste.
Em resumo foi possível aprender e praticar:
- Testes frontend com React testing library
- Criação de Mocks de API com Mock Service Worker
- Componentes e modificação props
- Formulários e validações usando react hook form e zod
- Aplicação de useContext
- Páginas com React router
- Estilização com styled components
Após clonar, baixar ou fazer um fork, utilize o comando abaixo para instalar as dependências do projeto:
npm installPara rodar os testes utilize:
npm testEsse projeto te permite:
- Buscar pelo nome de um pokémon
- Buscar pelo ID de um pokémon
- Filtrar pokémons por tipo
- Ver detalhes como tipos, habilidades e movimentos de um pokémon desejado
- Como desenvolvedor, rodar testes na aplicação!
💌 Para me mandar uma mensagem basta usar um dos botões abaixo!
