diff --git a/README.md b/README.md
index c737b2cd..434451ae 100644
--- a/README.md
+++ b/README.md
@@ -1,530 +1,225 @@
-# Creando una Red Social
+# Journey Mates 🛫
## Índice
-* [1. Preámbulo](#1-preámbulo)
-* [2. Resumen del proyecto](#2-resumen-del-proyecto)
-* [3. Objetivos de aprendizaje](#3-objetivos-de-aprendizaje)
-* [4. Consideraciones generales](#4-consideraciones-generales)
-* [5. Criterios de aceptación mínimos del proyecto](#5-criterios-de-aceptación-mínimos-del-proyecto)
-* [6. Hacker edition](#6-hacker-edition)
-* [7. Entrega](#7-entrega)
-* [8. Pistas, tips y lecturas complementarias](#8-pistas-tips-y-lecturas-complementarias)
+* [i. Acerca de "Journey Mates"](#i-acerca-de-Journey-Mates)
+* [ii. Historias de Usuario](#ii-historias-de-usuario)
+* [iii. Prototipos](#iii-prototipos)
+* [iv. Consideraciones técnicas UX](#iv-consideraciones-tecnicas-UX)
+* [v. Proyectos desplegados](#v-proyectos-desplegados)
-## 1. Preámbulo
-Instagram, Snapchat, Twitter, Facebook, Twitch, Linkedin, etc. Las redes
-sociales han invadido nuestras vidas. Las amamos u odiamos, y muchos no podemos
-vivir sin ellas.
-
-
-
-Hay redes sociales de todo tipo y para todo tipo de intereses. Por ejemplo,
-en una ronda de financiamiento con inversionistas, se presentó una red social
-para químicos en la que los usuarios podían publicar artículos sobre sus
-investigaciones, comentar en los artículos de sus colegas, y filtrar artículos
-de acuerdo a determinadas etiquetas o su popularidad, lo más reciente, o lo
-más comentado.
-
-## 2. Resumen del proyecto
-
-En este proyecto construirás una Red Social sobre lo que decidan tú y tu equipo.
-Podría ser, por ejemplo, sobre alimentación saludable, feminismo, educación,
-salud, energías renovables, amantes de las [Empanadas](https://es.wikipedia.org/wiki/Empanada)
-o de los [Tacos de Canasta](https://es.wikipedia.org/wiki/Taco),
-de la [Feijoada](https://es.wikipedia.org/wiki/Feijoada), o de lo que sea.
-
-Tu Red Social tendrá que permitir a cualquier usuario crear una cuenta de acceso
-y loguearse con ella; crear, editar, borrar y _"likear"_ publicacciones.
-
-Por lo tanto, en este proyecto construirás una
-[Single-page Application (SPA)](https://es.wikipedia.org/wiki/Single-page_application)
-[_responsive_](https://curriculum.laboratoria.la/es/topics/css/02-responsive) (con más de una vista / página)
-en la que podamos **leer y escribir datos**.
-
-### Los objetivos generales de este proyecto son los siguientes
-
-* Desarrollar una SPA con temática de red social
-* Aplicar los conceptos de responsividad en el desarrollo de las vistas (templates)
-* Implementar un router para la navegación entre las diferentes vistas de la aplicación
-* Emplear un servicio externo para la persistencia de datos de la aplicación
-* Crear una suite de pruebas unitarias que permitan testear código asíncrono
-
-Para lograr estos objetivos, deberás aprender y hacer uso de las siguientes
-herramientas o habilidades técnicas:
-
-## 3. Objetivos de aprendizaje
-
-Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo.
-
-### HTML
-
-- [ ] **Uso de HTML semántico**
-
- Links
-
-### Web APIs
-
-- [ ] **Uso de selectores del DOM**
-
- Links
-
- * [Manipulación del DOM](https://curriculum.laboratoria.la/es/topics/browser/02-dom/03-1-dom-methods-selection)
- * [Introducción al DOM - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction)
- * [Localizando elementos DOM usando selectores - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)
-
-
-- [ ] **Manejo de eventos del DOM (listeners, propagación, delegación)**
-
- Links
+***
-- [ ] **Manipulación dinámica del DOM**
+## i. Acerca de Journey Mates
- Links
+El proyecto _"Journey Mates"_ surge con la finalidad de brindar a las usuarias que disfrutan de viajar y conocer nuevos lugares en Latinoamerica, una red social en la cual, puedan compartir sus experiencias y recomendaciones, y descubrir a través de las recomendaciones de otras usuarias, nuevos lugares, ciudades y otros sitios de interés.
- * [Introducción al DOM](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction)
- * [Node.appendChild() - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/appendChild)
- * [Document.createElement() - MDN](https://developer.mozilla.org/es/docs/Web/API/Document/createElement)
- * [Document.createTextNode()](https://developer.mozilla.org/es/docs/Web/API/Document/createTextNode)
- * [Element.innerHTML - MDN](https://developer.mozilla.org/es/docs/Web/API/Element/innerHTML)
- * [Node.textContent - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/textContent)
-
-- [ ] **Ruteado (History API, evento hashchange, window.location)**
+## ii. Historias de Usuario
- Links
+Las historias de usuario las realizamos en función de los hallazgos de una investigación con personas que disfrutan de viajar.
- * [Manipulando el historial del navegador - MDN](https://developer.mozilla.org/es/docs/DOM/Manipulando_el_historial_del_navegador)
-
+Nuestras Historias de Usuario fueron 7:
-### JavaScript
+1. ** HU | Crear Cuenta:** Como viajera, quiero registrarme en JourneyMates para crear un perfil.
-- [ ] **Arrays (arreglos)**
+**Criterios de aceptación:**
- Links
+ *La página tiene que ser responsive.
+ * Al presionar el botón "Registrarme" permite crear una cuenta usando un correo electrónico o a través de gmail.
+ * Permite crear una contraseña de acceso.
+ *Fiel a prototipo.
- * [Arreglos](https://curriculum.laboratoria.la/es/topics/javascript/04-arrays)
- * [Array - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/)
- * [Array.prototype.sort() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)
- * [Array.prototype.forEach() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
- * [Array.prototype.map() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
- * [Array.prototype.filter() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
- * [Array.prototype.reduce() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)
-
+**Definición de terminado:**
-- [ ] **Objetos (key, value)**
+ *Debe ser una SPA.
+
+ *La página muestra un botón "Registarme".
+
+ *La página se puede abrir tanto en computadora como en dispositivos móviles y es funcional.
- Links
+ *La página muestra un input a través del cual se puede crear una cuenta usando un correo electrónico.
+
+ *Se puede crear una contraseña para poder acceder a la cuenta.
- * [Objetos en JavaScript](https://curriculum.laboratoria.la/es/topics/javascript/05-objects/01-objects)
-
+ *Se muestra un error si el correo electrónico ya se registró anteriormente.
-- [ ] **Diferenciar entre tipos de datos primitivos y no primitivos**
+ *Se muestra un error si la contraseña no cumple con los requisitos (mínimo 6 caracteres).
-- [ ] **Variables (declaración, asignación, ámbito)**
+ 2. **HU | Login:** Yo como viajera quiero ingresar a mi cuenta de JourneyMates con mi usuario y contraseña o con mi cuenta de google para tener acceso a mi perfil.
- Links
+**Criterios de aceptación:**
- * [Valores, tipos de datos y operadores](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/01-values-variables-and-types)
- * [Variables](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/02-variables)
-
+ *La página tiene que ser responsive.
-- [ ] **Uso de condicionales (if-else, switch, operador ternario, lógica booleana)**
+ *La página permite ingresar a un perfil al momento de iniciar sesión con usuario y contraseña.
+
+ *La página muestra un error si la contraseña y/o correo son incorrrectos.
- Links
+ *Fiel a prototipo.
- * [Estructuras condicionales y repetitivas](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/01-conditionals-and-loops)
- * [Tomando decisiones en tu código — condicionales - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/conditionals)
-
+**Definición de terminado:**
-- [ ] **Uso de bucles/ciclos (while, for, for..of)**
+ *Debe ser una SPA.
- Links
+ *El código pasa los tests necesarios.
- * [Bucles (Loops)](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/02-loops)
- * [Bucles e iteración - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Loops_and_iteration)
-
+ *La página se puede abrir tanto en computadora como en dispositivos móviles y es funcional.
-- [ ] **Funciones (params, args, return)**
+ *Al presionar el botón de "iniciar sesión" te dirige a la página de Timeline.
- Links
+ *La página muestra error si el correo ya está registrado o si no es válido.
- * [Funciones (control de flujo)](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/03-functions)
- * [Funciones clásicas](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/01-classic)
- * [Arrow Functions](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/02-arrow)
- * [Funciones — bloques de código reutilizables - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Functions)
-
-- [ ] **Pruebas unitarias (unit tests)**
+3. **HU | Mostrar timeline/home:** Yo como viajera quiero ver la página de timeline para visualizar las publicaciones de mis amigas.
- Links
+**Criterios de aceptación:**
- * [Empezando con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/getting-started)
-
+ *La página tiene que ser responsive.
-- [ ] **Pruebas asíncronas**
+ *Se visualizan las publicaciones de las mujeres que están registradas en esa red social.
- Links
+ *Se muestran las publicaciones de la más reciente a la más antigua.
- * [Tests de código asincrónico con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/asynchronous)
-
+ *Fiel a prototipo.
-- [ ] **Uso de mocks y espías**
+**Definición de terminado:**
- Links
+ *Debe ser una SPA.
- * [Manual Mocks con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/manual-mocks)
-
+ *El código pasa los tests necesarios.
-- [ ] **Módulos de ECMAScript (ES Modules)**
+ *La página se puede abrir tanto en computadora como en dispositivos móviles y es funcional.
- Links
+4. **HU | Mostrar perfil:** Yo como viajera quiero ver/acceder a mi perfil de Journey Mates para visualizar mi información.
-- [ ] **Uso de linter (ESLINT)**
+**Criterios de aceptación:**
-- [ ] **Uso de identificadores descriptivos (Nomenclatura y Semántica)**
+ *La página tiene que ser responsive.
-- [ ] **Diferenciar entre expresiones (expressions) y sentencias (statements)**
+ *Se visualiza la información de la usuaria.
-- [ ] **Callbacks**
+ *Se muestra mi foto de perfil.
- Links
+**Definición de terminado:**
-- [ ] **Promesas**
+ *Debe ser una SPA.
- Links
+ *El código pasa los tests necesarios.
- * [Promise - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Promise)
- * [How to Write a JavaScript Promise - freecodecamp (en inglés)](https://www.freecodecamp.org/news/how-to-write-a-javascript-promise-4ed8d44292b8/)
-
+ *La página se puede abrir tanto en computadora como en dispositivos móviles y es funcional.
-### Control de Versiones (Git y GitHub)
+ *Se muestra la sección de información y contiene foto de perfil e información de la persona (nombre, edad, país).
-- [ ] **Git: Instalación y configuración**
+5. **HU | Publicar:** Yo como viajera quiero publicar recomendaciones de países que he visitado para compartirlas con otras usuarias.
-- [ ] **Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)**
+**Criterios de aceptación:**
-- [ ] **Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)**
+ *La página tiene que ser responsive.
-- [ ] **GitHub: Creación de cuenta y repos, configuración de llaves SSH**
+ *Existe un input para poder agregar mi estado y un botón para publicarlo.
-- [ ] **GitHub: Despliegue con GitHub Pages**
+ *Se muestra la opción de "publicar".
- Links
+ *Fiel a prototipo.
- * [Sitio oficial de GitHub Pages](https://pages.github.com/)
-
+**Definición de terminado:**
-- [ ] **GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)**
+ *Debe ser una SPA.
-- [ ] **GitHub: Organización en Github (projects | issues | labels | milestones | releases)**
+ *El código pasa los tests necesarios.
-### Centrado en el usuario
+ *La página se puede abrir tanto en computadora como en dispositivos móviles y es funcional.
-- [ ] **Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro**
-### Diseño de producto
+6. **HU | Editar:** Yo como viajera quiero editar mis publicaciones para poder modificar errores o publicaciones/recomendaciones en general.
-- [ ] **Crear prototipos de alta fidelidad que incluyan interacciones**
+**Criterios de aceptación:**
-- [ ] **Seguir los principios básicos de diseño visual**
+ *La página tiene que ser responsive.
-### Investigación
+ *Existe un logo/botón para poder editar mis publicaciones.
-- [ ] **Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad**
+ *Se muestra el input de la publicación para poder editarlo.
- Links
+ *Se muestra la opción de "publicar".
- * [Intro a testeos usabilidad](https://coda.io/@bootcamp-laboratoria/contenido-ux/test-de-usabilidad-15)
- * [Pruebas con Usuarios 1 — ¿Qué, cuándo y para qué testeamos?](https://eugeniacasabona.medium.com/pruebas-con-usuarios-1-qu%C3%A9-cu%C3%A1ndo-y-para-qu%C3%A9-testeamos-7c3a89b4b5e7)
-
+ *Fiel a prototipo.
-### Firebase
+**Definición de terminado:**
-- [ ] **Firebase Auth**
+ *Debe ser una SPA.
- Links
+ *El código pasa los tests necesarios.
- * [Primeros pasos con Firebase Authentication en sitios web - Documentación oficial](https://firebase.google.com/docs/auth/web/start?hl=es)
- * [Administra usuarios en Firebase (onAuthStateChanged)](https://firebase.google.com/docs/auth/web/manage-users?hl=es#get_the_currently_signed-in_user)
-
+ *La página se puede abrir tanto en computadora como en dispositivos móviles y es funcional.
-- [ ] **Firestore**
+ *Puedes editar cada una de tus publicaciones a través de un logo/botón de editar.
- Links
+ *Tu estado se publica nuevamente y sin recargar la página se muestra editado.
- * [Firestore - Documentación oficial](https://firebase.google.com/docs/firestore?hl=es)
- * [Reglas de seguridad de Firestore - Documentación oficial](https://firebase.google.com/docs/rules?hl=es)
- * [Obtén actualizaciones en tiempo real con Cloud Firestore - Documentación oficial](https://firebase.google.com/docs/firestore/query-data/listen?hl=es)
-
+7. **HU | Likear:** Yo como viajera quiero poder dar y quitar like a las publicaciones
+para interactuar con otras usuarias.
-## 4. Consideraciones generales
+**Criterios de aceptación:**
-* Este proyecto se debe trabajar en equipos de tres.
+ *La página tiene que ser responsive.
-* La lógica del proyecto debe estar implementada completamente en JavaScript
- (ES6+), HTML y CSS :smiley:. Para este proyecto **no está permitido** utilizar
- _frameworks_ o librerías de CSS y JS.
+ *Existe un botón/logo que al momento de dar click, muestra un like y cambia de color.
-* La división y organización del trabajo debe permitir, sin excepciones, que
- **cada integrante** del equipo practique el aprendizaje de todo lo involucrado
- en **cada historia**. _No se dividan el trabajo como en una fábrica._
- - ¿Hasta acá has avanzado en tus proyectos con cierta fluidez y sin mayores
- problemas? Sé generosa con tus compañeras, permíteles aprender y practicar
- sin restricciones, aunque tome un poco más de tiempo. Aproveha de
- _coachearlas_, de hacer _pair programming_, una de las mejores maneras de
- aprender es explicando verbalmente.
+ *Se puede quitar el like de la publicación.
- - ¿Se te está haciendo difícil y te cuesta un poco más avanzar? No te quedes
- con las partes "fáciles" del proyecto, conversa, negocia, exige tu oportunidad
- para practicar y aprender lo que se te hace más difícil.
+ *Existe un conteo de likes.
-* Solamente pueden trabajar en una única historia por vez, no pueden avanzar a
- la siguiente sin haber completado la anterior. La historia se completa cuando
- se cumplen **todos** sus Criterios de Aceptación + **toda** su Definición
- de Terminado.
+ *Fiel a prototipo.
-Para comenzar tendrás que hacer un _fork_ y _clonar_ este repositorio.
+**Definición de terminado:**
-## 5. Criterios de aceptación mínimos del proyecto
+ *Debe ser una SPA.
-### 5.1 Boilerplate
+ *El código pasa los tests necesarios.
-Este proyecto no incluye un _boilerplate_, así es que tendrás que definir la
-estructura de carpetas y escribir tus propias Pruebas Unitarias (_tests_). Para
-hacerlo, puedes guiarte de los proyectos anteriores.
+ *La página se puede abrir tanto en computadora como en dispositivos móviles y es funcional.
-### 5.2 Definición del producto
+ *Cada publicación cuenta con un logo que al momento de darle click, se agrega un like al conteo.
-En el `README.md` cuéntanos brevemente cómo descubriste las necesidades de los
-usuarios y cómo llegaste a la definición final de tu producto. Es importante
-que detalles:
-* Quiénes son los principales usuarios de producto.
-* Qué problema resuelve el producto / para qué le servirá a estos usuarios.
+## iii. Prototipos
-### 5.3 Historias de usuario
+* Prototipo de baja fidelidad
-Una vez que entiendas las necesidades de tus usuarixs, escribe las Historias de
-Usuario que representen todo lo que necesitan hacer/ver en la Red Social. Cada
-una de tus Historias de Usuario debe tener:
+
+
-* **Criterios de Aceptación:** todo lo que debe ocurrir para satisfacer las
- necesidades del usuario.
+* Prototipo de alta fidelidad
-* **Definición de terminado:** todos los aspectos técnicos que deben cumplirse
- para que, como equipo, sepan que esa historia está terminada y lista
- para publicarse. **Todas** tus Historias de Usuario (salvo excepciones), deben
- incluir estos aspectos en su Definición de Terminado (más todo lo que
- necesiten agregar):
+
+
+
+
- - 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).
-### 5.4 Diseño de la Interfaz de Usuario (prototipo de baja fidelidad)
+## iv. Consideraciones técnicas UX
-Debes definir cuál será el flujo que seguirá el usuario dentro de tu aplicación
-y, con eso, diseña la Interfaz de Usuario (UI por sus siglas en inglés) que
-siga este flujo.
+* Usuaria #1:
+ Como usuaria de Journey Mates, considero que la interfaz es muy amigable. La idea detrás de la página es valiosa, ya que me permite compartir y leer recomendaciones y reseñas de otros viajeros. Además, la página es responsive, lo que significa que puedo abrirla tanto en mi computadora como en mi celular y sigue siendo funcional en ambos dispositivos. La navegación es clara y fácil de seguir, lo que hace que sea sencillo encontrar la información que estoy buscando. La interfaz de usuario es atractiva y la disposición de la información es clara y legible. En general, estoy muy contenta con la experiencia de usuario en Journey Mates.
-### 5.5 Responsive
+* Usuaria #2:
+ Como usuaria de Journey Mates, me gustó especialmente la funcionalidad de dar "like" a las recomendaciones y reseñas de otros viajeros, ya que me permite destacar aquellas que realmente me gustaron. Además, los colores elegidos para la página me parecen adecuados y ayudan a crear una atmósfera acogedora y amigable.
-Debe verse bien en dispositivos de pantallas grandes
-(computadoras/es, laptops, etc.) y pequeñas (_tablets_, celulares, etc.). Te
-sugerimos seguir la técnica de _`mobile first`_ (más detalles sobre esta técnica
-al final).
+ Sin embargo, me gustaría ver un mapa o imágenes en la página para hacerla más atractiva visualmente. Creo que sería una excelente manera de mostrar los diferentes países de las recomendaciones que se pueden encontrar en la página y hacer que sea más fácil para las usuarias visualizarlos. En general, estoy muy contenta con la experiencia de usuario en Journey Mates, pero creo que un mapa o imágenes añadirían un toque adicional de atractivo visual a la página.
-### 5.6 Consideraciones del comportamiento de la interfaz de usuario (UI)
-Estas consideraciones te ayudarán a escribir las Definiciones de Terminado de
-tus H.U.:
+## v. Proyectos desplegados
-#### Creación de cuenta de usuario e inicio de sesión
+* 💻 Daniela: https://journey-mates.netlify.app/
+* 💻 Carmen: https://journey-mates.netlify.app/
+* 💻 Miriam: https://journey-mates.netlify.app/
-* _Login_ con Firebase:
- - Para el _login_ y las publicaciones en el muro puedes utilizar [Firebase](https://firebase.google.com/products/database/)
- - Creación de cuenta de acceso y autenticación con cuenta de correo y
- contraseña, y también con una cuenta de Google.
-* Validaciones:
- - Solamente se permite el acceso a usuarios con cuentas válidas.
- - No pueden haber usuarios repetidos.
- - La cuenta de usuario debe ser un correo electrónico válido.
- - Lo que se escriba en el campo (_input_) de contraseña debe ser secreto.
-* Comportamiento:
- - Al enviarse el formulario de registro o inicio de sesión, debe validarse.
- - Si hay errores, se deben mostrar mensajes descriptivos para ayudar al
- usuario a corregirlos.
-
-#### Muro/timeline
-
-* Validaciones:
- - Al publicar, se debe validar que exista contenido en el _input_.
-* Comportamiento:
- - Al recargar la aplicación, se debe verificar si el usuario está _logueado_
- antes de mostrar contenido.
- - Poder publicar un _post_.
- - Poder dar y quitar _like_ a una publicación. Máximo uno por usuario.
- - Llevar un conteo de los _likes_.
- - Poder eliminar un post específico.
- - Pedir confirmación antes de eliminar un _post_.
- - Al dar _click_ para editar un _post_, debe cambiar el texto por un _input_
- que permita editar el texto y luego guardar los cambios.
- - Al guardar los cambios debe cambiar de vuelta a un texto normal pero con la
- información editada.
- - Al recargar la página debo de poder ver los textos editados.
-### 5.7 Consideraciones técnicas Front-end
-
-* Separar la manipulación del DOM de la lógica (Separación de responsabilidades).
-* Contar con múltiples vistas. Para esto, tu aplicación debe ser una
- [Single Page Application (SPA)](https://es.wikipedia.org/wiki/Single-page_application)
-* Alterar y persistir datos. Los datos que agregues o modifiques deberán
- persistir a lo largo de la aplicación. Te recomendamos que uses
- [Firebase](https://firebase.google.com/) para eso también.
-
-#### Pruebas unitarias (unit tests)
-
-* Recuerda que no hay un _setup_ de **tests** definido, dependerá de
- la estructura de tu proyecto. Algo que no debes de olvidar es pensar en éstas
- pruebas, te pueden ayudar a definir la estructura y nomenclatura de tu lógica.
-
-* Los tests unitarios deben cubrir un mínimo del 70% de _statements_, _functions_,
- _lines_, y _branches_.
-
-### 5.8 Consideraciones técnicas UX
-
-* Hacer al menos 2 entrevistas con usuarios.
-* Hacer un prototipo de baja fidelidad.
-* Asegurarte de que la implementación en código siga los lineamientos del
- diseño.
-* Hacer sesiones de _testing de usabilidad_ con el producto en HTML.
-
-## 6. Hacker edition
-
-Las secciones llamadas _Hacker Edition_ son **opcionales**. Si **terminaste**
-con todo lo anterior y te queda tiempo, intenta completarlas. Así podrás
-profundizar y/o ejercitar más sobre los objetivos de aprendizaje del proyecto.
-
-* Permite crear posts con imágenes.
-* Permite buscar usuarios, agregar y eliminar "amigos".
-* Permite definir la privacidad de los _posts_ (público o solamente para amigos).
-* Permite ver su muro de cualquier usuario "no-amigo" (solamente los
- posts _públicos_).
-* Permite comentar o responder una publicación.
-* Permite editar perfil.
-
-## 7. Entrega
-
-El proyecto será _entregado_ subiendo tu código a GitHub (`commit`/`push`) y la
-interfaz será desplegada usando GitHub pages u otro servicio de hosting que
-puedas haber encontrado en el camino.
-***
-## 8. Pistas, tips y Lecturas complementarias
-
-### Mobile first
-
-El concepto de [_mobile first_](https://www.mediaclick.es/blog/diseno-web-responsive-design-y-la-importancia-del-mobile-first/)
-hace referencia a un proceso de diseño y desarrollo donde partimos de cómo se ve
-y cómo funciona la aplicación en un dispositivo móvil primero, y más adelante se
-ve como adaptar la aplicación a pantallas progresivamente grandes y
-características específicas del entorno desktop. Esto es en contraposición al
-modelo tradicional, donde primero se diseñaban los websites (o webapps) para
-desktop y después se trataba de _arrugar_ el diseño para que entre en pantallas
-más chicas. La clave acá es asegurarse de que desde el principio diseñan usando
-la vista _responsive_ de las herramientas de desarrollador (developer tools) del
-navegador. De esa forma, partimos de cómo se ve y comporta la aplicación en una
-pantalla y entorno móvil.
-
-### Múltiples vistas
-
-En proyectos anteriores nuestras aplicaciones habían estado compuestas de una
-sola _vista_ principal (una sóla _página_). En este proyecto se introduce la
-necesidad de tener que dividir nuestra interfaz en varias _vistas_ o _páginas_
-y ofrecer una manera de navegar entre estas vistas. Este problema se puede
-afrontar de muchas maneras: con archivos HTML independientes (cada uno con su
-URL) y links tradicionales, manteniendo estado en memoria y rederizando
-condicionalmente (sin refrescar la página), [manipulando el historial del
-navegador](https://developer.mozilla.org/es/docs/DOM/Manipulando_el_historial_del_navegador)
-con [`window.history`](https://developer.mozilla.org/es/docs/Web/API/Window/history).
-En este proyecto te invitamos a explorar opciones y decidir una opción
-de implementación.
-
-### Escritura de datos
-
-En los proyectos anteriores hemos consumido (leído) datos, pero todavía no
-habíamos escrito datos (salvar cambios, crear datos, borrar, ...). En este
-proyecto tendrás que crear (salvar) nuevos datos, así como leer, actualizar y
-modificar datos existentes. Estos datos se podrán guardar de forma remota
-usando [Firebase](https://firebase.google.com/).
-
-Otras:
-
-* [Modulos: Export](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/export)
-* [Modulos: Import](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/import)
-* [Diseño web, responsive design y la importancia del mobile first - Media Click](https://www.mediaclick.es/blog/diseno-web-responsive-design-y-la-importancia-del-mobile-first/)
-* [Mobile First: el enfoque actual del diseño web móvil - 1and1](https://www.1and1.es/digitalguide/paginas-web/diseno-web/mobile-first-la-nueva-tendencia-del-diseno-web/)
-* [Mobile First - desarrolloweb.com](https://desarrolloweb.com/articulos/mobile-first-responsive.html)
-* [Mobile First Is NOT Mobile Only - Nielsen Norman Group](https://www.nngroup.com/articles/mobile-first-not-mobile-only/)
diff --git a/package.json b/package.json
index 0c72f6c8..3fbedbbc 100644
--- a/package.json
+++ b/package.json
@@ -17,18 +17,19 @@
"test": "jest --coverage",
"start": "serve -s src/"
},
+
"devDependencies": {
"@babel/core": "^7.11.4",
"@babel/preset-env": "^7.11.0",
"babel-jest": "^27.0.1",
"eslint": "^8.3.0",
- "eslint-config-airbnb-base": "^15.0.0",
+ "eslint-config-airbnb-base": "^14.2.1",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jest": "^25.3.0",
"htmlhint": "^1.0.0",
"jest": "^27.0.1",
"regenerator-runtime": "^0.13.1",
- "serve": "^13.0.2",
+ "serve": "^14.1.2",
"stylelint": "^14.1.0",
"stylelint-config-recommended": "^6.0.0"
},
@@ -39,5 +40,20 @@
"createdAt": "2022-11-30T16:52:37.204Z",
"version": "5.5.0",
"commit": "51e941edf1cc991930aefd7dd9c406a7c43741c1"
- }
-}
\ No newline at end of file
+ },
+ "dependencies": {
+ "firebase": "^9.15.0"
+ },
+ "directories": {
+ "test": "test"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/dvnielx/DEV002-social-network.git"
+ },
+ "author": "",
+ "bugs": {
+ "url": "https://github.com/dvnielx/DEV002-social-network/issues"
+ },
+ "homepage": "https://github.com/dvnielx/DEV002-social-network#readme"
+}
diff --git a/src/_redirects b/src/_redirects
new file mode 100644
index 00000000..f8243379
--- /dev/null
+++ b/src/_redirects
@@ -0,0 +1 @@
+/* /index.html 200
\ No newline at end of file
diff --git a/src/firebase/configuracion.js b/src/firebase/configuracion.js
new file mode 100644
index 00000000..254d12d2
--- /dev/null
+++ b/src/firebase/configuracion.js
@@ -0,0 +1,202 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable max-len */
+/* eslint-disable no-alert */
+/* eslint-disable no-console */
+/* eslint-disable no-shadow */
+// Importa la biblioteca de Firebase
+// eslint-disable-next-line import/no-unresolved
+import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js';
+import {
+ createUserWithEmailAndPassword,
+ signInWithEmailAndPassword,
+ sendEmailVerification,
+ GoogleAuthProvider,
+ onAuthStateChanged,
+ signInWithPopup,
+ updateProfile,
+ getAuth,
+ signOut,
+// eslint-disable-next-line import/no-unresolved
+} from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-auth.js';
+import {
+ getFirestore,
+ arrayRemove,
+ onSnapshot,
+ arrayUnion,
+ collection,
+ deleteDoc,
+ updateDoc,
+ Timestamp,
+ getDocs,
+ orderBy,
+ addDoc,
+ getDoc,
+ query,
+ doc,
+// eslint-disable-next-line import/no-unresolved
+} from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-firestore.js';
+
+// Your web app's Firebase configuration
+const firebaseConfig = {
+ apiKey: 'AIzaSyAAHfvbH9LChUrOwAbR4cydwCsmHa7Q330',
+ authDomain: 'usuarias-journey-mates.firebaseapp.com',
+ projectId: 'usuarias-journey-mates',
+ storageBucket: 'usuarias-journey-mates.appspot.com',
+ messagingSenderId: '15257223280',
+ appId: '1:15257223280:web:eecc0cb646124a2f42b4b5',
+ measurementId: 'G-4W8ETMYH7S',
+};
+
+// Inicializa la aplicación de Firebase
+export const app = initializeApp(firebaseConfig);
+export const auth = getAuth(app);
+export const provider = new GoogleAuthProvider(app);
+export const db = getFirestore(app);
+export const user = () => auth.currentUser;
+
+export const saveTask = (description) => addDoc(collection(db, 'tasks'), {
+ description,
+ name: auth.currentUser.displayName,
+ uid: auth.currentUser.uid,
+ likes: [],
+ createdDateTime: Timestamp.fromDate(new Date()),
+});
+
+export const saveUser = (name, uid, email, pais) => addDoc(collection(db, 'users'), {
+ name,
+ uid,
+ email,
+ pais,
+ createdDateTime: Timestamp.fromDate(new Date()),
+});
+
+// Estas funciones realizan una operación específica en la colección de tareas en Firestore.
+export const getTasks = () => getDocs(collection(db, 'tasks'));
+export const deleteTask = (id) => deleteDoc(doc(db, 'tasks', id));
+export const getTask = (id) => getDoc(doc(db, 'tasks', id));
+export const updateTask = (id, newFields) => updateDoc(doc(db, 'tasks', id), newFields);
+export const dateTask = (querySnapshot) => {
+ const q = query(collection(db, 'tasks'), orderBy('createdDateTime', 'desc'));
+ onSnapshot(q, querySnapshot);
+};
+
+// Create new users
+
+export function registerUser(email, password, name, pais, callback) {
+ createUserWithEmailAndPassword(auth, email, password)
+ .then((userCredential) => {
+ sendEmailVerification(auth.currentUser);
+ updateProfile(auth.currentUser, {
+ displayName: name,
+
+ });
+
+ const user = userCredential.user;
+ const userId = user.uid;
+ user.displayName = name;
+ saveUser(user.displayName, userId, email, pais);
+ callback(true); // Se llama una función de callback para indicar que el registro se ha realizado correctamente.
+ })
+ .catch((error) => {
+ console.error(error.code);
+ if (error.code === 'auth/email-already-in-use') {
+ alert('Este correo ya está registrado');
+ } else if (error.code === 'auth/weak-password') {
+ alert('Tu contraseña debe contener al menos 6 caracteres');
+ } else if (error.code === 'auth/invalid-email') {
+ alert('Este correo no existe o es inválido');
+ } else if (error.code === 'auth/internal-error') {
+ alert('Completa todos los campos');
+ }
+ callback(false);
+ });
+}
+
+// Inicio de sesión con email
+
+export async function inicioDeSesionEmail(email, password) {
+ try {
+ const userCredential = await signInWithEmailAndPassword(auth, email, password);
+ const user = userCredential.user;
+ const userId = user.uid;
+ return true; // Si la operación es exitosa, la función imprime un mensaje "signed in" y devuelve true.
+ } catch (error) {
+ if (error.code === 'auth/email-already-in-use') {
+ alert('Este correo ya está registrado');
+ } else if (error.code === 'auth/weak-password') {
+ alert('Tu contraseña no es segura');
+ } else if (error.code === 'auth/invalid-email') {
+ alert('Este correo no existe o es inválido');
+ } else if (error.code === 'auth/internal-error') {
+ alert('Completa todos los campos');
+ }
+ return false;
+ }
+}
+
+// Sign in with Google
+
+export const authGoogle = async () => {
+ try {
+ const userResult = await signInWithPopup(auth, provider);
+ window.location.href = '/timeLine';
+ } catch (error) {
+ console.log(error);
+ }
+};
+
+// Cerrar sesión
+
+export const signOutFirebase = (auth) => auth.signOut(); // llama a su método signOut() que termina la sesión actual.
+
+export const onAuth = (auth) => {
+ auth.onAuthStateChanged((user) => {
+ if (user) {
+ console.log('user is signed in');
+ } else {
+ console.log('user is signed out');
+ }
+ });
+};
+
+// Like function
+
+export const tapLike = (id, newLike) => {
+ updateDoc(doc(db, 'tasks', id), { // Actualiza el documento en la colección "tasks" con el
+ likes: // identificador "id" agregando un nuevo elemento "newLike" a la lista de "likes"
+ arrayUnion( // Permite agregar un nuevo elemento a un campo en la base de datos
+ newLike,
+ ),
+ });
+};
+
+export const dislike = (id, oldLike) => { // Se realiza la operación opuesta, eliminando un elemento "oldLike" de la lista de "likes".
+ updateDoc(doc(db, 'tasks', id), { // updateDoc actualiza el documento en la base de datos y doc toma como argumentos db, task y id
+ likes:
+ arrayRemove( // Permite eliminar un elemento en la base de datos.
+ oldLike,
+ ),
+ });
+};
+
+export {
+ createUserWithEmailAndPassword,
+ signInWithEmailAndPassword,
+ onAuthStateChanged,
+ GoogleAuthProvider,
+ signInWithPopup,
+ updateProfile,
+ getFirestore,
+ arrayRemove,
+ collection,
+ onSnapshot,
+ arrayUnion,
+ updateDoc,
+ deleteDoc,
+ Timestamp,
+ signOut,
+ getDocs,
+ getDoc,
+ addDoc,
+ doc,
+};
diff --git a/src/firebase/firestore.js b/src/firebase/firestore.js
new file mode 100644
index 00000000..7ce2cf83
--- /dev/null
+++ b/src/firebase/firestore.js
@@ -0,0 +1,135 @@
+/* eslint-disable max-len */
+/* eslint-disable no-alert */
+/* eslint-disable no-restricted-globals */
+/* eslint-disable no-console */
+// import { async } from 'regenerator-runtime';
+import {
+ saveTask, deleteTask, getTask, updateTask, tapLike, dislike, user, auth, dateTask,
+} from './configuracion.js';
+
+const tasksContainer = document.getElementById('contenedor-publicaciones');
+const taskForm = document.getElementById('task-form');
+
+let editStatus = false;
+let id = '';
+
+window.addEventListener('DOMContentLoaded', async () => {
+ dateTask((querySnapshot) => {
+ let html = '';
+
+ querySnapshot.forEach((doc) => {
+ const task = doc.data();
+ // const fecha=Timestamp.fromDate(new Date())
+ const likes = task.likes;
+ const likesNumber = likes.length;
+ const userId = user().uid;
+ const currentLike = likes.indexOf(userId);
+ let likeSrc = '';
+ const likeImg = () => {
+ if (currentLike === -1) {
+ likeSrc = 'images/like-logo.png';
+ } else {
+ likeSrc = './images/heart.png';
+ }
+ };
+ likeImg();
+
+ html += `
+
+ 
+ 
+