Além de ser uma Pokédex completa, este projeto vai além com funcionalidades avançadas. Possui um design moderno desenvolvido em React, com layout responsivo, modo noturno, otimização de desempenho através do React-Query e um sistema seguro e robusto de login para que você possa marcar seus Pokémon prediletos. Adicionalmente, a Pokédex se conecta a um middleware backend feito em NestJS, otimizado para caching e acesso à recursos personalizados.
- React: Desenvolvido usando a mais recente versão do React.
- Material Design com MUI: Estética e funcionalidade inspiradas no Material Design, com componentes e ícones oriundos de @mui/material e @mui/icons-material.
- Desenvolvimento em TypeScript: Código fonte da Pokédex escrito em TypeScript, o que assegura robustez e clareza na lógica do projeto.
- Dados Otimizados com React-query: Pokédex utiliza caching com react-query, minimizando a necessidade de requisições repetidas e acelerando o carregamento de dados.
- Conexão com Backend em NestJS: A Pokédex se integra a um middleware backend robusto desenvolvido em NestJS, otimizado para caching e eficiência no acesso de recursos.
- Dark mode: Uma interface que cuida dos seus olhos! Alterne facilmente entre os modos de acordo com sua preferência.
- Pokedex Personalizada: Faça login e salve seus Pokémon favoritos para acessar rapidamente sempre que quiser.
- Autenticação com Keycloak: A Pokédex oferece um sistema de login seguro e robusto através da integração do @react-keycloak/web e keycloak-js.
- Layout Responsivo: Adapta-se perfeitamente a qualquer tamanho de tela, desde dispositivos móveis a desktops.
- Carrossel MUI: Destaques e apresentações interativas na Pokédex são feitos com o componente react-material-ui-carousel.
- Node.js >= 16
- yarn
- git
- Clone este repositório:
git clone https://github.com/yuripinheirot/pokemon-project-front
- Navegue até o diretório do projeto:
cd pokemon-project-front
- Instale as dependências:
yarn
- Execute o aplicativo localmente:
yarn dev
O aplicativo agora estará rodando em http://localhost:3000.
- React
- React-Query
- React Material-UI Carousel: Destaques e apresentações interativas na Pokédex.
- MUI (Material-UI): Estética e funcionalidade inspiradas no Material Design, com componentes e ícones.
- Keycloak: Autenticação robusta através da integração do Keycloak.
- TypeScript: Código fonte da Pokédex escrito em TypeScript, assegurando robustez e clareza.
Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
Contribuições são sempre bem-vindas! Sinta-se à vontade para abrir uma issue
ou enviar um pull request
.