Skip to content

Latest commit

 

History

History
213 lines (159 loc) · 8.4 KB

README.md

File metadata and controls

213 lines (159 loc) · 8.4 KB
Raw

Pokédex


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


💻 Sobre o projeto


previewer
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

Foto do Rodney Sostras no GitHub
Rodney Sostras

  

  

  

  


🎨 Creditos

📝 Licença

Este projeto esta sobe a licença MIT.

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