Skip to content

Xoch09/Social-Network

 
 

Repository files navigation




Índice


1. Acerca del proyecto

Según Forbes, el 90% de la data que existe hoy ha sido creada por nosotros durante los últimos dos años, generandoses 2.5 millones de terabytes de datos por día, una cifra sin precedentes. Es por esto que para la realización de este proyecto hemos utilizado/reciclado una de las billones de fuentes de información disponibles en la web. Parte de este proceso implicó la aplicación de conocimiento del DOM, Javascript y UX/UI en conjunto con los nuesvos aprendizajes de manejo de APIS. Así se creó una plataforma que permite a los usuarios conocer los aspectos básicos de su carta astral mediante su fecha, hora y lugar de nacimiento.

Lenguaje de programación

Framework


Volver

2. Objetivos de aprendizaje cumplidos

Mediante la estructuración y creación de este proyecto logramos adquirir conocimientos en las siguientes temáticas:

1. CSS
  • Uso de selectores de CSS
  • - [] Modelo de caja (box model): borde, margen, padding
  • - [] Uso de flexbox en CSS
  • - [] Uso de flexbox en CSS
  • - [] Uso de CSS Grid Layout
2. Web APIs
  • - [] Uso de selectores del DOM
  • - [] Manejo de eventos del DOM (listeners, propagación, delegación)
  • - [] Manipulación dinámica del DOM
  • - [] Ruteado
3. JavaScript
  • - [] Arrays (arreglos)
  • - [] Objetos (key, value)
  • - [] Diferenciar entre tipos de datos primitivos y no primitivos
  • - [] Variables (declaración, asignación, ámbito)
  • - [] Uso de condicionales (if-else, switch, operador ternario, lógica booleana)
  • - [] Uso de bucles/ciclos (while, for, for..of)
  • - [] Funciones (params, args, return)
  • - [] Pruebas unitarias (unit tests)
  • - [] Uso de mocks y espías
  • - [] Módulos de ECMAScript (ES Modules)
  • - [] Uso de linter (ESLINT)
  • - [] Uso de identificadores descriptivos (Nomenclatura y Semántica)
  • - [] Diferenciar entre expresiones (expressions) y sentencias (statements)
  • - [] Callbacks
  • - [] Promesas
4. 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, reset, rebase, tag)
  • GitHub: Creación de cuenta y repos, configuración de llaves SSH
  • 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)
5. Centrado en el usuario
  • Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro
6. Diseño de producto
  • - [] Crear prototipos de alta fidelidad que incluyan interacciones
  • - [] Seguir los principios básicos de diseño visual
7. Investigación
  • Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad
8. Firebase
  • Firebase Auth
  • Firestore


3. Proyecto

Hito 1
  • - [] 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
  • Incluye historias de usuario en README
  • - [] Incluye sketch de la solución (prototipo de baja fidelidad) en README
  • - [] Incluye Diseño de la Interfaz de Usuario (prototipo de alta fidelidad) en README
  • - [] Incluye el listado de problemas que detectaste a través de tests de usabilidad en el README
  • - [] 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


Modelo de Negocio Canvas

modelo canvas

Historias de Usuario

Usuario 1
  • Yo como estudiante universitario quiero saber donde se realizan eventos culturales de muestra de obras artísticas para poder asistir e invitar a mis amigos.
    Criterios de Aceptación
  1. Se puede registrar a la aplicación utilizando su correo
  2. Puede agregar a personas a la app
  3. Comparte imágenes, y post
  4. Puede buscar eventos e información de otras personas
    Definición de terminado
  • Debe ser una SPA.
  • Debe ser responsive.
  • Deben haber recibido code review de al menos una compañera de otro equipo.
  • Hicieron los test unitarios
  • Testearon manualmente buscando errores e imperfecciones simples.
  • Hicieron pruebas de usabilidad e incorporaron el feedback de los usuarios como mejoras.
  • Desplegaron su aplicación y etiquetaron la versión (git tag)
Usuario 2
  • Yo como trabajadora en oficina quiero saber qué planes tienen mis compañeros para salir de casa, mirar sus post y ponerme de acuerdo con ellos.
    Criterios de aceptación
  1. Se puede registrar a la aplicación utilizando su correo
  2. Puede agregar a personas a la app
  3. Comparte imágenes, y post
  4. Puede buscar eventos e información de otras personas
  5. Puede ponerse en contacto con mas personas agregadas a su red
    Definición de terminado
  • Debe ser una SPA.
  • Debe ser responsive.
  • Deben haber recibido code review de al menos una compañera de otro equipo.
  • Hicieron los test unitarios
  • Testearon manualmente buscando errores e imperfecciones simples.
  • Hicieron pruebas de usabilidad e incorporaron el feedback de los usuarios como mejoras.
  • Desplegaron su aplicación y etiquetaron la versión (git tag)
Usuario 3
  • Yo como usuario de redes sociales quiero poder, dar like a los post y poderlos eliminar, y poder llevar un conteo de los likes que recibo.
    Criterios de aceptación
  1. Se puede registrar a la aplicación utilizando su correo
  2. Puede agregar a personas a la app
  3. Comparte imágenes, y post
  4. Puede dar y quitar likes
  5. Lleva un conteo de likes
  6. Puede eliminar un post
  7. Recibe confirmación para eliminar un post
    Definición de terminado
  • Debe ser una SPA.
  • Debe ser responsive.
  • Deben haber recibido code review de al menos una compañera de otro equipo.
  • Hicieron los test unitarios
  • Testearon manualmente buscando errores e imperfecciones simples.
  • Hicieron pruebas de usabilidad e incorporaron el feedback de los usuarios como mejoras.
  • Desplegaron su aplicación y etiquetaron la versión (git tag)


Prototipo de baja y alta fidelidad

prototipo baja fidelidad prototipo-alta-fidelidad

Código


Volver


4. Producto


Volver


5. Demo

Volver

6. Referencias

Volver

About

3rd Laboratoria Project

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 85.5%
  • CSS 8.7%
  • HTML 5.8%