El fin de semana pasado participé en la Vibeathon de Nerdearla y, para mi increíble sorpresa, ¡gané el tercer premio! El premio era un MacBook Air, pero la verdadera recompensa fue la experiencia de construir y desplegar una aplicación completa y con propósito en solo 24 horas.
Construí AulaLens, una aplicación web que añade una capa de inteligencia y visualización a Google Classroom para ayudar a ONGs educativas.
En este artículo, les contaré toda la historia: la idea, las decisiones técnicas, los bugs que casi me cuestan la entrega y todo lo que aprendí en esta maratón de desarrollo.
💡 La Chispa: Resolviendo un Problema Real
Toda hackathon necesita una buena idea, y la mía vino directamente del brief: ayudar a Semillero Digital, una ONG que capacita a jóvenes en situación de vulnerabilidad. Usaban Google Classroom, pero se enfrentaban a tres grandes dolores:
- Seguimiento nulo: No tenían una forma centralizada de ver el progreso de los alumnos.
- Comunicación perdida: Los avisos importantes se perdían.
- Métricas manuales: Extraer datos era un trabajo tedioso y lento.
En ese momento supe que mi proyecto no sería solo un ejercicio técnico. Tenía que construir una herramienta que resolviera un problema real y tangible para una organización con una misión social increíble. La meta estaba clara: crear una "lente de claridad" para sus datos.
🧱 El Plan: Arquitectura y Decisiones Tecnológicas
Con solo 24 horas, la elección del stack tecnológico es una decisión de vida o muerte. Mi filosofía fue simple: velocidad y seguridad.
¿Por qué Nuxt.js 3?
Elegí Nuxt 3 por su increíble experiencia de desarrollo, pero sobre todo por una característica clave: las rutas de servidor (/server/api). Esto me permitió crear un "backend" dentro del mismo proyecto de frontend. Fue mi solución para manejar la autenticación y las llamadas a la API de Google de forma segura, sin la necesidad de gestionar un servidor aparte. Para una hackathon, esto es oro puro.
¿Por qué Nuxt UI?
No había tiempo para escribir CSS. Nuxt UI, construido sobre Tailwind CSS, me dio una colección de componentes preciosos y listos para usar. En cuestión de horas, tenía un dashboard de aspecto profesional, lo que me permitió centrarme en la lógica y no en los estilos.
La Clave de la Seguridad: Nuxt Auth
El mayor riesgo técnico era, sin duda, el flujo de autenticación OAuth 2.0 con Google. Implementar esto desde cero es complejo y propenso a errores de seguridad. La librería @sidebase/nuxt-auth fue mi salvavidas. Con unas pocas líneas de configuración, gestionó todo el flujo de tokens de forma segura, manteniendo mi client_secret a salvo en el servidor.
🚀 La Construcción: Una Maratón de 24 Horas
Las primeras horas: La mayor parte del tiempo se fue en la configuración de Google Cloud Console. Es un laberinto de menús, pero una vez que obtuve las credenciales y probé la conexión con Postman (un paso de preparación que recomiendo al 100%), todo empezó a fluir. Lograr el primer inicio de sesión exitoso fue un gran alivio.
La noche: Esta fue la fase de "flow". Con la autenticación resuelta, me dediqué a construir los componentes de Vue uno tras otro: tarjetas de estudiante, listas de cursos, barras de progreso... Viendo cómo el dashboard cobraba vida con datos reales de la API fue increíblemente motivador.
La recta final: Las últimas horas fueron una carrera contrarreloj para implementar la funcionalidad "wow" (un "Health Score" para identificar alumnos en riesgo) y preparar los entregables: el README, la descripción del proyecto y el temido video demo.
🐛 El Muro: Bugs, Errores y Despliegues Rotos
Ninguna historia de hackathon está completa sin hablar de los errores. Y yo tuve dos que casi me dejan fuera.
El Error de Tailwind: Can't resolve 'tailwindcss'
A mitad del desarrollo, Vercel empezó a fallar en el despliegue con este error. Pánico. Después de leer el log con detenimiento, me di cuenta de que, aunque Nuxt UI gestiona Tailwind, el paquete no estaba listado explícitamente como una dependencia de desarrollo. Una simple línea en la terminal lo solucionó:
pnpm add -D tailwindcss
Una lección clásica: a veces, el error más aterrador tiene la solución más simple.
El Terror de las 5:13 PM: 500 FUNCTION_INVOCATION_FAILED
Con el proyecto ya entregado en Devpost y 13 minutos después de la hora límite, la URL de Vercel se rompió mostrando un error 500. El corazón se me paró. El build había funcionado, pero la app crasheaba al ejecutarse.
Corrí a los logs de Vercel y ahí estaba: un error TypeError que apuntaba a un valor undefined.
El culpable: había un typo en el nombre de una de mis variables de entorno en Vercel.
Corregí la NUXT_AUTH_SECRET, redesplegué y... ¡luz verde! La app volvió a la vida.
✨ El Logro: De qué estoy más orgullosa
- Haber construido una app full-stack segura en 24h: No solo un frontend, sino una aplicación completa con su propia lógica de backend.
- El "Health Score": No me conformé con solo mostrar datos. Creé una métrica simple pero potente que puede tener un impacto real en la labor de la ONG.
- La calma bajo presión: Haber solucionado dos errores críticos con el reloj en mi contra fue una prueba de fuego.
📚 Mis Grandes Aprendizajes
- La preparación lo es todo: Probar la conexión a la API con Postman antes de empezar me ahorró horas de frustración.
- La regla 90/10 de los bugs: El 90% de las veces, el problema es algo "tonto" como una variable de entorno o un typo. Aprender a buscar sistemáticamente esos errores es clave.
- La mejor motivación es un problema real: Conectar con la misión de Semillero Digital hizo que las horas de frustración valieran la pena y le dio un propósito al proyecto más allá del premio.
🔮 ¿Y ahora qué? El futuro de AulaLens
Gané un premio, pero el viaje de AulaLens no ha terminado. Ya he creado una rama develop para seguir mejorándolo. Los próximos pasos son obtener feedback real de Semillero Digital, añadir notificaciones inteligentes y mantenerlo como un proyecto de código abierto.
¡Gracias por leer hasta aquí! Si te ha gustado la historia o tienes alguna pregunta, déjame un comentario.
Puedes encontrar todo el código del proyecto en mi GitHub
O probarlo directamente en la web
Top comments (0)