Skip to content

"Outsy" is a social network app that reconnects people through social events. Create a profile, publish events, and find companions. With HTML, CSS, Bootstrap, Firebase and JS, it's user-friendly. Receive comments and reactions. Edit or delete events as needed. Join Outsy and rediscover social connections.

Notifications You must be signed in to change notification settings

MariferVL/Outsy

Repository files navigation




Índice


1. Acerca del proyecto

El proyecto "Outsy" es una aplicación de red social que tiene como objetivo reconectar a las personas a través de eventos sociales. Con el uso de Firebase y Firestore, se crea un perfil en la aplicación donde los usuarios pueden publicar eventos sociales a los que les gustaría asistir y buscar compañeros para acompañarlos. En cada publicación, se pueden agregar toda la información necesaria del evento y una foto para captar la atención de los usuarios de Outsy. Además, los usuarios pueden recibir comentarios y reacciones de interés sobre su evento. En caso de no estar satisfecho con un evento, se puede editar o eliminar. "Outsy" utiliza tecnologías como Firestore, Firebase, HTML, CSS, Bootstrap y JavaScript para brindar una experiencia intuitiva y atractiva. Únete a "Outsy" y descubre nuevas conexiones sociales a través de eventos inolvidables.

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

Volver


4. Demo


Demo-Outsy.mp4

Volver

5. Referencias

Volver

About

"Outsy" is a social network app that reconnects people through social events. Create a profile, publish events, and find companions. With HTML, CSS, Bootstrap, Firebase and JS, it's user-friendly. Receive comments and reactions. Edit or delete events as needed. Join Outsy and rediscover social connections.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published