Skip to content

adilamarcelefreitas/Escolha-seu-campeao

 
 

Repository files navigation

Escolha o seu Campeão 🏆👾

Projeto Data Lovers

Segundo projeto realizado para o Bootcamp da Laboratória. O objetivo deste projeto é criar uma aplicação responsiva que forneça informações sobre os campeões do jogo League of Legends, permitindo ordenação alfabética, filtragem por função do campeão e pesquisa por nome. 🎮

Desenvolvido por:

Acesse o projeto: (https://lauradefreitas2.github.io/SAP011-data-lovers/src) 🚀

Tecnologias Utilizadas 💻

  • HTML
  • CSS
  • JavaScript Vanilla
  • Figma - Utilizado para prototipagem 🎨

Índice 📌

  1. Resumo do Projeto
  2. Protótipos
  3. Pesquisa de Campo
  4. Histórias de Usuários
  5. Interface
  6. Responsividade
  7. Seta de Retorno
  8. Extra
  9. Checklist de Objetivos Alcançados

Resumo do Projeto 📄

O projeto "Escolha o seu Campeão" oferece aos usuários a oportunidade de explorar informações sobre os campeões disponíveis no jogo League of Legends, auxiliando na escolha do melhor campeão para suas partidas. A aplicação proporciona informações básicas para facilitar a decisão dos jogadores.

Protótipos 📌

Foram desenvolvidos protótipos de baixa e alta fidelidade para a interface do projeto. A fase de prototipagem foi realizada utilizando a ferramenta Figma para visualização e interações. Os protótipos levaram em consideração as necessidades dos jogadores, tanto iniciantes quanto experientes.

Pesquisa de Campo 🤓

Antes de iniciar o desenvolvimento da aplicação, realizamos uma pesquisa de campo para identificar as informações e funcionalidades que os jogadores de League of Legends gostariam de acessar. Utilizamos um formulário para coletar essas informações, permitindo-nos criar uma aplicação alinhada às expectativas dos usuários.

Histórias de Usuários 💬

Com base na pesquisa de campo e nos protótipos desenvolvidos, elaboramos histórias de usuários que representam cenários de interação com a aplicação. Essas histórias foram incorporadas ao projeto, garantindo que as necessidades dos usuários fossem atendidas. Cada história de usuário é mapeada para funcionalidades específicas da aplicação.

Interface ✨

A interface do projeto foi cuidadosamente projetada com base nas sugestões dos usuários obtidas na pesquisa de campo e nas histórias de usuários. A página inicial apresenta um menu de navegação com opções para buscar campeões por função, ordenar alfabeticamente e filtrar por categoria. Além disso, oferece links interativos para informações adicionais e para baixar o jogo.

[Tela Principal do Site - Cards Front]  

site_interface01  

[Tela Principal do Site - Cards Back]  

site_interface02  

Responsividade 📱

A aplicação foi desenvolvida com responsividade em mente, proporcionando uma experiência agradável em dispositivos de diferentes tamanhos de tela. A interface se adapta para garantir que os jogadores possam acessar as informações dos campeões independentemente do dispositivo utilizado.

| mobile01 |   mobile03 |

Seta de Retorno ⬆️

Foi adicionada uma seta de retorno no site, que aparecerá quando o usuário estiver na terceira fileira de cards. Essa seta permite que o usuário retorne rapidamente ao início da página, melhorando a experiência de navegação.

site_interface_seta

Percetual das categorias 📊

Funcionalidade implementada na aplicação, permitindo que os jogadores obtenham um cálculo agregado das categorias de campeões. Por exemplo, ao filtrar pela função "Atiradores", a aplicação exibirá o número total de campeões com essa função e a porcentagem correspondente em relação ao total.

Checklist de Objetivos Alcançados 🏆

  • [✅] Utilização de VanillaJS.
  • [✅] Conformidade com o linter (npm run pretest).
  • [✅] Testes unitários cobrem no mínimo 70% de statements, functions, lines e branches.
  • [✅] Definição clara e informativa do produto no README.md.
  • [✅] Inclusão das histórias de usuário no README.md.
  • [✅] Inclusão do rascunho da solução (protótipo de alta fidelidade) no README.md.
  • [✅] Interface que permite a ordenação dos dados por um ou mais campos (ascendente e descendente).
  • [✅] Interface que permite a filtragem dos dados com base em uma condição.
  • [✅] Responsividade para diferentes tamanhos de tela.

Desenvolvido como parte do Bootcamp da Laboratória.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 93.3%
  • CSS 3.6%
  • HTML 3.1%