Landing page
Elección de apuntes
Apuntes auditivos
Vista profe
Apuntes visuales
Vista alumno
Apuntes de diagramas

Inspiration

En la educación superior mexicana — especialmente en instituciones como el IPN — los profesores suelen manejar grupos de 30 a 50 estudiantes. Para cuando se dan cuenta de que alguien está en riesgo de reprobar, el parcial ya terminó. En ese punto, queda muy poco margen para ayudar.

Los alumnos enfrentan otra barrera: muchos no piden ayuda por su cuenta. Algunos carecen de internet estable, acceso a tutorías o formatos de estudio que funcionen para su forma de aprender. La brecha digital no es solo cuestión de dispositivos — se trata de llegar con apoyo cuando y donde los estudiantes ya están.

Construimos TutorIA porque la intervención temprana importa. Las semanas 2–3 del parcial aún dejan tiempo para recuperarse antes de la evaluación. Nuestro objetivo fue crear un sistema que detecte el riesgo académico a tiempo, se lo explique claramente al profesor y entregue apoyo personalizado al alumno — todo dentro del ecosistema Microsoft donde ya ocurre la clase: Microsoft Teams.

What it does

TutorIA es una plataforma de alerta temprana y acompañamiento impulsada por IA, con dos flujos principales:

Flujo del profesor

Dashboard de riesgo — Ver todas las materias con badges que muestran cuántos alumnos están en riesgo.
Tabla semáforo — Alumnos ordenados por nivel de riesgo (alto, medio, bajo) según asistencia, calificaciones, entrega de tareas y declive de notas.
Análisis en pantalla dividida — TutorIA, un agente de IA con voz, explica por qué un alumno necesita atención mientras un dashboard analítico se construye progresivamente (asistencia, tareas, tendencia de calificaciones).
Cuestionario diagnóstico — Los profesores envían una encuesta real de Microsoft Forms para identificar si la causa raíz es académica, económica o emocional.
Seguimiento accionable — Según las respuestas, TutorIA propone soluciones personalizadas: guías de estudio, becas institucionales o recursos de bienestar estudiantil.

Flujo del alumno

Materias con código de color — Rojo (apoyo iniciado por el profesor), morado (anomalías detectadas por el alumno/plataforma), verde (sin problemas).
Apoyo de estudio personalizado — Los alumnos eligen cómo quieren repasar:
- Resumen de audio — Explicaciones narradas paso a paso
- Mapa conceptual interactivo — Conexiones visuales entre temas, con asistente de Copilot Studio
- Presentación de diapositivas — Slides concisos de repaso
Chat conversacional — En materias moradas, los alumnos pueden hablar con TutorIA, responder preguntas diagnósticas y recibir una guía de estudio generada.

TutorIA está diseñada como Microsoft Teams Tab App — no como una herramienta aparte que profesores y alumnos deban adoptar, sino como una capa que vive donde la clase ya opera.

How we built it

Construimos un prototipo completamente navegable con una arquitectura Microsoft-first:

Capa	Tecnología
Frontend	Teams Tab App — React 19, Vite, Tailwind CSS 4
Modelo de lenguaje	Azure OpenAI — análisis de riesgo, chat, guías, mapas
Agente de voz	Azure Speech Services + Copilot Studio
Asistente del mapa	Copilot Studio + Azure Functions
Cuestionario	Microsoft Forms (+ Power Automate en roadmap)
Analytics	Power BI (roadmap); gráficas interactivas en UI del prototipo
Autenticación	Azure AD (roadmap)
Hosting	Azure Static Web Apps
Ingesta de documentos	Azure Document Intelligence (roadmap)

Detalles clave de implementación:

Agente de voz TutorIA — Usa Azure Speech para hablar el análisis en voz alta mientras aparece una transcripción tipo máquina de escribir, haciendo la salida de IA accesible y confiable.
Dashboard progresivo — Gráficas e indicadores de riesgo aparecen sincronizados con la explicación del agente, para que el profesor vea los datos mientras se interpretan.
Mapas desde material del curso — Los mapas se generan a partir de PDFs que el profesor compartió en Teams, con citas a páginas del contenido real.
Copilot en el mapa — Los alumnos pueden pedir al asistente resaltar nodos, expandir conceptos o simplificar el mapa mientras estudian.
Integración real con Microsoft Forms — El cuestionario diagnóstico está en forms.office.com y cubre dimensiones académica, económica y emocional.

Profesor detecta riesgo → TutorIA explica por qué → Se envía Forms → Alumno recibe apoyo personalizado

El prototipo usa datos demo representativos del IPN para que el jurado pueda recorrer el flujo completo sin acceso a APIs institucionales.

Challenges we ran into

