Proyecto creado para la Vibeathon de Nerdearla 2025.
Tercer puesto en la Hackathon
- Aplicación en vivo: Accede a AulaLens aquí
- Video Demo (2 min): Mira el video en YouTube
Este proyecto fue creado en una intensa maratón de 24 horas para la Vibeathon de Nerdearla. Si quieres conocer toda la historia, las decisiones técnicas, los errores que casi me cuestan la entrega y los aprendizajes del proceso, he escrito un artículo completo en mi blog.
➡️ Lee el post-mortem completo en Dev.to
Semillero Digital es una ONG que transforma la vida de jóvenes a través de la formación en oficios digitales. Utilizan Google Classroom como su plataforma principal, pero se enfrentan a tres desafíos clave:
- Seguimiento del Progreso: Carencia de una vista consolidada para rastrear el avance de cada alumno, clase y profesor de forma centralizada.
- Comunicación Fragmentada: Los estudiantes a menudo pierden notificaciones importantes como enlaces de clases, fechas de entrega o cambios de calendario.
- Métricas Inaccesibles: El equipo de coordinación necesita datos de asistencia y entregas de forma ágil, pero la extracción manual desde Classroom es un proceso lento y complejo.
AulaLens es una aplicación web complementaria que se conecta directamente a la API de Google Classroom para resolver estos problemas. No busca reemplazar Classroom, sino añadir una capa de visualización y gestión inteligente que potencia la experiencia para tres roles clave:
- Profesores: Visualizan el rendimiento de sus clases y el estado de las entregas de forma sencilla.
- Alumnos: Tienen un dashboard claro con sus tareas pendientes y su progreso general.
- ✅ Conexión Segura con Google API: Autenticación vía OAuth 2.0 para acceder a los datos de Classroom de forma segura.
- 📊 Dashboard Centralizado: Una interfaz única que muestra listas de alumnos, profesores, cursos y el estado de las tareas.
- PROGRESS BARS Progreso Visual del Alumno: Indicadores visuales (ej. barras de progreso) para ver el porcentaje de tareas completadas por cada estudiante.
- 🔎 Filtros Dinámicos: Capacidad para filtrar la información por cohorte (curso), profesor y estado de entrega (entregado, atrasado, faltante).
- 🩺 "Health Score" del Estudiante: Un algoritmo que asigna un puntaje de "salud académica" a cada alumno basado en puntualidad y completitud, permitiendo a los profesores intervenir proactivamente.
- 📈 Reportes Gráficos: Visualizaciones de datos como el porcentaje de entregas a tiempo vs. atrasadas.
- 🎭 Vistas por Roles: La interfaz se adapta mostrando la información más relevante según si el usuario es profesor o alumno.
| Área | Tecnología |
|---|---|
| Framework | Nuxt.js 3 |
| UI Kit | Nuxt UI & Tailwind CSS |
| Autenticación | Nuxt Auth para el flujo OAuth 2.0 con Google |
| API de Google | googleapis (Librería oficial para Node.js) |
| Despliegue | Vercel |
Sigue estos pasos para configurar y ejecutar AulaLens en tu máquina local.
- Node.js (versión 18.x o superior)
- Un gestor de paquetes como
pnpmo similar.
-
Clona el repositorio:
git clone https://github.com/TU_USUARIO/AulaLens.git cd AulaLens -
Instala las dependencias:
pnpm install
-
Configura las variables de entorno:
- Crea una copia del archivo de ejemplo
.env.exampley renómbrala a.env.cp .env.example .env
- Abre el archivo
.envy añade tus credenciales de la API de Google y un secreto paranuxt-auth(puedes usar https://generate-secret.vercel.app/32):# Genera un secreto aleatorio para firmar las sesiones NUXT_AUTH_SECRET=un_secreto_muy_largo_y_seguro # Credenciales obtenidas desde Google Cloud Console GOOGLE_CLIENT_ID=tu_client_id.apps.googleusercontent.com GOOGLE_CLIENT_SECRET=tu_client_secret
- Crea una copia del archivo de ejemplo
-
Inicia el servidor de desarrollo:
pnpm run dev
-
Abre tu navegador:
- La aplicación estará disponible en http://localhost:3000.
Este proyecto está bajo la Licencia MIT. Consulta el archivo LICENSE para más detalles.