https://github.com/marifervl/outsy
"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.
https://github.com/marifervl/outsy
bootstrap5 css firebase firestore html5 javascript
Last synced: about 1 year ago
JSON representation
"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.
- Host: GitHub
- URL: https://github.com/marifervl/outsy
- Owner: MariferVL
- Created: 2023-03-08T03:09:15.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-19T03:33:35.000Z (about 3 years ago)
- Last Synced: 2025-04-14T23:14:43.987Z (about 1 year ago)
- Topics: bootstrap5, css, firebase, firestore, html5, javascript
- Language: JavaScript
- Homepage: https://outsy.web.app/
- Size: 33.6 MB
- Stars: 2
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Autoras
[Gabriela Gomez](https://github.com/GaabsG)
[María-Fernanda Villalobos](https://github.com/MariferVL)
[Xóchitl Jara](https://github.com/Xoch09)
Acceso a Documentos »
Acceso a Despliegue »
## Índice
* [1. Acerca del proyecto](#1-acerca-del-proyecto)
* [2. Objetivos de aprendizaje cumplidos](#2-objetivos-de-aprendizaje-cumplidos)
* [3. Proyecto](#3-proyecto)
* [4. Demo](#4-demo)
* [5. Referencias](#5-referencias)
***
## 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
- [Javascript](https://www.javascript.com/)
### Framework
- [Bootstrap](https://getbootstrap.com/)
## 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
-
- [x] Uso de selectores de CSS
-
- [x] Modelo de caja (box model): borde, margen, padding
-
- [x] Uso de flexbox en CSS
-
- [x] Uso de flexbox en CSS
-
- [x] Uso de CSS Grid Layout
2. Web APIs
-
- [x] Uso de selectores del DOM
-
- [x] Manejo de eventos del DOM (listeners, propagación, delegación)
-
- [x] Manipulación dinámica del DOM
-
- [x] Ruteado
3. JavaScript
-
- [x] Arrays (arreglos)
-
- [x] Objetos (key, value)
-
- [x] Diferenciar entre tipos de datos primitivos y no primitivos
-
- [x] Variables (declaración, asignación, ámbito)
-
- [x] Uso de condicionales (if-else, switch, operador ternario, lógica booleana)
-
- [x] Uso de bucles/ciclos (while, for, for..of)
-
- [x] Funciones (params, args, return)
-
- [x] Pruebas unitarias (unit tests)
-
- [x] Uso de mocks y espías
-
- [x] Módulos de ECMAScript (ES Modules)
-
- [x] Uso de linter (ESLINT)
-
- [x] Uso de identificadores descriptivos (Nomenclatura y Semántica)
-
- [x] Diferenciar entre expresiones (expressions) y sentencias (statements)
-
- [x] Callbacks
-
- [x] Promesas
4. Control de Versiones (Git y GitHub)
-
- [x] Git: Instalación y configuración
-
- [x] Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)
-
- [x] Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)
-
- [x] GitHub: Creación de cuenta y repos, configuración de llaves SSH
-
- [x] GitHub: Despliegue con GitHub Pages
-
- [x] GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)
-
- [x] GitHub: Organización en Github (projects | issues | labels | milestones | releases)
5. Centrado en el usuario
-
- [x] Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro
6. Diseño de producto
-
- [x] Crear prototipos de alta fidelidad que incluyan interacciones
-
- [x] Seguir los principios básicos de diseño visual
7. Investigación
-
- [x] Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad
8. Firebase
-
- [x] Firebase Auth
-
- [x] Firestore
## 3. Proyecto
Hito 1
-
- [x] Pasa linter (npm run pretest)
-
- [x] Pasa tests (npm test)
-
- [x] Pruebas unitarias cubren un mínimo del 70% de statements, functions y lines y branches
-
- [x] Incluye Definición del producto clara e informativa en README
-
- [x] Incluye historias de usuario en README
-
- [x] Incluye sketch de la solución (prototipo de baja fidelidad) en README
-
- [x] Incluye Diseño de la Interfaz de Usuario (prototipo de alta fidelidad) en README
-
- [x] Incluye el listado de problemas que detectaste a través de tests de usabilidad en el README
-
- [x] UI: Muestra lista y/o tabla con datos y/o indicadores
-
- [x] UI: Permite ordenar data por uno o más campos (asc y desc)
-
- [x] UI: Permite filtrar data en base a una condición
-
- [x] UI: Es responsive
### Modelo de Negocio 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
- Se puede registrar a la aplicación utilizando su correo
- Puede agregar a personas a la app
- Comparte imágenes, y post
- 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
- Se puede registrar a la aplicación utilizando su correo
- Puede agregar a personas a la app
- Comparte imágenes, y post
- Puede buscar eventos e información de otras personas
- 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
- Se puede registrar a la aplicación utilizando su correo
- Puede agregar a personas a la app
- Comparte imágenes, y post
- Puede dar y quitar likes
- Lleva un conteo de likes
- Puede eliminar un post
- 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
## 4. Demo
https://user-images.githubusercontent.com/99364311/235281995-30663797-3afa-4d6d-887d-11dbd15d29b2.mp4
## 5. Referencias
- [StackOverflow](https://stackoverflow.com/)
- [MDN WebDocs](https://developer.mozilla.org/en-US/)
- [W3Schools](https://www.w3schools.com/)
- [Programiz](https://www.programiz.com/)
- [Geeks for Geeks](https://www.geeksforgeeks.org/)