https://github.com/recheeduardo/vuedex
Uma PokĆ©dex moderna e interativa. desenvolvida com VueJS e alimentada pela PokeAPI! š“āŖ
https://github.com/recheeduardo/vuedex
api-forge bootstrap motion-vue pokeapi pokedex router-dom tabler-icons vuejs vuex
Last synced: 4 months ago
JSON representation
Uma PokĆ©dex moderna e interativa. desenvolvida com VueJS e alimentada pela PokeAPI! š“āŖ
- Host: GitHub
- URL: https://github.com/recheeduardo/vuedex
- Owner: RecheEduardo
- Created: 2025-04-07T23:28:29.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-12T01:49:00.000Z (about 1 year ago)
- Last Synced: 2025-07-28T21:45:48.693Z (11 months ago)
- Topics: api-forge, bootstrap, motion-vue, pokeapi, pokedex, router-dom, tabler-icons, vuejs, vuex
- Language: Vue
- Homepage: https://eduardo-pokedex.vercel.app
- Size: 1.86 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
**VueDex** Ć© uma aplicaĆ§Ć£o web desenvolvida com Vue.js 3, Bootstrap e Vitest, que simula uma PokĆ©dex interativa e moderna. Ela consome dados da API oficial de pokĆ©mon PokĆ©API para listar, filtrar e exibir detalhes completos dos PokĆ©mon de forma responsiva, com animaƧƵes suaves e acessibilidade garantida com internacionalizaĆ§Ć£o e interface amigĆ”vel.
---
# šø DemonstraĆ§Ć£o
---
# š Tecnologias Utilizadas
## 
Framework JavaScript progressivo utilizado para construir a interface do projeto. O Vue.js 3 oferece reatividade avanƧada, composiĆ§Ć£o de componentes e uma curva de aprendizado amigĆ”vel, ideal para criar interfaces ricas com facilidade.
## 
Na vuedex, o javascript Ć© usado junto com typescript pra controlar o comportamento da aplicaĆ§Ć£o, buscar e tratar os dados da pokĆ©api, gerenciar o estado global com vuex, controlar a navegaĆ§Ć£o com vue router e aplicar animaƧƵes com motion one. ele tambĆ©m Ć© responsĆ”vel por lidar com eventos, lĆ³gica de exibiĆ§Ć£o, filtros, e interaƧƵes nos componentes vue, garantindo que a pokĆ©dex funcione de forma dinĆ¢mica e responsiva.
## 
Framework CSS utilizado para estilizar e tornar a interface da aplicaĆ§Ć£o mais agradĆ”vel e responsiva. O Bootstrap facilita o design da aplicaĆ§Ć£o, proporcionando uma interface limpa e consistente em dispositivos mĆ³veis e desktop sem a necessidade de criar CSS do zero. Ele inclui componentes como botƵes, formulĆ”rios, modais e grids, que sĆ£o amplamente utilizados para garantir uma experiĆŖncia de usuĆ”rio rica e adaptĆ”vel.
## 
Gerenciador de estado utilizado para compartilhar dados entre componentes. A VueDex usa Vuex para armazenar e atualizar a lista de PokĆ©mon, filtros e configuraƧƵes globais da aplicaĆ§Ć£o.
## 
Biblioteca leve de animaƧƵes utilizada para aplicar transiƧƵes suaves entre componentes, especialmente nos cards de PokƩmon e pƔginas de detalhe.
---
# š¦ Bibliotecas Complementares
### **Vue Router** š
**Uso**: Gerencia as rotas da aplicaĆ§Ć£o e navegaĆ§Ć£o entre pĆ”ginas.
**Funcionalidade**: Permite navegaĆ§Ć£o entre lista de PokĆ©mon, pĆ”gina de detalhes e pĆ”gina de erro personalizada.
### **i18n** š
**Uso**: Implementa suporte Ć internacionalizaĆ§Ć£o.
**Funcionalidade**: Exibe os nomes dos PokƩmon no idioma do usuƔrio, baseado nos dados da PokƩAPI.
### **PokĆ©API** š±āš
**Uso**: API pĆŗblica utilizada como fonte de dados oficial para o app!
**Funcionalidade**: Fornece todas as informaƧƵes dos PokƩmon: imagens, tipos, habilidades, descriƧƵes e mais.
---
# āļø InstalaĆ§Ć£o e ExecuĆ§Ć£o
### 1. Clonar o repositĆ³rio
```bash
git clone https://github.com/seuusuario/vuedex.git
cd vuedex
```
### 2. Instalar dependĆŖncias
```bash
npm install
```
### 3. Executar o projeto localmente
```bash
npm run dev
```
A aplicaĆ§Ć£o estarĆ” disponĆvel em `http://localhost:5173`.
---
# š§© Funcionalidades
### **Scroll Infinito**:
- Os PokĆ©mon sĆ£o carregados aos poucos conforme o usuĆ”rio rola a tela, evitando sobrecarga na pĆ”gina (20 em 20).
##
### **Filtro por Tipo**:
- Filtre PokƩmon por tipo (Ɣgua, fogo, planta, etc.) diretamente na barra superior.
##
### **PƔgina de Detalhes**:
- Ao clicar em um PokĆ©mon, o usuĆ”rio visualiza detalhes completos com animaƧƵes em cadeia (nome, descriĆ§Ć£o, tipos, movimentos, jogos e evoluƧƵes).
##
### **AnimaƧƵes com Motion Vue**:
- As transiƧƵes entre elementos sĆ£o suaves e fluidas, melhorando a experiĆŖncia do usuĆ”rio com sua componentizaĆ§Ć£o de animations.
##
### **Acessibilidade e Responsividade**:
- Projeto responsivo e com boas prƔticas de acessibilidade aplicadas, auxiliadas pelo layout do bootstrap.
##
### **InternacionalizaĆ§Ć£o (I18n) **:
- A VueDex traduz a pƔgina de descriƧƵes dos PokƩmon dinamicamente com base no idioma configurado.
---
# š Estrutura do Projeto
```
src/
āāā assets/ # Imagens, Ćcones e estilos globais
āāā components/ # Componentes reutilizĆ”veis (cards, filtros, loaders)
āāā views/ # PĆ”ginas principais (Home, Detail, Error)
āāā router/ # ConfiguraĆ§Ć£o das rotas com Vue Router
āāā store/ # Gerenciamento de estado global com Vuex
āāā i18n/ # InternacionalizaĆ§Ć£o (idiomas)
āāā services/ # ServiƧos HTTP para consumo da PokĆ©API
āāā App.vue # Componente raiz da aplicaĆ§Ć£o
```
---
# š¤ ContribuiĆ§Ć£o
1. FaƧa um fork do repositĆ³rio.
2. Crie um novo branch:
```bash
git checkout -b minha-funcionalidade
```
3. Commit suas alteraƧƵes:
```bash
git commit -m "Minha funcionalidade"
```
4. FaƧa o push para o branch:
```bash
git push origin minha-funcionalidade
```
5. Pronto! JĆ” pode abrir seu Pull Request.
---
š Ć isso! Caso tenha gostado do repositĆ³rio, nĆ£o se esqueƧa de dar uma olhada no meu perfil ā¤