Aplicación de Gestión de Clases
Esta aplicación consta de un servidor Express en el lado del backend y una interfaz de usuario desarrollada con React en el frontend. Permite la gestión de una lista de clases, con funcionalidades para actualizar la información de cada clase, marcarlas como importantes y agregar comentarios.
Instalación
- Clona este repositorio en tu máquina local.
- Instala las dependencias del servidor y del cliente ejecutando:
npm run install-services- Crea un archivo .env en el directorio del backend y define la variable de entorno URL con el enlace facilitado por la UTN para acceder a la base de datos de las clases.
Configuración del Servidor
- En la carpeta data del servidor, crea un archivo llamado mappedClass.json. Este archivo debe contener un array vacío que será utilizado por el servidor para almacenar la información de las clases.
Ejecución
- En la raíz del proyecto, ejecuta npm start para iniciar tanto el servidor como el cliente.
Uso
Interfaz de Usuario
- La interfaz muestra una lista de clases con su fecha, ID, estado de importancia y comentarios.
- Puedes hacer clic en el botón "Modificar" para editar la información de una clase.
- Se abrirá un modal donde podrás actualizar la fecha, marcar la clase como importante y agregar comentarios.
- Una vez completada la modificación, haz clic en "Enviar" para guardar los cambios.
Servidor
El servidor expone dos endpoints:
- PATCH /api/update: Actualiza la lista de clases basada en la base de datos original. Elimina las clases que ya no existen y agrega las nuevas.
- GET /api: Devuelve la lista de clases en su estado actual.
- PATCH /api: Permite la modificación de una clase específica mediante su ID.
Observaciones
- Asegúrate de tener correctamente configuradas las variables de entorno en el archivo .env.
- El archivo mappedClass.json debe estar presente en la carpeta data del servidor con un array vacío inicial.
- Este archivo será leído y modificado por el servidor según las acciones realizadas en la interfaz de usuario.
Tecnologías Utilizadas
Express: Para el desarrollo del servidor backend.
React: Para la creación de la interfaz de usuario dinámica.
axios: Para realizar solicitudes HTTP tanto en el servidor como en el cliente.
dotenv: Para la gestión de variables de entorno.