ODC: Manager es una aplicación diseñada para gestionar y centralizar las inscripciones a los cursos que se imparten en ODC (Orange Digital Center) de manera eficiente, ofreciendo un panel de administración intuitivo y funcionalidades clave para simplificar el proceso de registro y seguimiento de datos.

Índice

• Características
• Tecnologías Utilizadas
• Instalación
• Estructura del Proyecto
• Tests unitarios
• Previsualización de la Web
• Autores

Características Principales

• Gestión de Inscripciones: Permite registrar, editar, eliminar y monitorear las inscripciones a los cursos presenciales en ODC sin tener que redirigirse a una plataforma externa.

• Panel Administrativo: Acceso para gestionar cursos y inscripciones y administradores. El administrador tiene acceso a estadísticas y datos relevantes de cada curso y sus inscripciones, añadiendo la funcionalidad de descargar los datos en formato CSV y PDF.

• Seguridad: Autenticación y autorización de los administradores y facilitadores mediante JWT y bcrypt.

• Interfaz Intuitiva: UI amigable desarrollada detalladamente con Tailwind CSS, con un diseño basado totalmente en el libro de estilo de Orange.

• Figma y Figjam

• Archivo de Figma

Flujo de proceso de la aplicación hecho en FigJam para facilitar el proceso de desarrollo

• Archivo de FigJam

• Base de Datos Relacional: Modelo de datos eficiente y modular utilizando Sequelize. Permite que en un futuro se puedan añadir más modelos y relaciones sin afectar la estructura existente.

Este proyecto fue desarrollado utilizando tecnologías y librerías actuales que facilitan el desarrollo de aplicaciones web modernas y escalables

---

Frontend

Biblioteca para construir interfaces de usuario y una página web dinámica e intuitiva.

Herramienta de construcción rápida y ligera para desarrollar proyectos con React.

Framework CSS para estilos rápidos y personalizables.

Cliente HTTP para realizar peticiones al backend de forma sencilla.

Libreria usada para personalizar los menús de cascada y las opciones de selección.

usado para crear y personalizar las gráficas del dashboard principal de administración.

---

Backend

Entorno de ejecución para JavaScript en el servidor.

Framework para construir APIs rápidas y escalables.

Para interactuar con la base de datos de forma más intuitiva.

Sistema de gestión de bases de datos relacional.

Librería para el hash de contraseñas, asegurando la seguridad de los datos sensibles.

Tecnología para manejar la autenticación y autorización de usuarios, asegurando la seguridad de las sesiones de usuario.

---

Testing

Framework para pruebas unitarias y de integración.

Librería para pruebas HTTP.

Prerrequisitos

• Node.js

• MySQL Workbench

• Git

Instrucciones

1. Clonar el repositorio:

   git clone <URL_DEL_REPOSITORIO>
   cd ODC:Manager

2. Instalar dependencias:

   npm install
   cd client && npm install
   cd .. && cd server && npm install

3. Configurar variables de entorno: Crea un archivo .env en la raíz del proyecto y define las siguientes variables:

   DB_DEV_NAME=odc_project
   DB_TEST_NAME=odc_project_test
   DB_USER=tuUsuario
   DB_PASSWORD=tucontraseña
   DB_HOST=localhost
   DB_PORT=3306
   PORT=3000
   JWT_SECRET=secretKey
   NODE_ENV=development
   SECRET_KEY=miClaveSuperSecreta

4. Configurar la base de datos:

   • Asegúrate de tener MySQL instalado y en ejecución.
   • Crea la base de datos usando el nombre especificado en el archivo .env.
   • Ejecuta las migraciones usando Sequelize (si está configurado correctamente, debería crear las tablas automáticamente).

5. Iniciar el servidor:

   cd server
   npm run dev

6. Iniciar el cliente:

   cd client 
   npm run dev

7. Acceder a la aplicación: Visita http://localhost:5173/ en tu navegador.

Estructura del Proyecto

  odc_project/
      ├── client/                  # Código del frontend (interfaz de usuario)
      │   ├── node_modules/        # Dependencias del cliente
      │   ├── public/              # Archivos estáticos (imágenes, CSS, index.html)
      │   ├── src/                 # Código fuente de la aplicación cliente
      │   │   ├── assets/          # Recursos estáticos (imágenes, estilos)
      │   │   ├── components/      # Componentes reutilizables de React
      │   │   ├── context/         # Contexto de React
      │   │   ├── layout/          # Componentes de diseño y navegación
      │   │   ├── pages/           # Páginas principales
      │   │   ├── services/        # Servicios y llamadas a la API
      │   │   ├── test/            # Pruebas unitarias del frontend
      │   │   ├── utils/           # Utilidades y funciones auxiliares
      │   │   └── Main.jsx         # Componente principal de la aplicación
      │   ├── eslint.config.js     # Configuración de ESLint
      │   ├── index.html           # Página principal
      │   ├── postcss.config.js    # Configuración de PostCSS
      │   ├── tailwind.config.js   # Configuración de TailwindCSS
      │   └── vite.config.js       # Configuración de Vite
      ├── server/                  # Código del backend (API y lógica del servidor)
      │   ├── controllers/         # Controladores que gestionan lógica de las rutas
      │   ├── database/            # Configuración de la base de datos
      │   ├── interfaces/          # Definiciones de tipos de datos e interfaces
      │   ├── mailer/              # Configuración de nodemailer
      │   ├── middleware/          # Middleware para autenticación, logs, etc.
      │   ├── models/              # Modelos de la base de datos (ORM)
      │   ├── node_modules/        # Dependencias del servidor
      │   ├── routes/              # Definición de las rutas de la API
      │   ├── utils/               # Funciones de utilidad usadas en el servidor
      │   ├── test                 # Pruebas unitarias del backend
      │   └── .env                 # Variables de entorno para el servidor
      └── README.md                # Documentación del proyecto

Para ejecutar las pruebas, utiliza el siguiente comando:

npx run test roleModel.test.js
npx run test adminModel.test.js

Las pruebas cubren:

• Creación de administradores
• Creación de roles
• Creación de inscripciones

Previsualización de la Aplicación

Panel de Administración (PC/Laptop)

Página Principal de Cursos (PC/Movil)

Formulario de Inscripción (PC/Movil)

José Ruiz

Proyect Owner, Frontend Developer, Backend Developer

Vada Velázquez

Scrum Master, Frontend Developer, Backend Developer

Wilder Aguilar

Backend Developer, Frontend Developer, Data Scientist

César Mercado

Backend Developer, Frontend Developer

Sara Alcaraz

UI/UX Designer, Frontend Developer, Backend Developer

Jennifer Tello

Frontend Developer, Backend Developer, Tester

Si tienes alguna duda o necesitas más información, no dudes en contactarnos.