Data LOLvers

Index

• 1. Preamble
• 2. Product definition
• 3. User stories
• 4. Low fidelity prototype
• 5. High fidelity prototype
• 6. Boilerplate
• 7. Learning goals checklist

1. Preamble

As a second project, we decided to focus on League of Legends, we found this game as an opportunity to explore the game world, illustration and software development. Our project is going to be Responsive and it has four user histories based on our research. The principal meaning of Data Lovers is to organize, modify, and create selectors of the data.

2. Product definition

Our product is an organized and practice way to filter the data of League of Legends, we decided to make a friendly and intuitive interface, firstly with a knowledge in users needs. In second place, our design is oriented to minimalism and simple

3. User stories

H1

I, as a curious player, want to see all the champions available in the game to choose one to play.

• Acceptance criteria

  • Images of champions
  • Names of champions
  • Mobile interface
  • Links to have more info

• Definition of done

  • Sketch (Low fidelity)
  • Sketch's feedback (Laboratoria- External)
  • High fidelity prototype
  • Feedback Figma prototype
  • Fork and clone repository
  • HTML
  • CSS (Header and footer)
  • Show data (name and splash)
  • Upload repository in GitHub

H2

I, as an user, want to filter champions by role to organized my team.

• Acceptance criteria

  • Select a role with a click
  • See all champions that corresponds to my selection
  • Champion's name

• Definition of done

  • Update high fidelity prototype
  • Feedback Figma prototype
  • Function role
  • Call function with addEventListenner
  • Update repository

H3

I, as an user, want to search champions by name

• Acceptance criteria

  • See champions that contains characters writed

• Definition of done

  • Update high fidelity prototype
  • Feedback Figma prototype
  • Function to search
  • Call function with addEventListenner
  • Unitary test
  • Update repository

H4

I, as an user, want to know a specific information about my champions

• Acceptance criteria (name, title, blurb & splash)

  • See champions that contains characters writed

• Definition of done

  • Update high fidelity prototype
  • Feedback Figma prototype
  • Function to search
  • Call function with addEventListenner
  • Responsive (mobile first)
  • Unitary test
  • Update repository

4. Low fidelity prototype

5. High fidelity prototype

We used Figma to perform this requirement, this is our project

Mobile version - First sprint

Mobile version - Second sprint

Mobile version - Third sprint

Mobile version - Fourth sprint

6. Boilerplate

.
├── EXTRA.md
├── README.md
├── package.json
├── src
|  ├── data\lol
|  |  ├── lol
|  |  ├── lol.js
|  |  ├── lol.json
|  |  └── README.md
|  ├── fonts
|  |  └── Friz Quadrata Regular.ttf
|  ├── img
|  |  └── (Visual resources)
|  ├── data.js
|  ├── index.html
|  ├── main.js
|  ├── responsive.css
|  └── style.css
└── test
   └── data.spec.js

7. Learning goals checklist

HTML y CSS

• Uso de HTML semántico.
• Uso de selectores de CSS.
• Construir tu aplicación respetando el diseño realizado (maquetación).
• Uso de flexbox en CSS.

DOM y Web APIs

• Uso de selectores del DOM.
• Manejo de eventos del DOM.
• Manipulación dinámica del DOM. (appendChild |createElement | createTextNode| innerHTML | textContent | etc.)

JavaScript

• Uso de condicionales (if-else | switch | operador ternario)
• Uso de bucles (for | for..in | for..of | while)
• Uso de funciones (parámetros | argumentos | valor de retorno)
• Manipular arrays (filter | map | sort | reduce)
• Manipular objects (key | value)
• Uso ES modules (import | export)
• Diferenciar entre expression y statements.
• Diferenciar entre tipos de datos atómicos y estructurados.

Testing

• Testeo unitario.

Estructura del código y guía de estilo

• Organizar y dividir el código en módulos (Modularización)
• Uso de identificadores descriptivos (Nomenclatura | Semántica)
• Uso de linter (ESLINT)

Git y GitHub

• Uso de comandos de git (add | commit | pull | status | push)
• Manejo de repositorios de GitHub (clone | fork | gh-pages)
• Colaboración en Github (branches | pull requests | |tags)

UX

• Diseñar la aplicación pensando y entendiendo al usuario.
• Crear prototipos para obtener feedback e iterar.
• Aplicar los principios de diseño visual (contraste, alineación, jerarquía)
• Planear y ejecutar tests de usabilidad.

8. Checklist

• Usa VanillaJS.
• No hace uso de this.
• Pasa linter (npm run pretest)
• Pasa tests (npm test)
• Pruebas unitarias cubren un mínimo del 70% de statements, functions y lines y branches.
• Incluye Definición del producto clara e informativa en README.md.
• Incluye historias de usuario en README.md.
• Incluye sketch de la solución (prototipo de baja fidelidad) en README.md.
• Incluye Diseño de la Interfaz de Usuario (prototipo de alta fidelidad) en README.md.
• Incluye link a Zeplin o Figma en README.md.
• Incluye el listado de problemas que detectaste a través de tests de usabilidad en el README.md.
• UI: Muestra lista y/o tabla con datos y/o indicadores.
• UI: Permite ordenar data por uno o más campos (asc y desc).
• UI: Permite filtrar data en base a una condición.
• UI: Es responsive.