Inspiration
La misión de Semillero Digital me conectó inmediatamente. Vi un problema claro y tangible: una organización increíble que dedica su esfuerzo a cambiar vidas, pero que se ve frenada por la tediosa tarea de extraer y analizar datos manualmente desde Google Classroom.
Mi inspiración fue construir un puente tecnológico para ellos. Quería crear una herramienta que les devolviera el tiempo y les diera la claridad que necesitan para enfocarse en su misión principal: apoyar a los estudiantes. La idea de transformar datos dispersos en una visión clara y accionable fue el motor de este proyecto.
What it does
Semillero Digital Tracker es un dashboard web que se conecta de forma segura a la API de Google Classroom para dar a los coordinadores y profesores una visión consolidada y en tiempo real del progreso de sus alumnos. Específicamente, la aplicación:
- Muestra un dashboard centralizado: Presenta una lista de todos los estudiantes con su porcentaje de progreso general, permitiendo ver de un vistazo quién está al día y quién se está quedando atrás.
- Permite un análisis detallado: Ofrece filtros para desglosar la información por cohorte, por profesor y, crucialmente, por el estado de las entregas (a tiempo, atrasadas o faltantes).
- Proporciona métricas claras: Cuantifica el número de tareas entregadas, atrasadas y faltantes por cada alumno, convirtiendo la información de Classroom en datos fáciles de entender.
Elimina el trabajo manual: Todo el proceso es automático, desde el login con Google hasta la actualización de los datos, liberando al equipo de Semillero Digital de la exportación manual a hojas de cálculo.
How we built it
Para construir este proyecto en un tiempo limitado, elegí un stack tecnológico moderno y eficiente que me permitiera moverme con rapidez:
Frontend: Usé Next.js y React por su increíble rendimiento y experiencia de desarrollo. Para la interfaz, implementé Tailwind CSS y la librería de componentes Shadcn/UI, lo que me permitió crear un diseño limpio y profesional rápidamente.
Autenticación: Integré NextAuth.js para gestionar el complejo flujo de inicio de sesión con Google (OAuth 2.0) de una manera segura y robusta.
Backend y API: La lógica del lado del servidor se maneja a través de las API Routes de Next.js, que se encargan de comunicarse de forma segura con la API de Google Classroom para obtener todos los datos necesarios.
Despliegue: La aplicación está desplegada en Vercel, lo que garantiza una integración perfecta con Next.js, despliegues continuos y un rendimiento global excelente.
Challenges we ran into
El principal desafío técnico fue, sin duda, la integración con el flujo de autenticación OAuth 2.0 de Google. Configurar correctamente las credenciales, los
scopesy, especialmente, losredirect URIspara que funcionaran tanto en mi entorno local como en producción (Vercel) fue un obstáculo significativo. Me enfrenté a los clásicos erroresredirect_uri_mismatchyaccess_denied, que requirieron una depuración meticulosa.
Otro reto fue entender y estructurar la información que devuelve la API de Google Classroom. Combinar los datos de cursos, estudiantes, tareas y entregas para calcular el progreso de cada alumno de manera eficiente fue un rompecabezas que tuve que resolver bajo la presión del tiempo.
Accomplishments that we're proud of
Estoy especialmente orgulloso de haber logrado construir una aplicación web completa y funcional, de principio a fin, en solo 24 horas. Más allá de la velocidad, me enorgullece:
- Resolver un problema real: La herramienta no es solo un ejercicio técnico, sino una solución tangible a una necesidad real planteada por Semillero Digital.
- Una interfaz limpia y funcional: A pesar del tiempo limitado, logré crear una experiencia de usuario intuitiva y agradable que presenta la información de forma clara.
- Una implementación de autenticación robusta: Superar los desafíos de OAuth 2.0 y lograr que el inicio de sesión funcione de manera segura y fluida es un gran logro para mí. ## What we learned Esta Vibeathon fue una experiencia de aprendizaje intensiva. Técnicamente, profundicé mis conocimientos sobre la integración con APIs de terceros, especialmente el complejo ecosistema de Google Cloud y OAuth 2.0. Fue mi primera vez trabajando tan de cerca con la API de Classroom y aprendí a navegar su estructura y limitaciones.
A nivel de gestión de proyectos, aprendí la importancia crítica de priorizar el MVP (Producto Mínimo Viable). En un hackathon, es fácil querer construir todo, pero enfoqué mi energía en resolver los tres problemas centrales del desafío, lo que fue clave para entregar una solución funcional.
What's next for semillerodigital
El proyecto actual es un MVP sólido, pero veo un gran potencial para evolucionar y añadir aún más valor a Semillero Digital. Mis ideas para el futuro incluyen:
- Sistema de Notificaciones: Enviar alertas automáticas a los alumnos y profesores sobre tareas próximas a vencer o entregas atrasadas.
- Módulo de Asistencia: Integrarse con Google Calendar para permitir a los profesores tomar asistencia directamente desde la aplicación.
- Vistas para Estudiantes: Crear un dashboard para que los propios alumnos puedan ver su progreso, sus tareas pendientes y su rendimiento general.
Built With
- google-classroom-api
- google-people-api
- next.js
- nextauth.js
- react
- recharts
- shadcn/ui
- tailwind-css
- vercel
Log in or sign up for Devpost to join the conversation.