A Pokédex, também conhecida como Poké-Agenda no Brasil, é uma enciclopédia virtual portátil que os treinadores Pokémon transportam para registrar todas as espécies diferentes de Pokémon que são encontradas durante a sua viagem como treinadores 2. Ela é um dos itens mais importantes de um Treinador Pokémon, com ela é possível saber diversas informações sobre as criaturas, sobre seu tipo e também algumas curiosidades importantes.
Este foi construído com as seguintes tecnologias:
- Vite
- React: 18.2.0
- Axios: 1.6.2
- React Router Dom: 6.20.1
- Styled Components: 6.1.1
- PokeAPI;
- Github Pages
primeiro instale as dependências npm install e depois rode o projeto com npm run dev.
O projeto possui três páginas: Home, Pokedex e Página de detalhes.
- Mostrar uma lista de Pokemons, contendo 20 Pokemons vindos da PokeAPI;
- Cada Pokemon é representado por um Card;
- Em cada card de Pokemon tem um botão para adicioná-lo à Pokedex e um outro botão para acessar os detalhes do Pokemon;
- No cabeçalho dessa página, tem um botão para acessar a Pokedex.
- Renderiza a lista de pokémons adicionados na pokedex;
- Em cada card de Pokemon tem um botão para removê-lo da Pokedex e um outro botão para acessar os detalhes do Pokemon.
- No cabeçalho dessa página, tem um botão para voltar para a Home, página com a lista de Pokemons vinda da PokeAPI.
A página da Pokedex do usuário é semelhante a página Home. A diferença é que a lista de Pokemons que é renderizada na tela não vem diretamente da API.
Não existe um endpoint específico na PokeAPI para que isso seja feito. Por isso foi criado a lógica de adicionar os Pokemons em um array para ser renderizado na Pokedex.
- Mostra os detalhes do Pokemon selecionado, com informações descritas.
No cabeçalho, além de um botão de voltar para a última página, haverá um botão (na direita) para adicionar ou remover da Pokedex a partir da página de detalhes.
