Volver
Año
2026
Tecnologías
Next.js, TypeScript, Tailwind CSS, GitHub API (GraphQL & REST), Satori
Descripción
El problema. Un perfil de GitHub o un repositorio no transmiten el verdadero valor de sus contribuyentes más allá de un simple gráfico de contribuciones. El desafío fue transformar métricas de código en una experiencia visual gamificada inspirada en las analíticas deportivas, creando "trading cards" de desarrolladores y alineaciones tácticas de repositorios que se pudieran exportar en tiempo real.
Decisiones y por qué. El sistema no utiliza ninguna base de datos propia; GitHub es la única fuente de verdad. Para evitar agotar los límites de la API, implementamos múltiples capas de caché utilizando Next.js (
Una decisión de la que estoy orgulloso. El motor de exportación de imágenes y su forma de eludir las restricciones de renderizado de GitHub. Para los formatos PNG, utilizamos Satori (
Resultados. Una plataforma serverless capaz de calcular un valor de mercado justificado basándose en commits, estrellas, seguidores y PRs. Cuenta con un motor de renderizado de formaciones tácticas (como 4-3-3 o 4-4-2), soporte interactivo para arrastrar y personalizar posiciones en la cancha, y un sistema de exportación dinámica con 4 formatos disponibles (README, Social, Full squad y SVG).
Decisiones y por qué. El sistema no utiliza ninguna base de datos propia; GitHub es la única fuente de verdad. Para evitar agotar los límites de la API, implementamos múltiples capas de caché utilizando Next.js (
unstable_cache y Data Cache) con distintos tiempos de vida. Para los perfiles de usuario, consumimos la API GraphQL de GitHub dividiendo las peticiones en bloques anuales para obtener el historial completo. Para los repositorios ("Repo Squad"), la arquitectura separa la lógica pesada de la ligera: la valoración financiera de los hasta 30 contribuidores principales (Tier 1) se calcula de forma optimizada y se almacena en caché, mientras que el renderizado posicional de la formación se ejecuta sin caché en cada petición. Una decisión de la que estoy orgulloso. El motor de exportación de imágenes y su forma de eludir las restricciones de renderizado de GitHub. Para los formatos PNG, utilizamos Satori (
next/og). Sin embargo, para los SVGs que se incrustan en los READMEs, implementamos un renderizador que construye el XML a mano, sin React ni Satori, ya que es la única manera de asegurar que las animaciones CSS (@keyframes) sobrevivan al proxy de seguridad "camo" de GitHub. Además, diseñamos un límite de concurrencia global (githubGate) por el que pasa todo el tráfico de red de la aplicación para evitar activar los bloqueos por abuso (límites secundarios) de la API de GitHub. Resultados. Una plataforma serverless capaz de calcular un valor de mercado justificado basándose en commits, estrellas, seguidores y PRs. Cuenta con un motor de renderizado de formaciones tácticas (como 4-3-3 o 4-4-2), soporte interactivo para arrastrar y personalizar posiciones en la cancha, y un sistema de exportación dinámica con 4 formatos disponibles (README, Social, Full squad y SVG).