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.
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.
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.
Uso: Implementa suporte à internacionalização.
Funcionalidade: Exibe os nomes dos Pokémon no idioma do usuário, baseado nos dados da 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.
git clone https://github.com/seuusuario/vuedex.git
cd vuedexnpm installnpm run devA aplicação estará disponível em http://localhost:5173.
- Os Pokémon são carregados aos poucos conforme o usuário rola a tela, evitando sobrecarga na página (20 em 20).
- Filtre Pokémon por tipo (água, fogo, planta, etc.) diretamente na barra superior.
- 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).
- As transições entre elementos são suaves e fluidas, melhorando a experiência do usuário com sua componentização de animations.
- Projeto responsivo e com boas práticas de acessibilidade aplicadas, auxiliadas pelo layout do bootstrap.
- A VueDex traduz a página de descrições dos Pokémon dinamicamente com base no idioma configurado.
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
-
Faça um fork do repositório.
-
Crie um novo branch:
git checkout -b minha-funcionalidade
-
Commit suas alterações:
git commit -m "Minha funcionalidade" -
Faça o push para o branch:
git push origin minha-funcionalidade
-
Pronto! Já pode abrir seu Pull Request.