28 de mayo de 2026

Dashboard de ingeniería en vivo

Activo

Un dashboard público que se actualiza solo y agrega actividad de GitHub, un heatmap de contribuciones y métricas del sitio en un data product.

La idea

En vez de afirmar actividad en un CV, mostrarla en vivo. Este dashboard agrega señales públicas de ingeniería — stars, seguidores y repositorios de GitHub, un heatmap de contribuciones, el mix de lenguajes — junto al propio contador de vistas del sitio, y se actualiza sin cambios manuales.

Cómo funciona

Es un React Server Component que consulta varias fuentes en paralelo y renderiza el resultado en el servidor:

  • GitHub — la REST API pública (/users/{user} y /users/{user}/repos) para stars, seguidores, repositorios y el mix de lenguajes.
  • Heatmap de contribuciones — un calendario día a día agrupado en columnas por semana y dibujado como un grid de puro CSS.
  • Vistas del sitio — un count(*) sobre la tabla views de Postgres, la misma que alimenta el contador del footer.
  • Contenido y dataset — recuento de palabras y tamaño del dataset calculados en build time.

Cada fetch tiene timeout y falla en suave: si una fuente no está disponible, su sección simplemente se oculta en vez de romper la página o mostrar ceros falsos. Los resultados se cachean y revalidan cada hora con ISR de Next.js, así la página se mantiene rápida y a la vez fresca.

Trade-offs

  • Fetch en vivo vs. snapshot commiteado. Hacer fetch en request time (con ISR) mantiene los números actuales sin un cron que commitee datos al repo.
  • Graceful degradation sobre garantías. Las APIs de terceros se caen; ocultar una sección es mejor que renderizar un dashboard roto.

Abrir el dashboard en vivo →

Discusión

¿Te resultó útil este post?

Inicia sesión para dar like y comentar.

Tu nombre y avatar del proveedor elegido se guardan en la base de datos propia del sitio para mostrar tu actividad.