🚀 PokeDex 🚀

Olá!! Este é um projeto full-stack que criei, um site onde o usuário poderá fazer consultas sobre um pokemon ou criar um time para enfrentar os diversos desafios que os jogos nos proporciona.
Esse projeto foi feito utilizando a API PokeAPI: https://pokeapi.co/

💻 As tecnologias usadas no projeto foram:
- TypeScript
- Styled Components
- Figma
- React
- React Router DOM
- React Icons
- Jest
- Testing Library
- Axios
- eslint
- dotenv

Links

🖥️ Link do repositório da API do projeto: https://github.com/FernandoLuppo/PokeDex-API

Overview

Sobre a criação, o projeto foi feito em cima da API do PokeAPI porém foi realizado uma filtragem de informações para apresentar o layout planejado, falando sobre o layout ele é de minha autoria e foi projetado no Figma.
Enquanto sua funcionalidade, estando deslogado o usuário vai ter acesso a Home onde poderá escolher um pokemon, seja realizando o scroll da página até encontrar ou procurando diretamente pelo nome ou id do pokemon na search bar, após escolher um pokemon o usuário será levado para a outra tela onde terá acesso as informações do pokemon como os ataques e seus respectivos níveis, os status e outros.
Para a proteção do usuário o monitoramento do próprio na página é feito atravéz de JWT com Refresh Token e Cookies, as senhas são criptografadas e todos formulários são validados

Como usar

Caso queira fazer um clone dessa aplicação recomendo que faça da API também pois sem ela o projeto não irá funcionar corretamente, primeiramente instale as dependências tanto do cliente quanto do servidor, após o projeto precisará de dois terminais um para o front e um para o back.

No primeiro terminal, estando no root pasta do front utilize o comando: yarn dev para inicializar o React.

No segundo terminal, estando no root pasta do back utilize o comando yarn start para inicializar o servidor.

Página Home

Estando na Home o usuário tem acesso a lista de pokemons e ao search bar onde o usuário poderá escolher um pokemon para se informar, caso o usuário esteja deslogado na side bar terá dois botões para levá-lo a pagina de login ou de registro, e caso o usuário já esteja logado, no side bar irá aparecer seu nome, um botão para levá-lo ao seu perfil e um botão de deslogar caso o usuário queira sair da conta.

Página Pokemon

Na página do pokemon é possível ver as informações base do próprio assim como sua descrição, ataques e leveis em que se aprende, caso o usuário esteja logado irá aparecer um botão para adicionar o pokemon em questão a equipe caso ela não esteja cheia.

Página My Profile

A página do usuário é onde ele poderá alterar o nome e o seu email, assim como visualizar e gerenciar o seu time pokemon, ela só pode ser acessada caso o usuário esteja logado.

Login e Registro

A página de Login e Registro serve para comprir ambos seus respectiveis papeis, as páginas possuem validação em seu formulário caso o usuário preencha algum campo errado ele será notificado, elas possuem um botão para retornar para Home, na página de Login há um botão para trocar a senha caso o usarío a perca.

Pagina Recuperar a Senha - Validação de Email

Essa página é a primeira etapa para a troca de senha, nela o usuário colocar o email que foi cadastrado e será enviado um código para ele, após o usuário tera um determinado tempo para preencher o código, caso contrário o próprio é invalidado, depois de colocar o código certo o usuário sera redirecionado para a segunda etapa de troca de senha.

Página Recuperar a Senha - Troca de Senha

Agora na segunda etapa o usuário terá que criar uma nova senha, após ele será redirecionado para a página de Login novamente.