🗒️ Resumo do projeto

Neste projeto você desenvolverá uma página web para visualizar um conjunto (set) de dados que se adeque ao que seu usuário necessita. Entenda quem é seu usuário e o que ele necessita saber ou ver exatamente; assim já poderá criar uma interface que o ajude a interagir e entender melhor os dados. Estes são os dados que propomos:

Pokémon: Neste set você encontrará uma lista com os 151 Pokémons da região de Kanto, junto com suas respectivas estatísticas usadas no jogo Pokémon GO.

Como produto final você terá que criar uma página web que permita visualizar os dados, filtrá-los, ordená-los e fazer algum cálculo agregado. Como esclarecimento, ao falar de cálculo agregado, nos referimos a diferentes cálculos que se pode fazer com os dados e trazer informações ainda mais relevantes para o usuário. Uma opção seriam cálculos estatísticos com média, mínimo e máximo. Por exemplo, se temos uma coleção que representa um grupo de pessoas e cada pessoa está representada com um objeto com uma propriedade altura, poderíamos calcular a altura média em um grupo, entre outras coisas.

🎯 Objetivos de aprendizagem

O objetivo principal deste projeto é que você aprenda a desenvolver uma interface web onde se possa visualizar e manipular dados, entendendo o que o usuário necessita.

Falando com mais clareza, você irá:

Consolidar seus conhecimentos base a respeito de construção de páginas web com HTML e CSS, lógica de programação, linguagem de programação JavaScript
Pensar nas necessidades dos usuários para criar uma interface que faça sentido e com tarefas claras.
Trabalhar com suas definições de pronto (definition of done) na organização e planificação de seu trabalho.
Definir os dados e de que forma mostrá-los no produto, baseando-se em seu entendimento de usuário.
Criar produtos que sigam os princípios básicos de usabilidade.
Iterar o desenho do produto, baseando-se nos resultados dos testes de usabilidade.
Realizar requisições utilizando fetch para carregar os dados a serem utilizados pelo frontend
Manipular arrays e objetos.
Manipular o DOM (agregar elementos dinamicamente, baseados nos dados).
Manejar eventos do DOM para permitir interação com o usuário (dados filtrados, ordenados, etc).

📌 Parte obrigatória

Os critérios para considerar que você completou o projeto são:

Definição do produto

Documente brevemente seu trabalho no arquivo README.md de seu repositório, nos contando como foi seu processo de desenvolvimento do projeto e como acredita que seu produto resolve o problema (os problemas) do seu usuário.

Desenho da interface de usuário

Protótipo

Durante seu trabalho você deverá ter feito esboços de sua solução ferramentas como Marvel ou o Figma. Recomendamos que você tire fotos de todas as iterações que faça, suba para seu repositório, e as mencione em seuREADME.md, juntamente com o link para o seu protótipo.

Testes de usabilidade

Durante o desafio você deverá realizar testes de usabilidade com diversos usuários. Com base nos resultados dos testes, você deverá reorganizar seu protótipo. Documente as diversas iterações para ter ideia da evolução e para conseguir resgatar ideias mais tarde.

Implementação de Interface de Usuário (HTML/CSS/JS)

Logo após desenhar sua interface de usuário você deverá trabalhar em sua implementação. Como mencionamos, não é necessário que desenvolva uma interface tal como a desenhou. Você terá um tempo limitado para codar, então, deverá priorizar. Como mínimo, sua implementação deve:

Mostrar os dados em uma interface: pode ser um card, uma tabela, uma lista, etc.
Permitir ao usuário filtrar e ordenar os dados.
Calcular estatísticas como média aritmética, máximo e/ou mínimo de algum atributo numérico, ou contar quantas vezes aparece um determinado valor, por exemplo.

🏆 Desafio

Features/características extras sugeridas:

No lugar de consumir os dados de forma estática, você pode trabalhar com eles de forma dinâmica, carregando um arquivo JSON por meio de um fetch. Disponibilizaremos uma versão .js e uma .json de cada set de dados.
Agregar em sua interface de usuário visualizações gráficas. Para isso, recomendamos explorar bibliotecas de gráficos como Chart.js ou Google Charts.

⚙️ Considerações técnicas

A lógica do projeto deve estar implementada completamente em JavaScript (ES6), HTML e CSS
Neste projeto NÃO está permitido usar bibliotecas ou frameworks, somente vanilla JavaScript, com exceção das bibliotecas para fazer gráficos (charts)
Os dados a serem utilizados pelo frontend devem ser carregados de um arquivo JSON externo

🔍 Conteúdo de referência

Experiência de Usuário (UX Design)

Entrevistas com usuários
Princípios de usabilidade

Desenvolvimento Front-end

📝 Checklist

Criar um repositório no seu Github para o desenvolvimento desse projeto
Usar VanillaJS.
Inclui Definição de produto clara e informativa no README.md.
Inclui esboço da solução (protótipo de baixa fidelidade e de alta fidelidade, se houver) no README.md.
Inclui a lista de problema detectados através dos testes de usabilidade no README.md.
UI: Mostra lista e/ou tabela com dados e/ou indicadores.
UI: Permite ordenar os dados por meio de um ou mais campos (asc e desc).
UI: Permite filtrar os dados com base em uma condição.

🛠️ Materiais

Pokémon Data

🦸 Autora

_{Juliana Morikoshi}

📝 Licença

Este projeto esta sob a licença MIT.

Feito com ❤️ por Juliana Morikoshi 👋 Entre em contato!

Jumori / pokemon-data