Skip to content

Site responsivo que exibe os cards dos personagens do jogo League Of Legends e que permite o usuário conhecer mais detalhes de cada personagem, pesquisar por nome, ordenar alfabeticamente e filtrar por nível de dificuldade.

Notifications You must be signed in to change notification settings

tamaracosta/SAP006-data-lovers

 
 

Repository files navigation

Capa do Projeto

LEAGUE OF LEGEND´S CARDS

🎯Objetivo

Destinado aos jogadores de League of Legends, o usuário pode acessar informações sobre os campeões, como ataque, defesa e magia. O projeto também permite realizar uma busca pelo nome, filtrar pela função ou pelo nível de dificuldade de jogabilidade de cada campeão além de ser possível escolher a ordenação alfabética (AZ/ZA).Os filtros podem ser utilizados individualmente ou em conjunto.

📝Descrição do desenvolvimento

O projeto tinha como meta de desenvolvimento construir um site que fornecesse ao usuário os cards dos personagens e sua interação, por meio dos métodos sort(), filter() e algum cálculo agregado, além da realização dos testes unitários.

UX Design

👩🧑História do usuário

Realizamos uma pesquisa com usuários, jogadores de League of Legends e com a coleta de dados analisamos o que deveríamos construir para atender a necessidade dele. Em cada sprint, tentavámos resolver uma história de usuário.

Capa do Projeto

🎨UI Design

Realizamos um rabiscoframe para entender nossas ideias e objetivos. O rabiscoframe ou protótipo de baixa qualidade é uma alternativa rápida, sem se apegar aos detalhes.

Rabiscoframe

Protótipo Alta Fidelidade

🧐Como funciona?

video-lol.mp4

👩‍💻UX Design - Teste de Usabilidade

Com o link gerado da aplicação pela plataforma Netlify enviamos aos usuários um formulário para responder suas experiências ao navegar em nosso site. Foi constatado três sugestões de mudanças:

  1. Padronizar cores dos principais botões do menu;
  2. Retirar o degradê do borda do círculo da página de curiosidade;
  3. Arrumar responsividade para ipad/tablet

📱Responsividade

responsividade-lol.mp4

Testes Unitários

Criamos uma constante com alguns campeões como mock para realizar os testes com as funções sort(), filter() e do cálculo agregado, bem como constantes dos resultados esperados.

Métodos usados:

  • expect(value);
  • .toBe(value);
  • .toThrow(error?);
  • .toStrictEqual(value);

Testes unitários

👨‍💻Tecnologias Utilizadas:

HTML5

CSS3

Javascript

Jest

Node

👩‍🔧Autoras

About

Site responsivo que exibe os cards dos personagens do jogo League Of Legends e que permite o usuário conhecer mais detalhes de cada personagem, pesquisar por nome, ordenar alfabeticamente e filtrar por nível de dificuldade.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Languages

  • JavaScript 99.0%
  • Other 1.0%