Cómo desarrollé una herramienta web con Vue.js para organizar torneos de Dota 2

En este artículo te cuento cómo desarrollé una herramienta web para gestionar torneos de Dota 2, usando VueJS/NuxtJS, desde la inscripción de jugadores hasta la generación automática de equipos balanceados finalizando con la imagen descargable.

🏆 El reto: Automatizar la organización de torneos Dota 2

Un cliente necesitaba una plataforma sencilla para gestionar torneos de Dota 2, permitiendo:

• ✅ Registro de jugadores (10 participantes) con su nickname y MMR (nivel de habilidad).
  
• ✅ Configuración automática de medallas (hay 37 tipos ordenados por MMR).
  
• ✅ Agrupación equilibrada de equipos en Radiant y Dire.
  
• ✅ Generación de una imagen final con los equipos listos para jugar.

Para lograr esto, desarrollé una herramienta web accesible desde desktop y mobile, enfocada en velocidad y usabilidad.

🛠️ Stack Tecnológico

• Frontend
  • ✅ Nuxt.js (Vue 3) → Framework Vue para SSR y SPA.
    
  • ✅ TailwindCSS → Diseño rápido y responsivo.
    
  • ✅ Flowbite → Componentes predefinidos para TailwindCSS (Modal).
    
  • ✅ Pinia → Manejo de estado global para jugadores y medallas.
    
  • ✅ html2canvas → Captura de pantalla en imagen descargable.
• DevOps & Deploy
  • ✅ Docker + Docker Compose → Contenerización del proyecto.
    
  • ✅ GitHub Actions + GitHub Pages → CI/CD para hosting gratuito.

Hitos o tareas importantes:

1. UI/UX con IA (Bolt.new) bolt.new
   Para optimizar la interfaz, utilicé Bolt.new, una herramienta de IA que ayuda a diseñar layouts eficientes en pocos minutos.

📌 Resultado: Un diseño intuitivo y minimalista adaptado a mobile y desktop.

2. Configuración de medallas por MMR
   El sistema asigna automáticamente la medalla correspondiente a cada jugador según su MMR.
   • Aqui se uso Pinia para controlar la variable reactiva global medals o medallas

3. Gestionar de Jugadores
   Se diseñó un formulario donde los participantes ingresan su nickname y MMR.

4. Agrupamiento (Radiant vs Dire)
   El sistema calcula la distribución más equilibrada de los equipos, asegurando la mínima diferencia de MMR entre Radiant y Dire. 📌 Algoritmo de balanceo: Implementado con JavaScript puro

5. Medallas personalizadas con Canvas
   Cada jugador recibe una medalla personalizada, combinando la imagen oficial de Dota 2 con su número de medalla.

6. Generación de imagen final del torneo
   📌 Uso de html2canvas → Convierte el HTML final en una imagen descargable (captura.png).

📢 Conclusión

Este proyecto fue una excelente oportunidad para aplicar:

• ✅ Pinia en un flujo real de datos reactivos.
  
• ✅ Canvas API para personalización de imágenes.
  
• ✅ html2canvas para generar imágenes desde HTML.
  
• ✅ Automatización con Docker + GitHub Actions.

💬 ¿Te gustaría crear tu propia herramienta? Comenta o mándame un mensaje 🚀