MiurArt es una red social enfocada en artistas de murales que permite compartir datos, información, y la interacción entre los miembros de esta comunidad a través de comentarios y reacciones como "me gusta". Los miembros de esta comunidad tienen un perfil en donde pueden poner una breve descripción suya. También hay una sección para publicar lo que crean conveniente relacionado a su trabajo y arte.

• Artistas muralistas que quieran exponer su arte de manera virtual

• Permite crear una cuenta personal.
• Permite iniciar sesión.
• Permite hacer publicaciones.
• Permite tener conversaciones con otras personas.
• Permite reaccionar a las personas ante una publicación.

• A través de entrevistas de artistas independientes.

• La inexistencia de una red social enfocada exclusivamente en la exposición de su arte

• Poder encontrar publicaciones de artistas.
• Poder conocer a otros artistas.
• Poder promocionar su arte.
• Poder crear o unirse a una comunidad de artistas.

• Permitir hacer publicaciones.
• Permitir crear una cuenta.
• Permitir poder ingresar con una cuenta de google.
• Permitir ingresar a la red social.
• Permitir el compartir y reaccionar a las publicaciones.
• Permitir la edición o eliminación de las publicaciones.

Pregunta 1: ¿Sientes que tu trabajo tiene suficiente visibilidad ?
Pregunta 2: ¿Para ti, es fácil conocer o contactarte con otros artistas del medio?
Pregunta 3: ¿Consideras importante el relacionarte con otros artistas del medio?
Pregunta 4: Si hubiera una red social para artistas murales, ¿Qué tipo de información te gustaría encontrar?

Entrevista 1 (Mujer, 27 años) 1: Eh no, debido a las restricciones de la pandemia, los lugares donde solían estar expuestos mis murales han sido restringidas (Restaurantes, Galerías, y calles cerca a oficinas).
2: Se ha reducido el espacio de interacción, debido a la pandemia.
3: Sí, porque igual siempre hemos sido una comunidad unida. Pero ahora siento que se ha limitado nuestra interacción y convivencia.
4: Me gustaría mostrar mi trabajo como hacía antes, y recibir feedback y comentarios de otros artistas, así como explorar otros perfiles, para ampliar mi red de contactos.

Entrevista 2 (Hombre,22 años)
1: No mucho, con la llegada de la pandemia mi trabajo como el de otros se ha visto detenido e ignorado.
2: Realmente incluso antes de la pandemia el conocer a otros muralistas fue un tanto limitado.
3: Por supuesto, como artista me gusta cocnocer gente en este medio, que pueda apoyarme y denvolverme.
4: Me gustaría conocer a más artistas y ver su arte, además de mostrarles el mío.

Yo como usuari@ deseo tener una vista inicial atractiva en la plataforma antes de ingresar a mi cuenta.

Criterio de aceptación:

- Se muestra campos para ingresar: nombre, apellido, nombre de usuario, correo electrónico, contraseña
- La contraseña tiene más de 6 dígitos
- No se pueden ingresar números en los campos de nombre y apellido
- Se muestra casilla para términos y condiciones
- No se activa la cuenta si no se acepta el mensaje de verificación
- Se muestran opciones para registrarse desde google o facebook
- Se muestra un mensaje indicando que  ya puede iniciar sesión
- Se muestra mensaje y opción para regresar al log in

Definición de lo terminado

Login con Firebase:
- Para el login y las publicaciones en el muro puedes utilizar Firebase
- 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

Testeo:
- Se hizo testeo de las funciones de la historia de Usuario

Yo como usuari@ quiero iniciar sesión con el correo y la contraseña que registré para poder ver mi muro

Criterio de aceptación:
- Se muestra campos para ingresar: correo electrónico y contraseña
- La contraseña tiene más de 6 dígitos
- El botón se habilita cuando los inputs no esten vacios
- Se muestran opciones para ingresar desde google o facebook
- Se muestra mensaje y opción para ir al registro

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.

Definición de lo terminado:
Login con Firebase:

 - Creación de cuenta de acceso y autenticación con cuenta de correo y contraseña.
 - Creación de cuenta de acceso y autenticación con una cuenta de Google.
 - Se hizo test unitarios
 - Se hizo testeo de funciones
 - Se hizo test manualmente buscando errores e imperfecciones simples.
 - Se hizo pruebas de usabilidad e incorporaron el feedback de los usuarios como mejoras.
 - Se recibió feedback de compañeras.
 - Es responsive.

Yo como usuari@ quiero poder comentar publicaciones de otros artistas

Criterio de aceptación:
- Hay un botón para generar el comentario
- Sólo se puede comentar texto
- El comentario se visualiza inmediatamente después de haberlo publicado
- Puede hacer comentarios en publicaciones de otros
- Puede hacer uno o más comentarios en un mismo post
- Se muestra el nombre de la persona que hizo el comentario
- Se muestra la foto de la persona que hizo el comentario

Definición de lo terminado:
- Se hizo test unitarios
- Se hizo testeo de funciones
- Se hizo test manualmente buscando errores e imperfecciones simples.
- Se hizo pruebas de usabilidad e incorporaron el feedback de los usuarios como mejoras.
- Se recibió feedback de compañeras.
- Es responsive.

Yo como usuari@ deseo una plataforma que me permita ver las publicaciones de otros usuarios

Criterio de aceptación:
- Al recargar la aplicación, se debe verificar si el usuario está logueado antes de mostrar contenido.

Definición de lo terminado:
- Se hizo test unitarios
- Se hizo testeo de funciones
- Se hizo test manualmente buscando errores e imperfecciones simples.
- Se hizo pruebas de usabilidad e incorporaron el feedback de los usuarios como mejoras.
- Se recibió feedback de compañeras.
- Es responsive

Yo como usuari@ quiero crear y editar publicaciones en el muro

Criterio de aceptación:
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.
- Puede hacer una o muchas publicaciones.
- Puede eliminar publicación(es) específicas.
- Pide 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 se puede ver los textos editados.

Definición de lo terminado:
- Se hizo test unitarios
- Se hizo testeo de funciones
- Se hizo test manualmente buscando errores e imperfecciones simples.
- Se hizo pruebas de usabilidad e incorporaron el feedback de los usuarios como mejoras.
- Se recibió feedback de compañeras.
- Es responsive

Yo como usuari@ deseo poder dale like o una emoción a las publicaciones que me gusten

Criterio de aceptación:
- Hay un botón like en cada publicación realizada
- Hay un contador de likes en cada publicación
- Un usuario puede dar like 1 vez a 1 publicación
- Se peude quitar el like de las publicaciones
- Sólo si el usuario está logueado puede dar like
Definición de lo terminado:
- Las funciones han sido testeadas
- El contador muestra la cantidad de likes que tiene la publicación en tiempo real
- 

Yo como usuario quiero editar mi publicación para plasmar algo distinto

Criterio de aceptación:
- Hay un botón para editar la publicación
- Sólo el usuario que hizo la publicación la puede editar

Definición de lo terminado:
- Se han testeado las funciones
- Los cambios se pueden visualizar en menos de 1rn

Yo como usuario quiero eliminar mi publicación para que ya no aparezca en mi muro de mi red

Criterio de aceptación:
- Sólo el usuario que creó la publicación la puede eliminar
- Hay un mensaje de verificación cuando se da click en el botón de eliminar.
- El mensaje de verificación contiene un botón para cancelar la acción y otro para verificarla
- Al recargar la página, no se verá la publicación ni los posts de esta.

Definición de lo terminado:
- Se hizo test unitarios
- Se hizo testeo de funciones
- Se hizo test manualmente buscando errores e imperfecciones simples.
- Se hizo pruebas de usabilidad e incorporaron el feedback de los usuarios como mejoras.
- Se recibió feedback de compañeras.
- Es responsive

Yo como usuaria deseo hacer una busqueda sobre temas que podrían interesarme

Criterio de aceptación:
-
-
-
Definición de lo terminado:
-

Yo como usuari@ deseo poder cerrar mi sesión en la red social

Criterio de aceptación:
- Hay un botón para cerrar la sesión
- Al hacer click en el botón Salir se muestra la página de log in
- El usuario no puede ver sus publicaciones o las publicaciones del resto

Definición de lo terminado:
- Las funciones de cerrar sesión han sido testedas
- Regresa a la página de log in
- Se hizo test unitarios
- Se hizo testeo de funciones
- Se hizo test manualmente buscando errores e imperfecciones simples.
- Se hizo pruebas de usabilidad e incorporaron el feedback de los usuarios como mejoras.
- Se recibió feedback de compañeras.
- Es responsive.

Yo como usuari@ deseo poder ver mi perfil de la red social cuando este logueada

Criterio de aceptación:
- Se muestra la foto por defecto de la cuenta de google si ingresó a través de esta opción
- Se puede cambiar la foto de pefil una vez que haya iniciado sesión

Definición de lo terminado:
- Se hizo test unitarios
- Se hizo testeo de funciones
- Se hizo test manualmente buscando errores e imperfecciones simples.
- Se hizo pruebas de usabilidad e incorporaron el feedback de los usuarios como mejoras.
- Se recibió feedback de compañeras.
- Es responsive.

(Vista Mobile)

(Vista Desktop)

Feedback Recibido

(Vista Mobile)

(Vista Desktop)

Feedback Recibido

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 o de los Tacos de Canasta, de la 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.

El objetivo principal de aprendizaje de este proyecto es construir una Single-page Application (SPA) responsive (con más de una vista / página) en la que podamos leer y escribir datos.

• Uso de HTML semántico.
• Uso de selectores de CSS.
• Uso de flexbox en CSS.
• Uso de CSS Grid Layout

A continuación te proporcionamos el layout (diseño) de la vista mobile y desktop que deberás replicar visualmente y cuyo contenido, colores y fuentes de texto, dejaremos a tu elección.

• Vista mobile

  

• Vista Desktop

  

• Uso de selectores del DOM.
• Manejo de eventos del DOM (addEventListener, removeEventListener, Event objeto, delegación de eventos)
• Manipulación dinámica del DOM (appendChild | createElement | createTextNode | innerHTML | textContent | etc.)
• Implementación de routing (History API. | hashchange)

• Uso de condicionales (if-else | switch | operador ternario)
• Uso de funciones (parámetros | argumentos | valor de retorno)
• Manipular arrays (filter | map | sort | reduce)
• Manipular objects (key | value)
• Uso ES modules (import | export)
• Diferenciar entre expression y statements.
• Diferenciar entre tipos de datos atómicos y estructurados.
• Uso de callbacks.
• Consumo de Promesas.

• Testeo unitario.
• Testeo asíncrono.
• Uso de librerias de Mock.

• Organizar y dividir el código en módulos (Modularización)
• Uso de identificadores descriptivos (Nomenclatura | Semántica)
• Uso de linter (ESLINT)

• Uso de comandos de git (add | commit | pull | status | push)
• Manejo de repositorios de GitHub (clone | fork | gh-pages)
• Colaboración en Github (branches | pull requests | |tags)
• Organización en Github (projects | issues | labels | milestones)

• Firestore.
• Firebase Auth.
• Firebase security rules.
• Observadores. (onAuthStateChanged | onSnapshot)

• Diseñar la aplicación pensando y entendiendo al usuario.
• Crear prototipos para obtener feedback e iterar.
• Aplicar los principios de diseño visual (contraste, alineación, jerarquía)
• Planear y ejecutar tests de usabilidad.

• Este proyecto se debe trabajar en equipos de tres.

• La lógica del proyecto debe estar implementada completamente en JavaScript (ES6+), HTML y CSS 😃. Para este proyecto no está permitido utilizar frameworks o librerías de CSS y JS.

• 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 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.

• 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.

Para comenzar tendrás que hacer un fork y clonar este repositorio.

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.

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.

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.

• 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).

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.

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).

Estas consideraciones te ayudarán a escribir las Definiciones de Terminado de tus H.U.:

• Login con Firebase:
  • Para el login y las publicaciones en el muro puedes utilizar Firebase
  • 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.

• 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.

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.