Skip to content

Sitio web estructurado con Vanilla Javascript, que permite a los usuarios Crear, Leer, Actualizar, Eliminar y dar me gusta a las publicaciones, usando los servicios de Firebase como nuestro back-end.

Notifications You must be signed in to change notification settings

Karlacruz11/CDMX013-social-network

 
 

Repository files navigation

GYM PARTERS LOGO

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.

HU1

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

HU2

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.

HU3

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

HU9

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

HU10

Prototipo Final del Feed

Prototipo final

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

About

Sitio web estructurado con Vanilla Javascript, que permite a los usuarios Crear, Leer, Actualizar, Eliminar y dar me gusta a las publicaciones, usando los servicios de Firebase como nuestro back-end.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 68.2%
  • CSS 21.3%
  • HTML 10.5%