Escala — Un profesor no puede revisar 40 alumnos individualmente cada semana. Tuvimos que priorizar señales accionables (asistencia menor al 70%, calificación menor a 6, tareas pendientes combinadas con declive) en lugar de datos crudos abrumadores.
Integraciones institucionales — Conectar Azure AD y Microsoft Graph API para Teams requiere un tenant del IPN. En el tiempo del hackathon, nos enfocamos en un flujo de producto completo con datos representativos, manteniendo la arquitectura lista para APIs de producción.
Brecha digital por diseño — No todos aprenden igual ni tienen la misma conectividad. Construimos tres formatos de estudio (audio, mapa visual, slides) para que el apoyo se adapte a distintos estilos y niveles de acceso.
Confianza antes de intervenir — Los profesores no actúan solo con una alerta roja. Necesitan entender el por qué. La pantalla dividida — agente hablando de un lado, dashboard construyéndose del otro — fue nuestra respuesta al problema de la "caja negra".
Sincronizar voz y visuales — Hacer que el panel analítico aparezca progresivamente mientras TutorIA habla requirió cuidar el timing para que la experiencia se sienta como una conversación coherente, no dos paneles desconectados.

Accomplishments that we're proud of

Demo navegable de punta a punta — Desde el landing hasta el análisis del profesor, envío del cuestionario y apoyo al alumno en los tres formatos de estudio.
Agente de voz que explica, no solo alerta — TutorIA le dice al profesor por qué Juan está en riesgo (caída de asistencia, tareas faltantes, declive de calificación) con lenguaje empático y claro.
Guías de estudio multimodales — Audio, mapa conceptual interactivo y presentación — todo basado en el material del curso en Teams.
Asistente tipo Copilot en el mapa — Ayuda contextual al estudiar: resaltar conceptos, expandir nodos, simplificar el mapa bajo demanda.
Integración real con Microsoft Forms — Formulario diagnóstico que cubre barreras académicas, económicas y emocionales.
Lógica de riesgo alineada al IPN — Reglas que reflejan la escala local (1–10, mínimo 6 para aprobar), parciales y tamaños típicos de grupo.
Dos rutas de intervención — Iniciativa del profesor (rojo) e iniciativa del alumno/plataforma (morado), cubriendo escenarios proactivos y reactivos.

What we learned

La intervención temprana necesita explicabilidad — Los profesores confían en sistemas que muestran su razonamiento, no solo una puntuación de riesgo.
La dificultad académica rara vez es solo académica — Presión económica y agotamiento emocional son barreras reales; el diagnóstico debe cubrir las tres dimensiones.
Teams es el hogar natural — PDFs del curso, notificaciones y actividad diaria ya viven ahí. Agregar un Tab App reduce la fricción de adopción.
Un solo formato de estudio no alcanza — Alumnos con poco tiempo o conectividad limitada se benefician de elegir cómo consumir el apoyo: escuchar, visualizar o repasar slides.
Prototipar el recorrido completo primero — Construir el flujo profesor → alumno antes de cablear cada API institucional nos permitió validar la historia del producto rápido y enfocar la integración donde más importa.

What's next for TutorIA

Fase 1 — Piloto IPN

Autenticación institucional con Azure AD
Microsoft Graph API para canales, archivos y notificaciones de Teams
Datos reales del LMS en lugar de mocks de demo

Fase 2 — Despliegue en producción

Teams Tab App publicada y desplegada vía Azure Static Web Apps
Azure Functions para orquestación de agentes
Power Automate conectando respuestas de Microsoft Forms de vuelta a TutorIA automáticamente

Fase 3 — Escala institucional

Dashboards de Power BI para insights y monitoreo de tendencias a nivel escuela
Azure Document Intelligence para ingesta automática de listas y registros de calificaciones
Agentes de Copilot Studio conectados a material del curso en vivo y catálogos de recursos institucionales

Visión a largo plazo: TutorIA se convierte en una capa de alerta temprana sobre la infraestructura LMS existente — interpretando tendencias, diagnosticando causas raíz y proponiendo acciones concretas dentro de Microsoft Teams, sin pedirle a los profesores que cambien cómo ya enseñan.

Built with

Versión corta (copy-paste):

JavaScript, React 19, Vite, Tailwind CSS 4, React Router, Node.js

Ecosistema Microsoft: Azure OpenAI, Azure Speech Services, Copilot Studio, Microsoft Teams, Microsoft Forms, Azure Functions, Azure Static Web Apps, Azure AD, Power BI, Power Automate, Azure Document Intelligence

UI y visualización: React Flow, Dagre, Recharts, Framer Motion, Three.js

Versión en prosa:

Construimos TutorIA con JavaScript y React 19, empaquetado con **Vite y estilizado con Tailwind CSS 4. La navegación usa **React Router, y el runtime del backend corre en **Node.js (diseñado para desplegarse en Azure Functions).

La capa de IA está impulsada por Azure OpenAI para análisis de riesgo, chat conversacional, guías de estudio y generación de mapas conceptuales. El agente de voz TutorIA usa Azure Speech Services y Copilot Studio. El mapa de estudio interactivo incluye un asistente de **Copilot Studio para ayuda contextual.

Integramos Microsoft Forms para el cuestionario diagnóstico y diseñamos el producto como Microsoft Teams Tab App. Los analytics están pensados para **Power BI, con **Power Automate planificado para los flujos de respuestas del formulario.

Para visualización usamos React Flow y Dagre (mapas conceptuales), Recharts (dashboard analítico), y Framer Motion + Three.js (animaciones del landing). La autenticación y el hosting apuntan a Azure AD y Azure Static Web Apps, con **Azure Document Intelligence planificado para ingesta de documentos.