RiftMetrics

Un dashboard inteligente para League of Legends que transforma tu historial en insights claros, gráficos avanzados y análisis por partida en tiempo real. Todo tu rendimiento visualizado como nunca.

Comment

Inspiration

Desde muy pequeño he sido un apasionado de los videojuegos. Siempre me fascinó cómo un mundo entero podía tomar vida dentro de una pantalla y cómo cada detalle, cada mecánica y cada decisión del jugador impactaba la experiencia completa. Con el tiempo, descubrí que esa misma curiosidad por entender los juegos por dentro se alineaba perfectamente con otra pasión que estaba naciendo en mí: la programación.

Hoy los datos son el futuro. Están por todas partes y, cuando se entienden bien, pueden ayudarnos a descubrir patrones, mejorar habilidades y tomar decisiones más inteligentes. Así nació la idea de RiftMetrics: unir mi amor por los videojuegos con mi interés creciente por el análisis de datos, para crear una herramienta clara y poderosa que ayude a otros jugadores a entender su propio rendimiento.

What it does

RiftMetrics toma la información cruda del jugador desde la Riot API y la transforma en un dashboard visual, intuitivo y moderno. Muestra todo lo que un jugador quiere saber:

  • Sus mejores campeones por maestría
  • Métricas clave como winrate, KDA, CS promedio y daño promedio
  • Un historial de partidas con detalles claros y visualmente organizados
  • Un pop-up interactivo para cada partida con:
    • Runas
    • Items
    • Oro por minuto
    • XP por minuto
    • Daño por equipo
    • Gráficos avanzados
    • Todos los participantes y sus estadísticas

En pocas palabras: convierte datos complejos en algo entendible, útil y bonito.

How we built it

El proyecto se construyó combinando un backend robusto y un frontend visualmente atractivo.

Backend

  • Node.js + Express
  • Integración con la Riot API (account, match, mastery, timeline)
  • Sistema de caché para Data Dragon (campeones, ítems, runas)
  • Normalización y agregación de datos para métricas avanzadas

Frontend

  • HTML + CSS con un diseño oscuro y elegante
  • Chart.js para estadísticas visuales
  • Un modal interactivo con scroll independiente
  • Grid systems optimizados para presentar equipos, estadísticas y builds
  • Render dinámico de íconos, runas, items e imágenes de campeones

Cada parte fue pensada para que el usuario obtenga una experiencia fluida, rápida y clara.

Challenges we ran into

Como cualquier proyecto que lidia con APIs grandes, aparecieron obstáculos:

  • Manejo de CORS y bloqueos al intentar cargar imágenes desde Data Dragon
  • Diferencias entre IDs, keys y nombres de campeones
  • Estructuras profundas y cambiantes del timeline
  • Sincronizar datos de partida y metadatos del jugador
  • Mantener el modal fijo en pantalla sin romper el scroll general
  • Renderizar grandes cantidades de información sin romper la estética
  • Ajustar tamaños, posiciones e imágenes para que el layout no se deformara

Cada reto nos obligó a mejorar el diseño, la arquitectura y las buenas prácticas del proyecto.

Accomplishments that we're proud of

  • Un dashboard completo que se siente profesional y fluido
  • Integración sólida con múltiples endpoints de Riot
  • Visualizaciones que realmente ayudan a entender el rendimiento
  • Un pop-up de partida superdetallado y estéticamente uniforme
  • Una interfaz moderna que no se siente sobrecargada
  • Un sistema que puede expandirse fácilmente a más estadísticas

Pero quizá lo más importante: logramos transformar la pasión por los videojuegos y los datos en un producto útil y real.

What we learned

Este proyecto reforzó varios aprendizajes clave:

  • La importancia de estructurar bien la data antes de mostrarla
  • Cómo funcionan los distintos endpoints de Riot y sus limitaciones
  • Técnicas para manejar timelines, métricas acumuladas y promedios
  • Cómo crear interfaces intuitivas que no sacrifiquen detalles
  • La delicadeza de unir datos en tiempo real con elementos visuales
  • Buenas prácticas de caching, optimización y escalabilidad
  • Matemáticas básicas detrás de métricas como el KDA:
    [ KDA = \frac{\text{Kills} + \text{Assists}}{\max(1, \text{Deaths})} ]

Sobre todo, aprendí lo emocionante que puede ser convertir datos en conocimiento real.

What's next for RiftMetrics

RiftMetrics apenas está comenzando. Algunas ideas para el futuro:

  • Dashboards personalizados por campeón
  • Recomendaciones basadas en patrones del jugador
  • Insights predictivos usando machine learning ligero
  • Un sistema de "áreas de mejora" basado en comportamiento en partida
  • Comparación con otros jugadores o promedios globales
  • Un modo “live” para analizar rendimiento en sesiones largas

El objetivo final es convertir RiftMetrics en la herramienta definitiva para cualquier jugador que quiera mejorar y entender su propio estilo dentro de la Grieta.

Built With

Share this project:

Updates