Inspiration

• Empoderar a instituciones con Google Classroom a gestionar mejor el seguimiento académico.
  
• Detectar estudiantes en riesgo a tiempo y facilitar la intervención del profesor/coordinador.
  
• Unificar la experiencia por rol (estudiante, profesor, coordinador) con dashboards realmente útiles.

What it does

• Autenticación con Google y sincronización de cursos, tareas, profesores y estudiantes desde Google Classroom.
  
• Dashboards por rol:
  • Estudiante: progreso, tareas pendientes/atrasadas, próximas entregas, accesos directos a Classroom.
    
  • Profesor: gestión de estudiantes, centro de alertas por severidad, comunicación por email, comisiones y reportes.
    
  • Coordinador: métricas globales, alertas críticas, comisiones que requieren atención, auto-asignación inteligente de estudiantes a profesores.
• Sistema de auto-asignación basado en especialización y carga de trabajo.
  
• Tipado estricto y diseño accesible con tokens semánticos.

How we built it

• Frontend: Next.js 15 (App Router), TypeScript, Tailwind CSS v4, componentes basados en Radix UI patterns.
  
• Integración: src/lib/classroom.ts con funciones como
  getUserCourses(), getStudentProgress(), getTeacherDashboardStats(),
  getCoordinatorDashboardStats() y autoAssignStudents().
  
• Contextos:
  
  • src/contexts/auth-context.tsx (OAuth/AccessToken)
    
  • src/contexts/role-context.tsx (multi-rol con persistencia).
    
• Páginas por rol:
  • Profesor:
    src/app/teacher/students/,
    src/app/teacher/commissions/,
    src/app/teacher/alerts/,
    src/app/teacher/reports/.
    
  • Coordinador:
    src/app/coordinator/teachers/,
    src/app/coordinator/students/.
    
  • Estudiante:
    src/app/dashboard/,
    src/app/assignments/,
    src/app/progress/.
    
• UI/UX: Accesibilidad y contraste mejorados, menús contextuales por rol, modal de email reutilizable src/components/teacher/email-modal.tsx.

Challenges we ran into

• Manejar permisos reales de Google Classroom y fallos parciales por curso.
  
• Eliminar por completo el uso de any en TypeScript y mantener interfaces coherentes entre páginas y componentes.
  
• Sincronización de estados de autenticación con carga de dashboards para evitar flashes/errores.
  
• Diseño accesible en modo claro/oscuro con colores semánticos (evitando hardcodes).
  
• Conflictos de puerto (5001) y debugging de errores 500 por fallas de compilación.

Accomplishments that we're proud of

• Migración de datos mock a datos 100% reales de Google Classroom.
  
• Sistema de auto-asignación inteligente listo para producción.
  
• Dashboards realmente útiles por rol, con navegación contextual y acciones directas.
  
• Tipado estricto de punta a punta, mejorando mantenibilidad y DX.
  
• Documentación completa en README para instalación, arquitectura y troubleshooting.

What we learned

• Buenas prácticas para integrar Google OAuth y Google Classroom a escala.
  
• Importancia de límites y fallbacks ante errores parciales en APIs externas.
  
• Cómo diseñar para accesibilidad (tokens semánticos, contraste, responsive real).
  
• Patrón de Suspense para useSearchParams() y coordinación de estados de autenticación/carga.

What's next for Classroom for Semillero Digital

• Persistencia real de asignaciones profesor-estudiante en base de datos.
  
• Notificaciones automáticas (email/push) para alertas críticas.
  
• Reportes exportables y dashboards de tendencias temporales.
  
• Página por comisión con filtros, búsqueda y métricas avanzadas.
  
• Integración con proveedores de email (SendGrid/AWS SES) y calendario.
  
• Webhooks para sincronización en tiempo real con Google Classroom.

Built With

• eslint
• next
• typescript