Hito 1: Desarrollo del Frontend en React (1/9) En este primer hito, los estudiantes se centrarán en el desarrollo del frontend de la aplicación utilizando React/NEXT. El objetivo es crear una interfaz de usuario atractiva y funcional que permita a los usuarios registrarse, iniciar sesión y ver una lista básica de tareas. Tareas: • Crear una página de registro y una de inicio de sesión utilizando componentes de React./NEXT • Implementar la navegación entre las páginas utilizando enrutamiento de React./NEXT. • Mostrar una lista de tareas ficticias en la página principal. • Aplicar estilos y diseño a la interfaz utilizando CSS o bibliotecas de diseño. Entregables: Código fuente de React./NEXT con las páginas de registro, inicio de sesión y la interfaz inicial. Ejemplos de Tareas: en este hitos las tareas de backend o API se simularan • Crear una Nueva Tarea: o Descripción: Agregar la funcionalidad para que los usuarios puedan crear una nueva tarea. o Pasos: ▪ Implementar un formulario en el frontend para ingresar el título y la descripción de la nueva tarea. ▪ Enviar los datos del formulario al backend a través de la API. ▪ En el backend, crear una nueva entrada en la base de datos para representar la tarea. • Editar una Tarea Existente: o Descripción: Permitir a los usuarios editar los detalles de una tarea existente. o Pasos: ▪ Agregar un botón de "Editar" en cada tarea en la interfaz. ▪ Al hacer clic en "Editar", mostrar un formulario prellenado con los detalles actuales de la tarea. ▪ Enviar los datos editados al backend a través de la API y actualizar la entrada correspondiente en la base de datos. • Marcar una Tarea como Completada: o Descripción: Implementar la capacidad de marcar una tarea como completada. o Pasos: ▪ Agregar un botón o una casilla de verificación en cada tarea en la interfaz. ▪ Almarcarlacasillaohacerclicenelbotón,enviarlasolicitudalbackend a través de la API. ▪ En el backend, actualizar el estado de la tarea en la base de datos para reflejar su estado como completada. • Eliminar una Tarea: o Descripción: Permitir a los usuarios eliminar una tarea que ya no deseen mantener. o Pasos: ▪ Agregar un botón de "Eliminar" en cada tarea en la interfaz. 2 ▪ Al hacer clic en "Eliminar", enviar la solicitud al backend para eliminar la tarea de la base de datos. ▪ Actualizar la lista de tareas en el frontend para reflejar la eliminación. • Filtrar y Ordenar Tareas: o Descripción: Agregar opciones de filtrado y ordenamiento a la lista de tareas. o Pasos: ▪ Implementar botones o selectores en la interfaz para permitir a los usuarios elegir un criterio de filtrado (por estado, por fecha, etc.). ▪ Configurarlacomunicaciónentreelfrontendyelbackendparaenviarel criterio de filtrado y recibir la lista correspondiente de tareas. ▪ Implementar la lógica en el backend para filtrar y ordenar las tareas según el criterio seleccionado