Red Social INFONATURA

Índice

• 1. Resumen del proyecto
• 2. Criterios de aceptación mínimos del proyecto
• 3. Entrega

1. Resumen del proyecto

Nombre producto: INFO NATURA

Descripción: Red social para amantes de la naturaleza.

Este proyecto es una Single-page Application (SPA) responsive (con más de una vista / página) que permite a cualquier usuario crear una cuenta de acceso y loguearse con ella; crear, editar y borrar publicacciones.

Los objetivos generales de este proyecto son los siguientes

• Desarrollar una SPA con temática de red social ✓
• Aplicar los conceptos de responsividad en el desarrollo de las vistas (templates) ✓
• Implementar un router para la navegación entre las diferentes vistas de la aplicación ✓
• Emplear un servicio externo para la persistencia de datos de la aplicación ✓
• Crear una suite de pruebas unitarias que permitan testear código asíncrono ✓

2. Criterios de aceptación mínimos del proyecto

2.1 Boilerplate

Se organizó los archivos siguiendo una estructura de Modelo-Vista-Controlador.

Se utilizó la herramienta Vite para empaquetar módulos y arrancar el servidor de desarrollo, Hot Module Replacement (HMR),

2.2 Definición del producto

• Quiénes son los principales usuarios de producto.

Se dirige a personas que quieran compartir experiencias, noticias y consejos sobre el cuidado y proteccion del medio ambiente.

• Qué problema resuelve el producto / para qué le servirá a estos usuarios.

Unir a personas que comparten su preocupación por el cuidado del planeta.

2.3 Historias de usuario

2.4 Diseño de la Interfaz de Usuario (prototipos)

2.5 Responsive

Debe verse bien en dispositivos de pantallas grandes (computadoras/es, laptops, etc.) y pequeñas (tablets, celulares, etc.). Técnica mobile first

2.6 Comportamiento de la interfaz de usuario (UI)

Creación de cuenta de usuario e inicio de sesión

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

Muro/timeline

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

2.7 Consideraciones técnicas Front-end

• Separar la manipulación del DOM de la lógica (Separación de responsabilidades).
• Contar con múltiples vistas. Single Page Application (SPA)
• Alterar y persistir datos. Se utilizó Firebase.

2.8 Consideraciones técnicas UX

• Hacer al menos 2 entrevistas con usuarios.
• Hacer un prototipo de baja y alta fidelidad.
• Hacer sesiones de testing de usabilidad con el producto en HTML.

3. Entrega

Código en GitHub Social Network - INFONATURA y la interfaz será desplegada usando GitHub pages u otro servicio de hosting (Firebase, Netlify, Vercel, etc).

---