106 lines
2.7 KiB
Markdown
106 lines
2.7 KiB
Markdown
|
|
# Pokemon Search
|
|
|
|
## Descrição
|
|
|
|
O Pokemon Search é uma aplicação que permite pesquisar e visualizar informações detalhadas sobre Pokémons usando a API [PokeAPI](https://pokeapi.co/) projeto apresenta uma interface interativa e amigável para facilitar a exploração do mundo dos Pokémons.
|
|
|
|
## Funcionalidades
|
|
|
|
- Campo de busca: Permite pesquisar Pokémons por nome ou ID.
|
|
|
|
- Histórico de pesquisas: Armazena até 5 pesquisas recentes, com opção de selecionar ou remover itens do histórico.
|
|
|
|
- Lista de Pokémons: Exibe uma lista inicial de Pokémons com imagens e nomes.
|
|
|
|
- Detalhes do Pokémon: Mostra informações como altura, peso, tipos, habilidades e estatísticas em um modal.
|
|
|
|
- Carregamento dinâmico: Exibe um indicador de carregamento enquanto busca dados da API.
|
|
|
|
- Tratamento de erros: Mostra mensagens de erro em caso de falha na busca.
|
|
|
|
## Tecnologias Utilizadas
|
|
|
|
- Vue.js: Framework JavaScript para construção da interface.
|
|
|
|
- Pinia: Gerenciamento de estado para manutenção de dados globais (e.g., lista de Pokémons, estado de carregamento, erros).
|
|
|
|
- CSS3: Estilização responsiva e interativa da aplicação.
|
|
|
|
- PokeAPI: API usada para buscar os dados dos Pokémons.
|
|
|
|
## Como Executar
|
|
|
|
1. Requisitos
|
|
|
|
Certifique-se de que você possui as seguintes ferramentas instaladas em sua máquina:
|
|
|
|
Node.js (versão 16 ou superior)
|
|
|
|
npm ou yarn
|
|
|
|
2. Clonar o Repositório
|
|
```sh
|
|
https://github.com/seu-usuario/pokemon-search.git
|
|
cd pokemon-search
|
|
```
|
|
|
|
3. Instalar Dependências
|
|
|
|
Utilize o npm ou o yarn para instalar as dependências do projeto:
|
|
```sh
|
|
npm install
|
|
|
|
# ou
|
|
|
|
yarn install
|
|
```
|
|
4. Executar o Projeto
|
|
|
|
Inicie o servidor de desenvolvimento com o comando:
|
|
```sh
|
|
npm run dev
|
|
|
|
# ou
|
|
|
|
yarn dev
|
|
```
|
|
|
|
O aplicativo estará disponível em http://localhost:5173
|
|
|
|
Estrutura do Projeto
|
|
```sh
|
|
┌── src/
|
|
│ ├── assets/
|
|
│ ├── components/
|
|
│ ├── stores/ # Gerenciamento de estado com Pinia
|
|
│ ├── views/ # Páginas principais do aplicativo
|
|
│ └── App.vue # Componente raiz
|
|
│ └── main.js # Arquivo principal para inicialização
|
|
└── public/
|
|
└── index.html # Arquivo HTML principal
|
|
|
|
```
|
|
|
|
## Personalização
|
|
|
|
Para personalizar o projeto:
|
|
|
|
- Novas funcionalidades: Adicione novos módulos no diretório components ou stores.
|
|
|
|
- Endpoints de API: Atualize ou expanda as chamadas à API no pokemonStore.
|
|
|
|
## Melhorias Futuras
|
|
|
|
- Adicionar paginação na lista de Pokémons.
|
|
|
|
- Implementar busca de Pokémons por tipos.
|
|
|
|
- Melhorar a responsividade para dispositivos menores.
|
|
|
|
- Adicionar testes unitários e de integração.
|
|
|
|
## Contribuições
|
|
|
|
Contribuições são bem-vindas! Sinta-se à vontade para abrir um issue ou enviar um pull request.
|