Skip to content

yuripinheirot/react-query-keycloak

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

POKEDEX

presentation

☢️ NÃO É UMA SIMPLES POKEDEX

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.

🎨 Características

  • 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.

🚀 Começando

⚠️ Antes de executar esta aplicação, é essencial que todo o backend seja configurado e instalado corretamente.

Pré-requisitos

  • Node.js >= 16
  • yarn
  • git

Instalação

  1. Clone este repositório:
git clone https://github.com/yuripinheirot/pokemon-project-front
  1. Navegue até o diretório do projeto:
cd pokemon-project-front
  1. Instale as dependências:
yarn
  1. Execute o aplicativo localmente:
yarn dev

O aplicativo agora estará rodando em http://localhost:3000.

🛠️ Construído Com

📝 Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

💬 Contribuições

Contribuições são sempre bem-vindas! Sinta-se à vontade para abrir uma issue ou enviar um pull request.

About

Uma simples POC usada para testar react-query e keycloak

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published