Pantalla #1 : Login

Funcionalidades:

 Front-end:
1. Dos campos de tipo input, de tipo “email” y “password” respectivamente.
2. Un botón para enviar dichos datos al back-end.
3. Dos botones para iniciar sesión con Google o Facebook.
4. Enlace a la página de Registro en caso de que el usuario no esté logueado.
5. Un mensaje de alerta en caso de que los datos sean incorrectos.
 Back-end:
1. Una ruta llamada “/auth/login", cuya función sea comparar los datos del usuario
con los que hay en la base de datos.
2. En caso de que la petición sea exitosa devolver código 200, en caso contrario, un
400.
3. Devolver el token de autenticación.

Pantalla #2 : Registro

Funcionalidades:

 Front-end:
1. Tres campos de tipo input, de tipo “text”,”email” y “password” respectivamente.
2. Un botón para enviar dichos datos al back-end.
3. Dos botones para registrarse con Google o Facebook.
4. Enlace a la página de Login en caso que el usuario esté logueado.
5. Un mensaje de alerta en caso que los datos ya hayan sido usados.
6. Dos botones para elegir si quiere una cuenta de freelancer o empleador.

 Back-end:
1. Una ruta llamada “/auth/register” cuya función sea comparar los datos y crear el
nuevo usuario.
2. En caso de que la petición sea exitosa, devolver un 201, en caso contrario, un 400.
3. Devolver el token de autenticación.
Pantalla #3 : Chat

Funcionalidades:

 Front-end:
1. Una barra con la foto y el nombre del usuario con quien se chatea, la cual sirve de
vinculo al perfil de este mismo.
2. Los mensajes del usuario se colocan a la derecha, fondo azul y letra blanca, los del
otro usuario irán en fondo gris con letra negra, ambos llevarán la hora en la que se
envía.
3. Un campo input de tipo “text” junto a un botón con un icono el cual sirve para
enviar el mensaje.
4. Fecha en la que se realiza la conversación, va en el centro de la pantalla con letra
gris.
 Back-end:
1. El sistema de mensajería se ejecutará mediante sockets.
2. Una ruta llamada “/chat/{id}” en donde el parámetro id, es el identificador del
usuario con el que se está chateando, esta ruta devolverá la foto, nombre y ruta
del perfil de este mismo.

Pantalla #4 : Bandeja de Entrada

Funcionalidades:

 Front-end:
1. Una lista de los contactos con los que se ha iniciado un chat.
2. Si no hay chats iniciados, saldrá un mensaje que diga “No hay conversaciones
recientes”.
3. Una barra de búsqueda para encontrar usuarios he iniciar un chat con ellos.
 Back-end:
1. Una ruta llamada “/chat-list/{id}” en donde el parámetro id, de nuestro usuario,
esta ruta devolverá una lista con los usuarios con los que se haya iniciado chat
junto a un código 200.
2. En caso de que la lista de chats esté vacía, devolverá un código 400.
3. Creará y eliminará los chats.
4. Ordenará la lista según la fecha del último mensaje.
Pantalla #5 : Barra de Búsqueda

Funcionalidades:

 Front-end:
1. Una barra de búsqueda, en la que según vaya escribiendo, va mostrando usuarios
que coincidan.
2. Un historial de las ultimas búsquedas que se han hecho.
3. El historial servirá como link al perfil ajeno del usuario, así como un icono para
eliminar ese registro del historial
 Back-end:
1. Una ruta llamada “/search/record” que devolverá el historial de todas las
búsquedas realizadas
2. Se agregará y eliminará registros en el historial de búsqueda del usuario.

Pantalla #6 : Seguidores

Funcionalidades:

 Front-end:
1. Una lista de los usuarios que sean seguidores del usuario en sí.
2. Cada registro de la lista tiene un botón para eliminarlo de la lista de seguidores de
ambos.
 Back-end:

1. Una ruta llamada “/followers/{id}” que devolverá una lista con los usuarios que
son seguidores de nuestro usuario en sí.
2. Creará y eliminará registros de la lista de seguidores del usuario.