DEV010-social-network

🎹 Índice 🎹

🎷 Descripción del proyecto
🎷 Historias de usuario
🎷 Demostración de la aplicación
🎷 Tecnologías utilizadas
🎷 Estado del proyecto
🎷 Autoras

🎧Descripción del proyecto🎧

Proyecto realizado para desarrollar una aplicación con el objetivo de apoyar a la difusión de bandas, vocalistas, grupos, etc. emergentes para dar a conocer su música por medio de enlaces (redes sociales, canal de YT, perfil de spotify, etc.) para escuchar su material, o bien amantes de la música que quisieran dar sus recomendaciones musicales compartiendo los enlaces antes mencionados.

La aplicación permite visualizar las siguientes secciones:

Home: Página por la cual el usuario puede ingresar a la sección de Log In y Sign Up
Log In: Página donde el usuario puede iniciar sesión, si es que ya tiene una cuenta activa dentro de la aplicación.
Sign Up: Página donde el usuario puede registrar una cuenta ya sea con Google o ingresando un correo y contraseña válidos.
Feed: Página donde el usuario puede visualizar las publicaciones de otros usuarios, así como dar “Like” o “Me gusta” a aquellas que sean de su interés o bien quitarlo, según a conveniencia del usuario.
Post: Página la cual el usuario podrá publicar sus recomendaciones o enlaces, para después si así lo desea, poder editar sus publicaciones o eliminarlas.
Tus posts más populares: Página donde el usuario podra visualizar los posts que más “Likes” o “Me gusta” tengan.
Perfil: Página en la cual podrá visualizar sus datos ingresados como lo son: Nombre, correo e imagen de perfil.

🎧 Historias de usuario 🎧

De acuerdo a lo que se había comparado con otras redes sociales tales como instagram, X (antes Twitter) y facebook, se decidió poner una combinación de las tres, aún que más apegada a X, esto con el objetivo de que el usuario pudiera tener una interacción familiar y cómoda para poder navegar dentro de la aplicación, por lo que las Historias de usuario fueron las siguientes:

Crear cuenta: Yo como usuario requiero crear una cuenta para ser miembro e interactuar en la red social.
Crear cuenta a partir de Google: Yo como usuario requiero crear una cuenta asociando una cuenta de Google para ser miembro e interactuar en la red social.
Ingresar a cuenta por correo y contraseña: Yo como usuario requiero ingresar a mi cuenta para iniciar sesión, por medio del ingreso de correo electrónico y contraseña.
Ingresar a cuenta con Google: Yo como usuario requiero ingresar a mi cuenta utilizado la cuenta de Google asociada para iniciar sesión.
Crear Post: Yo como usuario requiero un input para ingresar los datos de la banda (redes sociales, YT, perfil de spotify, etc.) para crear un post y dar a conocer mi banda o mi recomendación musical.
Editar Post: Yo como usuario requiero un botón con icono para modificar mi post para actualizar información de mi banda o mi recomendación musical.
Eliminar Post: Yo como usuario requiero un botón con icono para eliminar lo que había publicado.
Dar “Me gusta” a un Post: Yo como usuario requiere dar “Me gusta ” a través de un botón con un icono para demostrar mi interés en las publicaciones hechas por mi u otros usuarios.
Quitar “Me gusta” a un Post: Yo como usuario requiere que el botón con icono desactive el “Me gusta ” a un post para demostrar mi desinterés en las publicaciones hechas por mi u otros usuarios.
🎤 Site map 🎤

Visualización de estructura para la página web.

🎤 Prototipos de baja fidelidad 🎤

🎤 Identidad de página 🎤

🎤 Prototipos de alta fidelidad 🎤

Home
Log in
Sign up
Feed
Post
Post populares
Notificación para eliminar Post
🎤 Pruebas de usabilidad 🎤

Se realizaron pruebas de usabilidad con potenciales usuarios, dichas pruebas lanzaron los siguientes resultados:
Cambiar icono para “Like”, ya que el rayo no se da a entender que es un like.
Los colores crean armonía de acuerdo con la identidad de la página.
Identificar qué iconos han estado activados o se pueden seleccionar.
Botones de navegación deberían de indicar en que parte de la página estas.
Eliminar el icono para cerrar sesión ya que con la oración “Cerrar Sesión”, se entiende que su funcionalidad.

🎤 Demostración para destkop 🎤

Home
Log in
Sign Up
Feed / Home
Posts más populares
Post
Perfil de usuario ###🎧 Tecnologías utilizadas 🎧
Adobe Illustrator
Figma
Trello
HTML 5
CSS 3
JavaScript Vanilla
Firebase
Fire Store
Fire Authentication

🎧 Estado del proyecto 🎧

Proyecto en repositorio remoto en Github y despegado en Github pages. Debido a funcionalidades y tiempo el proyecto queda a un 95% completado, sin embargo, se estará actualizando de manera continua para culminar con el proyecto.

🎵 Autoras 🎵

Brenda Hernandez Novoa
Erika Roque
Jazmín Ruiz Orbe

✨ Extras ✨

Visualización para el archivo en Figma https://www.figma.com/file/X3Wob6IKHlkOSyxboYEjjs/Site-maps-de-opciones?type=whiteboard&node-id=0%3A1&t=yPXNKVeLGdlV4KOS-1