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:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent