Resumen del proyecto 👩‍💻

El proyecto consiste en crear una SPA mobile first efocada a usuarias que quieran compartir tips, información o hacer preguntas sobre vida saludable y ejercicio con otras usuarias. Las usuarias pueden registrarse con correo electronico y contraseña o bien inciar sesión con Google o GitHub. También se pueden realizar publicaciones y a estas mismas editarlas, eliminarlas y darles like.

Historias de Usuario y Prototipos ✍🏼

Link de prototipo en figma: https://www.figma.com/file/I78mW1V6LIhPVUdTbmaPIY/GymPartner?node-id=0%3A1

HU1-Yo como usuaria de (GYM PARTNERS), quiero ver dos botones, para navegar al registro o inicio de sesión.

HU2-Yo como usuaria de (GYM PARTNERS), quiero poder registrarme con mi correo, para hacer uso de la red social

HU3-Yo como usuaria de (GYM PARTNERS), quiero poder hacer login mediante: -Mi correo y contraseña -Mediante Google -Mediante Git Hub para hacer uso de la red social.

HU4- Yo como usuaria de (GYM PARTNERS), quiero poder cerrar mi sesión, para en caso de que inicie mi sesión en otra computadora, no puedan usar mi cuenta

HU5- Yo como usuaria de (GYM Partners), quiero poder hacer una publicación en el muro (solo texto), para interactuar con los demás usuarios

HU-6 Yo como usuaria de (GYM PARTNERS), quiero poder dar like a una publicación

HU-7 Yo como usuaria de (GYM Partners), quiero poder quitar mi like, para cuando le di like a una publicación sin querer

HU-8 Yo como usuaria de (GYM PARTNERS), quiero poder eliminar un post

HU-9 Yo como usuaria de (GYM PARTNERS), quiero ver un mensaje de confirmación al borrar un post

HU-10 Yo como usuaria de (GYM Partners), quiero poder editar mi publicación, para agregar o quitar contenido del post

Prototipo Final del Feed

Trabajo Colaborativo 🤝🏼

Para la elaboración de este proyecto, primeramente acordamos horarios de trabajo colaborativo e investigación de forma individual. Para ello utilizamos la herramienta Trello GYM Partners, en la cual organizamos una lista de tareas a realizar día con día, a lo largo de cada sprint, según las Historias de Usuario diseñadas para alcanzar los objetivos de este proyecto. En el tablero de Trello se organizo en columnas; project backlog, sprint backlog, doing, done, help (bloqueos que se presentaron durante el proyecto) y links de apoyo.

Pruebas Unitarias 🔎

En este proyecto la técnica utilizada para simular objetos fue mocking, para las funciones que utilizan servicios de Firebase, con la finalidad de poder ejecutar pruebas unitarias.

Objetivos de Aprendizaje 👓

HTML

• [✔️] Uso de HTML semántico: header, div, main, select | option, input, button, label, footer

CSS

• [✔️] Uso de selectores de CSS

• [✔️] Modelo de caja (box model): borde, margen, padding

• [✔️] Uso de flexbox en CSS

• [✔️] Uso de selectores del DOM

Web APIs

• [✔️] Uso de selectores del DOM (querySelector)

• [✔️] Manejo de eventos del DOM (addEventListener)

• [✔️] Manipulación dinámica del DOM ( append, appendChild, createElement, innerHTML, textContent)

• [✔️] Ruteado (window.location, History)

JavaScript

• [✔️] **Arrays **

• [✔️] Objetos (key, value)

• [✔️] Diferenciar entre tipos de datos primitivos y no primitivos

• [✔️] Variables (declaración, asignación, ámbito)

• [✔️ ] Uso de condicionales (if-else, lógica booleana)

• [✔️] Uso de bucles/ciclos (for)

• [✔️] Funciones (params, args, return)

• [✔️] Pruebas unitarias (Jest: describe, expect, toBe)

• [✔️] Pruebas asícronas

• [✔️] Uso de mocks y espías

• [✔️] Módulos de ECMAScript (ES Modules: import y export)

• [✔️] Uso de linter (ESLINT)

• [✔️] Uso de identificadores descriptivos (Nomenclatura y Semántica)

• [✔️] Diferenciar entre expresiones (expressions) y sentencias (statements)

• [✔️] Callbacks

• [✔️] Promesas

Control de Versiones (Git y GitHub)

• [✔️] Git: Instalación y configuración

• [✔️] Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)

• [✔️] Git: Integración de cambios entre ramas (branch, checkout, fetch, merge)

• [✔️] GitHub: Creación de cuenta y repos

• [❌] GitHub: Despliegue con GitHub Pages

• [✔️] GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)

• [❌] GitHub: Organización en Github (projects | issues | labels | milestones | releases)

User-centricity

• [✔️] Diseñar un producto o servicio poniendo a la usuaria en el centro

Product-design

• [✔️] Crear prototipos de alta fidelidad que incluyan interacciones

• [✔️] Seguir los principios básicos de diseño visual

Research

• [❌] Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad

Firebase

• [✔️] Firebase Auth
• [✔️] Firestore
• [✔️] Firebase hosting

Vista Final del Proyecto 💻

Final Product View