Bienvenidos a Food Match, una red donde los amantes de la cocina podrán compartir sus recetas. En esta página deberán iniciar sesión y si no tienen una cuenta podrán crear una o ingresar con sus cuentas de Google, Twitter o Github. Dentro del sitio web los usuarios podrán compartir sus recetas favoritas con otros usuarios, además de eliminarlas o editarlas y podrán interactuar dando like a las publicaciones.
La idea del proyecto, surge a partir de una encuesta realizada a una muestra de 10 personas, dando como resultado, que el 90% de las personas encuestadas evalúan que lo más difícil es considerar que cocinar, pensando en ellos, Food Macth genera un espacio donde por medio de las diferentes publicaciones que comparten los usuarios, les muestra una variedad de opciones el cual podrán escoger según su preferencia.
Se realizó el prototipo de baja fidelidad pensando en las necesidades del usuario descritas en las historias de usuario.
El prototipo de alta fidelidad se realizo en version móvil y otro para escritorio, se definio la paleta de colores que se utilizarian y el diseño.
Para iniciar con el desarrollo de la página web, se realizó una encuesta a un grupo de posibles usuarios con la finalidad de conocer sus preferencias o expectativas. Para ello se les pidió que completaran el siguiente formulario. A partir de ella y teniendo en cuenta los principales requerimientos del proyecto, creamos las siguientes historias de usuario.
Características que se cubren en todas las historias de usuario:
- Criterios de Aceptación.
- [ 🗸 ] Que la vista sea responsive
- [ 🗸 ] Que los diseños sigan las pautas del prototipado de alta fielidad
Yo como usuario de Food Match quiero poder loguearme en la red social para poder ingresar a la plataforma.
HU02: Yo como usuario de Food Match quiero poder registrarme en la red social para interactuar con otros usuarios
- Criterios de Aceptación.
- [ 🗸 ] Que el correo ingresado por el usuario sea válido
- [ 🗸 ] Que la contraseña posea como mínimo 6 caracteres
- [ 🗸 ] Que este conectado a Firebase
Yo como usuario de Food Match quiero poder ingresar a la página con el correo, con google, twitter y Github
- Criterios de Aceptación.
- [ 🗸 ] Que los íconos de gmail, twitter y github sigan el diseño de marca de cada uno
- [ 🗸 ] Que estén conectados a Firebase y permitan el ingreso con las cuentas
- [ 🗸 ] Que permita la entrada con un nuevo correo
Yo como usuario de Food Match quiero poder hacer publicaciones, que se vean en pantalla, tengan la opcion de editar y eliminar, todo en el muro de la red social para que mas usuarios del aplicativo lo vean.
- Criterios de Aceptación.
- [ 🗸 ] Que la publicación se quede guardada en la base de datos
Yo como usario de Food Match quiero darle like a las publicaciones.
- Criterios de Aceptación.
- [ 🗸 ] Que esté conectado con Firebase
- [ 🗸 ] Que se guarde el conteo de los like y se visualicen
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.
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
(Firebase, Netlify, Vercel, etc) que puedas haber encontrado en el camino.
Revisa la documentación de Vite
para guiarte con eso.
Se realizaron test de usabilidad para saber la opinión de los usuarios sobre la página, obteniendo los siguientes resultados:
-
Usuario 1 Después de que el usuario revisara la aplicación, sugirió los siguiente cambios:
- [ 🗸 ] Que la palabra "Registrar ahora" resalte cuando el puntero pase sobre ella
- [ 🗸 ] Que el botón Guardar e Ingresar, así como los espacios para colocar el Correo Electrónico y la Contraseña generen alguna reacción cuando el puntero pase sobre ellos
- [ 🗸 ] Solicitó que en los post aparezcan los nombres o alias de los usuarios en vez de los correos, debido a que pueden ser información sensible
- [ 🗸 ] Que los post incluyan la hora de su publicación y el lugar
-
Usuario 2 Después de que el usuario revisara la aplicación, sugirió los siguiente cambios:
- [ 🗸 ] Cuando le de guardar en el cuadro de publicar seria bueno que el cuadro se cerrara
- [ 🗸] En el momento de eliminar un test, deberia de aparecer un mensaje para asegurarse de querer borrar la publicacion
- [ 🗸 ] Cuando estaba editando y le di al boton guardar, como el cuadro seguia mostrandose pense que no habia guardado, seria bueno que cuando se de click se cierre ese cuadro.
-
Usuario 3 Después de que el usuario revisara la aplicación, sugirió los siguiente cambios:
- [ 🗸 ] Cuando se va a publicar por segunda vez, la informacion de la primera publicacion sigue en el cuadro
- [ 🗸 ] Cuando se va a editar una publicacion y luego se guarda el cuadro sigue puesto y no se cierra
-
Usuario 4 Después de que usuario revisara la aplicación, sugirió los siguiente cambios:
- [ 🗸 ] Corregir alineación de los iconos del logueo de las redes sociales
- [ 🗸 ] Que los mensajes de error se muestren debajo de los casillas donde se ingresa el correo y la contraseña
- [ 🗸 ] Agregar un botón de retorno a la página de login y registro hacia la página de bienvenida
🧵 Realizado por: