Aplicação desenvolvida entre os dias 28 de Junho e 02 de Julho de 2023.
Ver Deploy
Documentação PokeAPI
Ver Portifólio Filipe Bacof
Next.JS
React.JS
Typescript
Tailwind CSS- O botão vermelho narra uma curiosidade sobre o pokémon em tela (se clicar novamente é interrompido);
- O botão amarelo adiciona o pokémon atual para o seu time (ver próximos prints);
- O botão verde faz com que o pokémon atual seja o resultado ao abrir a pokédex no seu dispositivo (por padrão é o Bulbasaur);
- O auto-falante possui uma animação para quando está sendo feita uma narração;
- O plano de fundo se altera dependendo do tipo primário de cada pokémon;
- Há um Easter-Egg escondido, apenas os curiosos irão encontrar;
- A paginação foi feita de 30 em 30 resultados;
- Ao clicar em um card, abre o modal para visualizar mais dados sobre aquele pokémon;
- Os pokémons escolhidos para o seu time são armazenados no Local Storage;
- Há o limite para 6 pokémons no seu time;
- Caso remova qualquer um dos pokémons do seu time, o próximo a ser adicionado preencherá aquela posição;
- Essa tela foi adaptada para dispositivos móveis também (Tailwind é Mobile First);
- Essa tela é uma espécie de tira dúvidas sobre como utilizar a pokédex;
- Inseri uma trivia do jogo Pokémon Fire Red para despertar a nostalgia de quem jovaga no Game Boy;
- É super recomendado o uso de TypeScript em qualquer projeto.
- O TypeScript adiciona recursos de tipagem estática ao JavaScript, trazendo vários benefícios como:
Verificação de tipagem em tempo de compilação: O TypeScript permite detectar erros de tipagem antes mesmo da execução do código, o que ajuda a evitar bugs e torna o desenvolvimento mais robusto.Melhor IntelliSense e autocomplete: Com o uso de tipos explícitos, o TypeScript melhora a experiência de desenvolvimento, fornecendo sugestões de código e informações mais precisas sobre as APIs utilizadas.Refatoração mais segura: O TypeScript permite a reestruturação do código com mais segurança, pois pode identificar potenciais problemas e fornecer avisos durante a refatoração.Maior legibilidade: Com a adição de tipos, o código se torna mais legível e autoexplicativo, o que facilita a compreensão e a manutenção do código ao longo do tempo.
- Durante o processo de desenvolvimento, optei por transformar os trechos que se repetiam em componentes, visando maior reutilização de código. Isso permitiu uma abordagem mais modular e facilitou a manutenção do sistema no futuro.
- Além disso, utilizei o ESLint para automatizar a identação e padronização do código, tornando-o mais consistente e legível. Com isso, pude garantir uma base de código mais limpa e livre de erros.
- Para melhor organizar o projeto, dividi as responsabilidades dos requisitos em diferentes telas, o que promoveu uma melhor separação de preocupações e facilitou o desenvolvimento de cada funcionalidade específica.
- Na elaboração da interface, priorizei a simplicidade visual, mas ao mesmo tempo, fiz um esforço para criar a Pokedex utilizando o Tailwind CSS.
- Essa biblioteca de estilos permitiu uma estilização mais eficiente e consistente, resultando em um design mais atrativo e responsivo. O resultado final tornou o projeto muito mais interessante do que simplesmente listar todos os Pokémons.
- Com o Tailwind CSS o processo de desenvolvimento fica mais produtivo, pois ao invés de ficar alternando entre arquivos de estilização e os componentes, essa ferramenta aloca toda a parte do CSS em classes utilitárias.
- Como estou usando React com o Next.js, que é a sugestão de framework indicada na própria documentação do React, ficou muito mais simples arquitetar minha aplicação.
- O Next.js possui diversas estratégias de renderização eficientes, CSR (Client Side Rendering) SSR (Server Side Rendering) e SSG (Static Site Generation), isso possibilita melhorar o desempenho geral da aplicação.
- Além disso, a estrutura do Next.js facilitou a implementação de rotas e a organização do código em componentes reutilizáveis.
- Com o React, pude utilizar a programação orientada a componentes, o que contribuiu para uma melhor organização e escalabilidade do projeto.
- Essa arquitetura bem estruturada permitiu uma manutenção mais fácil e rápida, além de oferecer uma base sólida para futuras melhorias e expansões do sistema.
- Este não foi o meu primeiro contato com a PokeAPI. Já havia desenvolvido uma aplicação semelhante anteriormente, utilizando HTML, CSS e JavaScript.
- No entanto, neste projeto, dediquei-me ao máximo e levei-o a um nível mais profissionalizado, com mais funcionalidades, com visual mais atrativo e proporcionando uma experiência mais sofisticada e agradável.
- Caso deseje conferir o projeto anterior, vou deixar o link abaixo para o deploy feito no github pages, mas garanto que tudo que foi feito no projeto antigo também está neste, com várias adições e melhorias: