Lo que aprendí en mi primera hackatón
Hace unos días participé en la hackatón de Clerk.com, organizada por el gran Midudev.
Apenas vi el anuncio del evento, supe que tenía que estar ahí. Ajusté tiempos, cancelé algunas cosas y me lancé con todo.
🦾 ¿Por qué me animé?
Tenía tiempo con una idea en la cabeza: cleanbody.dev, una web pensada para fomentar el autocuidado y el bienestar en los programadores que trabajan muchas horas sentados.
Esta hackatón fue la excusa perfecta para empezar a construirla. No iba con expectativas de ganar, sino con la intención de:
✅ Empezar ese proyecto personal que tenía en pausa.
✅ Probar un stack nuevo: Clerk, Next.js y Supabase.
✅ Vivir mi primera hackatón.
Y lo logré.
No estaba ni cerca de los finalistas (¡los ganadores la rompieron!), pero me sentí muy feliz cuando mencionaron mi proyecto en el directo.
En ese momento, dejé de trabajar y me quedé viendo la transmisión hasta las votaciones finales.
🦇 Modo batman activado
No recordaba la sensación de programar hasta la madrugada con esa energía adolescente que da el entusiasmo puro.
No lo recomiendo como estilo de vida, pero de vez en cuando entrar en ese estado de flow nocturno es simplemente mágico.
Estar en “modo batman” es un jerga de programación, si recién la escuchas, anotala, es una forma bonita de resaltar el trabajo que se hace en las sombras y suele pasar desapercibido, pero es esencial.
🏆 Estos fueron los proyectos ganadores
🥇 Key Leap
—> Juego interactivo de caza del tesoro y escalada de privilegios.
—> Una PWA que ayuda a gestionar finanzas personales.
—> Una web para crear, compartir y descubrir snippets de código.
🏅 Atomox
—> Una web para compartir y explorar web components.
—> Una web donde dejar un pixel es conectar y crear.
🛠 Tecnologías utilizadas y lo que aprendí
Clerk
Nunca había trabajado con Clerk y me sorprendió lo simple que fue integrarlo para modo desarrollo. Aprendí a:
- Gestionar registro e inicio de sesión con facilidad.
- Proteger rutas privadas en Next.js.
- Obtener el userId para asociar datos en Supabase.
- Mostrar y editar el perfil del usuario desde su dashboard.
Supabase
Una base de datos en la nube con mucha flexibilidad.
Pude probar la experiencia que ofrece su gestión de base de datos y su storage para guardar las imágenes de los retos, y es bastante amigable y fácil de entender.
Next.js
Volver a trabajar con Next me recordó lo poderoso que es.
Todavía estoy lejos de dominar este framework, pero si sabes React.js y entiendes cuándo ejecutar algo en el servidor o en el cliente, empezar a sacarle provecho es bastante sencillo.
TailwindCSS
Ya lo había usado pero muy poco, en esta ocasión sí lo aproveché completamente.
Intenté hacerlo todo con sus clases, aunque a veces me daban ganas de usar CSS puro (porque, por práctica, lo siento más natural)
Al final es mucho más agil una vez te acostumbras.
Manejo de fechas UTC
Tuve un inconveniente con la gestión de fechas entre cliente y servidor. ¡Un clásico cuando se empieza a trabajar con zonas horarias!
En este caso guardaba en UTC las fechas de los retos del día en Supabase.
En la página principal de cleanbody.dev validaba en el servidor los retos del día que se tenían que mostrar en la parte superior, pero como se usaba la fecha del servidor (en UTC), no coincidía con el dashboard del usuario, donde la validación se hacía en el cliente con su zona horaria local.
La solución fue sencilla y rápida.
En la página principal muestro dos retos sin validar la fecha (los llamé “retos de temporada”), y al final, cargo los retos del día desde el cliente. Aparece un loading al bajar, pero casi siempre ya están listos cuando llegas.
En resumen, todo lo relacionado a validar sobre la zona horaria lo manejo en cliente.
✅ ¿Conclusión?
Me quedo con una experiencia valiosa, muchas ganas de seguir desarrollando cleanbody.dev y algo muy claro: quiero participar en más hackatones.
Si estás leyendo esto y nunca has participado en una, te animo a hacerlo. No se trata solo de competir, sino de crear, experimentar y conectar con una comunidad que ama el código tanto como tú.
Cuida tu framework más importante: tú mismo. 🚀