Pokédex

Sobre • Requisitos • Recursos • Como executar • Tecnologias • Autor • Creditos • Licença

💻 Sobre o projeto

Uma enciclopédia virtual que registra todas as espécies diferentes de Pokémon
DEMO: GITHUB-PAGES | VERCEL

🏆 Pokédex - Uma aplicação Web em VueJS que lista pokemons com suas características.

Utilizei o framework VueJS para consumindo uma API pública com dados dos pokemons, na estilização foi usado o framework TailwindCss.

Uma challenge realizada para testar meus conhecimentos tendo que comprir os requisitos abaixo. Branch de entrega challenge-finish.

🎯 Requisitos

• Consumir API https://pokeapi.co/docs/v2#info.
• Listagem dos Pokémon com scrol Infinito.
• Filtros para nome, id, tipo e espécie.
• Suporte aos i18n.
  • Idioma Português.
  • Idioma Inglês.
  • Idioma Espanhol.
• Card do pokémon.
  • Todos os sprites do Pokémon.
  • Seus movimentos de Ataques.
  • Visualizar às evoluções de cada Pokémon, se houver.
  • Visualizar todos os games (game_indices) que o Pokémon está presente.
• Deploy na Vercel.

O app deverá ser desenvolvido utilizando:

Vue.JS;

HTML + CSS + JS + Bootstrap (opcionalmente);

API https://pokeapi.co/docs/v2#info para o backend.

O app deverá ser dotado das seguintes funcionalidades:

Listagem dos Pokémon com scroll infinito, contendo filtros para nome, id, tipo e espécie;

O app deve contar com suporte aos idiomas português, inglês e español, disponíveis na API;

Abrir um card do Pokémon na listagem;

No card:

Todos os sprites do Pokémon;

Seus movimentos de ataque;

Visualizar às evoluções de cada Pokémon, se houver;

Visualizar todos os games (game_indices) que aquele Pokémon está presente.

Você poderá usar quaisquer bibliotecas que desejar para acelerar o seu desenvolvimento.

Opcionais:

Se conseguir, escreva testes automatizados simples;

Se conseguir, implemente internacionalização;

Se conseguir, utilize VueX para gerenciamento de estado;

Se conseguir, torne a aplicação responsiva.

Quanto a infra-estrutura, a sua aplicação deve estar publicada no Vercel (https://vercel.com/) e seu código deve estar acessível em sua conta do Github. Não iremos considerar a entrega de uma aplicação que não esteja publicada e de um código que não esteja no Github, de modo que possamos avaliar a evolução do seu código, ou seja, não aceitaremos a entrega funcionando apenas em Localhost.

Caso não esteja habituado com o Vercel, você pode recorrer a seguinte documentação: https://vercel.com/guides/deploying-vuejs-to-vercel .

📦 Recursos

• Responsivo.
• Dark theme.
• Página de erro '404 - not found'.
• Vuex - Gerenciador de estado
• Testes automatizados
• Github Page - SPA routing.
• SEO

🚀 Como executar o projeto

# Clone este repositório
$ git clone git@github.com:rodneysostras/pokedex.git
# Acesse a pasta do projeto no seu terminal/cmd
$ cd pokedex
# Instale as dependências
$ npm install
# Execute a aplicação em modo de desenvolvimento
$ npm run serve
# A aplicação será aberta na porta:8080 - acesse http://localhost:8080

Na pasta .devcontainer possui as configurações para subir o container docker do ambiente de desenvolvimento deste projeto
Fique a vontade para usar o docker-composer ou a extensão do vscode Remote Development que e o recomendado
Após o start do container realize o comando no container npm install depois npm run serve

🛠 Tecnologias

• Vue • Framework Javascript open source utilizado para criar aplicações SPA.
• Vuex • Biblioteca de gerenciamento de estado para aplicativos VueJS.
• Axios • Cliente HTTP leve semelhante à API Fetch nativa do JavaScript.
• Tailwindcss • Framework CSS com conceito utility classes para criação de componentes.
• Eslint • Ferramenta que analisa o código permite identificar erros quanto ao padrão de escrita que definimos.
• Prettier • Ferramenta que analisa o código com finalidade de "forçar" um padrão de código.
• @vue/cli • Ferramenta de linha de comando feita pela comunidade do Vue.
• Vercel • Plataforma voltada para a hospedagem de aplicações.

Veja o arquivo package.json

🦸 Autor

Rodney Sostras

  

  

  

  

🎨 Creditos

• Na criação do componente CardPokemon da página home me inspirei no design do artista BryanC - Pokemon OG
• Me espirei na página pokemon no design do artista Austin Jones - Pokédex Gengar
• No componente CardPokemonDescription da página favorite me espirei no design do artista Emil Komachkov - Pokemania APP Screens

📝 Licença

Este projeto esta sobe a licença MIT.

Feito com ❤️ por Rodney Sostras 👋🏽 Entre em contato!

Voltar ao topo ⬆