Sistema de Gestión de Tutorías Universitarias
- Acerca del Proyecto
- Características Principales
- Capturas de Pantalla
- Tecnologías
- Comenzando
- Estructura del Proyecto
- Arquitectura
Mi Tutor es un sistema integral de apoyo a la gestión del proceso de tutoría universitaria, diseñado para facilitar el registro, seguimiento y evaluación de las tutorías académicas.
El frontend proporciona una interfaz moderna, intuitiva y responsiva que permite:
- 👨🎓 Estudiantes: Agendar citas con tutores, hacer seguimiento a su progreso académico y acceder a recursos de apoyo
- 👨🏫 Tutores: Gestionar horarios, registrar sesiones de tutoría, dar seguimiento a estudiantes asignados
- 👔 Administradores: Configurar modelos de tutoría, gestionar usuarios, generar reportes e indicadores
Fortalecer el acompañamiento y bienestar del estudiante mediante una solución flexible y adaptable que puede ser utilizada por cualquier universidad para optimizar su proceso de tutorías.
- Autenticación mediante Google OAuth 2.0
- Gestión de roles y permisos (Estudiante, Tutor, Administrador)
- Rutas protegidas según rol de usuario
- Calendario interactivo para visualización de citas
- Sistema de agendamiento de tutorías
- Notificaciones y recordatorios
- Historial de sesiones realizadas
- Visualización de métricas e indicadores clave
- Gráficos interactivos con Recharts
- Exportación de datos a Excel y PDF
- Reportes personalizados según rol
- Perfiles de estudiantes y tutores
- Asignación de tutores a estudiantes
- Seguimiento individualizado
- Gestión de grupos y cohortes
- Diseño moderno con Tailwind CSS y Ant Design
- Totalmente responsivo (Mobile-first)
- Modo oscuro/claro
- Componentes reutilizables con Flowbite React
- Indicadores de desempeño académico
- Seguimiento de asistencia
- Evaluación de satisfacción
- Alertas tempranas
- React 18.3 - Librería de UI
- TypeScript - Tipado estático
- Vite - Build tool de alto rendimiento
- React Router DOM - Enrutamiento
- Redux Toolkit - Gestión de estado global
- Axios - Cliente HTTP
- React Query - Gestión de estado del servidor
- Tailwind CSS - Framework de utilidades CSS
- Ant Design - Biblioteca de componentes
- Flowbite React - Componentes UI
- Headless UI - Componentes accesibles
- Heroicons - Iconos
- Recharts - Gráficos y visualizaciones
- AG Grid - Tablas avanzadas de datos
- React Big Calendar - Calendario de eventos
- Day.js - Manipulación de fechas
- date-fns - Utilidades de fechas
- Papa Parse - Parser de CSV
- jsPDF - Generación de PDFs
- html2canvas - Capturas de pantalla
- XLSX - Manipulación de Excel
- Vitest - Framework de testing
- jsdom - Simulación del DOM
- Axios Mock Adapter - Mocking de peticiones
- @react-oauth/google - Google OAuth 2.0
Asegúrate de tener instalado:
- Node.js >= 18.x
- npm >= 9.x o yarn >= 1.22.x
# Verificar versiones
node --version
npm --version- Clona el repositorio
git clone https://github.com/ReactGPT/MiTutor-frontend. git
cd MiTutor-frontend- Instala las dependencias
npm install
# o
yarn install- Configura las variables de entorno
Crea un archivo .env en la raíz del proyecto:
cp .env.example .envEdita el archivo .env con tus configuraciones (ver sección Variables de Entorno)
- Inicia el servidor de desarrollo
npm run dev
# o
yarn dev- Abre tu navegador
Navega a http://localhost:5173
MiTutor-frontend/
├── public/ # Archivos estáticos
│ ├── favicon.ico
│ └── logo.png
├── src/
│ ├── assets/ # Recursos (imágenes, fuentes, etc.)
│ ├── components/ # Componentes reutilizables
│ │ ├── common/ # Componentes comunes (Botones, Inputs, etc.)
│ │ ├── layouts/ # Componentes de layout
│ │ └── features/ # Componentes específicos de funcionalidades
│ ├── context/ # Context API de React
│ ├── data/ # Datos mock y constantes
│ ├── layouts/ # Layouts principales de la aplicación
│ ├── login/ # Componentes de autenticación
│ ├── pages/ # Páginas/Vistas de la aplicación
│ │ ├── Dashboard/
│ │ ├── Estudiantes/
│ │ ├── Tutores/
│ │ ├── Citas/
│ │ └── Reportes/
│ ├── store/ # Redux store y slices
│ │ ├── slices/
│ │ └── store.ts
│ ├── utils/ # Funciones de utilidad
│ │ ├── api.ts # Configuración de Axios
│ │ ├── helpers.ts # Funciones helper
│ │ └── validators.ts
│ ├── App.tsx # Componente principal
│ ├── main.tsx # Punto de entrada
│ ├── config.ts # Configuraciones globales
│ └── index.css # Estilos globales
├── .env # Variables de entorno (no versionado)
├── .env.example # Ejemplo de variables de entorno
├── .eslintrc.cjs # Configuración de ESLint
├── .gitignore # Archivos ignorados por Git
├── index.html # HTML principal
├── package.json # Dependencias y scripts
├── postcss.config.js # Configuración de PostCSS
├── tailwind.config.js # Configuración de Tailwind
├── tsconfig.json # Configuración de TypeScript
├── vite. config.ts # Configuración de Vite
├── vitest.config.ts # Configuración de Vitest
└── README.md # Este archivo
El proyecto sigue una arquitectura basada en:
- Component-Based Architecture: Componentes modulares y reutilizables
- Container/Presenter Pattern: Separación de lógica y presentación
- Feature-Based Organization: Organización por características funcionales
- Redux Toolkit: Gestión de estado predecible
Usuario → Componente → Action → Reducer → Store → Componente → UI
↓
API Call (Axios)
↓
Backend
- Estado Global: Redux Toolkit para autenticación, usuario, configuraciones
- Estado Local: React Hooks (useState, useReducer) para estado de componentes
- Estado del Servidor: Axios + React Query para caché y sincronización
/ → Página de inicio/login
/dashboard → Dashboard principal
/estudiantes → Listado de estudiantes
/estudiantes/:id → Perfil de estudiante
/tutores → Listado de tutores
/tutores/:id → Perfil de tutor
/citas → Calendario y gestión de citas
/citas/nueva → Crear nueva cita
/reportes → Reportes y análisis
/configuracion → Configuración del sistema
/perfil → Perfil del usuario actual
Hecho con ❤️ por el equipo