← /projects

Completed

FutbolGes

Plataforma de Gestión Integral para Clubes de Fútbol

FutbolGes es una aplicación web progresiva (PWA) diseñada y desarrollada íntegramente para la gestión completa de un club de fútbol con múltiples categorías. La plataforma centraliza en una única interfaz todo lo que un cuerpo técnico necesita para el día a día: plantilla, partidos, entrenamientos, estadísticas, convocatorias y comunicación con los jugadores. Nació de una necesidad real de un club y se construyó desde cero, tomando decisiones de arquitectura, diseño de API y experiencia de usuario de forma autónoma.

AngularTypeScriptNode-REDMySQL
Captura de FutbolGes

El problema que resuelve

Los clubes de fútbol amateur y semiprofesionales gestionan su día a día con un caos de grupos de WhatsApp, hojas de cálculo y notas en papel. No existe una herramienta asequible, adaptada al fútbol base español y que cubra el ciclo completo de gestión deportiva. FutbolGes resuelve exactamente eso: una plataforma única, accesible desde cualquier dispositivo, que da a entrenadores, staff y jugadores la información que necesitan en el momento en que la necesitan.

Arquitectura del Sistema

La aplicación se apoya en tres capas bien diferenciadas:

  • Frontend: SPA en Angular 13, desplegada como PWA instalable en móvil y escritorio.
  • Backend / API: Node-RED actuando como servidor de flujos HTTP, conectado a una base de datos MySQL. Esta elección permite iterar la lógica de negocio de forma visual y extremadamente rápida sin sacrificar potencia.
  • Infraestructura: Servidor propio con HTTPS, accesible desde red local y externa mediante dominio personalizado (`api.kasio.es`).

La comunicación entre frontend y backend se realiza íntegramente mediante `HttpClient` de Angular, con un único servicio centralizado (`NoderedService`) que abstrae todos los endpoints. Esto facilita el mantenimiento y permite sustituir el backend completo sin tocar ningún componente.

Autenticación y Control de Acceso por Roles

El sistema implementa autenticación basada en tokens JWT almacenados en `localStorage`. Al iniciar sesión, el token se valida contra el backend y se recuperan los datos del usuario. La aplicación define tres roles con permisos diferenciados:

  • Admin: acceso total, incluyendo gestión de usuarios, equipos y panel de administración.
  • Staff: acceso a todas las funcionalidades operativas (convocatorias, partidos, entrenamientos).
  • Jugador: acceso de solo lectura a su información personal, carga de entrenamiento y asistencia.

Cada componente de la interfaz adapta dinámicamente los controles visibles según el rol del usuario autenticado, usando directivas `*ngIf` vinculadas al objeto de usuario en tiempo real.

Gestión de Plantilla (Roaster)

Vista tabular completa de todos los jugadores del equipo seleccionado, con:

  • Nombre completo, fecha de nacimiento y contacto.
  • Modal de detalle por jugador con estadísticas acumuladas de temporada: partidos jugados, goles, tarjetas amarillas y rojas.
  • Foto de perfil vinculada al usuario del sistema (con fallback a imagen genérica).
  • Pestaña separada para el Staff técnico: entrenadores, preparadores físicos y ayudantes, con su puesto, contacto y foto.
  • Ordenación alfabética automática de la plantilla.

Categorías / Equipos

Gestión multi-equipo dentro del mismo club. Cada usuario tiene acceso únicamente a los equipos asignados. Desde esta pantalla el usuario puede:

  • Cambiar el equipo activo, lo que actualiza reactivamente toda la aplicación mediante un `EventEmitter` global en `AuthService`.
  • Configurar los códigos de grupo y competición de la Federación Gallega de Fútbol (Futgal) para cada categoría, habilitando la sincronización automática de la clasificación oficial.

Clasificación en Tiempo Real

Integración directa con la web de la Federación Gallega de Fútbol. A partir de los códigos configurados por el administrador, el backend realiza scraping de la clasificación oficial y la sirve al frontend. La tabla muestra posición, nombre del equipo, partidos jugados, victorias, empates, derrotas, goles a favor, goles en contra y puntos. El equipo propio aparece destacado visualmente de forma automática.

Gestión de Partidos

CRUD completo de partidos con:

  • Fecha, hora, jornada, competición, campo, rival y escudo del rival.
  • Distinción automática entre local y visitante según el nombre del equipo.
  • Lugar de convocatoria y hora de presentación.
  • Integración bidireccional con el calendario: al crear o editar un partido, se crea o actualiza automáticamente el evento correspondiente en el calendario de la aplicación.
  • Historial de resultados con acceso al detalle de eventos de cada partido.

Partido en Directo — El Módulo Estrella

Este es el módulo más complejo y diferenciador de la aplicación. Permite gestionar un partido en tiempo real desde el campo, directamente desde el móvil del entrenador o delegado: Cronómetro inteligente:

  • Inicio de primera y segunda parte con timestamp Unix almacenado en base de datos.
  • Al recargar la página (o si otro usuario abre el partido), el cronómetro se sincroniza automáticamente con el tiempo real transcurrido desde el inicio guardado en servidor. No hay deriva ni desincronización entre dispositivos.
  • Pausa y reset manual para situaciones de interrupción.

Marcador interactivo:

  • Botones de gol para local y visitante, con soporte para goles en propia puerta (que suman al equipo contrario).
  • Corrección de marcador con botón de restar gol.

Registro de eventos con jugador:

  • Goles, tarjetas amarillas, tarjetas rojas, cambios (jugador que entra y jugador que sale) y lesiones con descripción.
  • Cada evento se asocia a un jugador de la convocatoria mediante selector desplegable.
  • Los eventos se muestran ordenados por minuto en tiempo real.
  • Edición y eliminación de eventos ya registrados.

Alineación titular con drag & drop:

  • Interfaz de arrastrar y soltar (Angular CDK DragDrop) para mover jugadores entre la lista de convocados y la de titulares.
  • La alineación se persiste en base de datos y se sincroniza entre dispositivos.

Resumen de cierre de acta:

  • Modal con el resumen completo del partido: resultado, goleadores con minuto, cambios, amarillas, rojas y lesiones. Listo para transcribir al acta oficial.

Finalización del partido:

  • Al finalizar, se actualizan automáticamente las estadísticas individuales de todos los jugadores convocados (minutos jugados, goles, tarjetas) en base de datos.

Convocatorias

Gestión de convocatorias para partidos próximos:

  • Selector de partido con fecha y enfrentamiento.
  • Vista de detalle del partido: competición, campo, jornada, hora, hora de convocatoria y lugar de presentación.
  • Integración con Google Maps: enlace de navegación directo al campo, con coordenadas almacenadas por estadio en base de datos.
  • Interfaz drag & drop para mover jugadores entre "disponibles" y "convocados".
  • Compartir por WhatsApp: genera automáticamente un mensaje formateado con toda la información de la convocatoria (fecha, jornada, campo, hora, listado numerado de convocados) y abre WhatsApp directamente. Detección automática de dispositivo móvil para mostrar u ocultar este botón.

Sesiones de Entrenamiento

Gestión completa del plan de entrenamientos:

  • Listado de sesiones ordenadas por fecha con contador de asistencia por sesión.
  • Vista detallada de cada sesión con acceso a la carga de trabajo registrada por cada jugador.
  • Módulo de **carga de entrenamiento** para jugadores: cada jugador puede registrar su percepción de esfuerzo (RPE) tras cada sesión de la última semana.

Control de Asistencia a Entrenamientos

Módulo de asistencia con:

  • Selector de entrenamiento (próximos para jugadores, todos para staff).
  • Lista de jugadores con toggle de asistencia y campo de motivo de ausencia.
  • Guardado individual por jugador con feedback visual inmediato.

Estadísticas de Temporada

Dashboard de rendimiento del equipo con:

  • Tabla de minutos jugados por jugador con barra de progreso proporcional al máximo del equipo.
  • Histórico de asistencia a entrenamientos por semana, cruzado con la carga de trabajo registrada.
  • Visualización de la evolución de la carga semanal del equipo.

Calendario Interactivo

Integración de FullCalendar con vista mensual en español. Muestra todos los eventos del equipo (partidos, entrenamientos, eventos varios) con:

  • Click en evento para ver detalle en modal: título, día, hora e información adicional.
  • Actualización automática al cambiar de equipo activo.

Biblioteca de Tareas de Entrenamiento

Repositorio de ejercicios y tareas de entrenamiento con:

  • Categorización multidimensional: técnico, táctico, físico y psicológico.
  • Campos de carga, repeticiones, duración y materiales necesarios.
  • Subida de imagen con validación de tipo (solo imágenes) y tamaño máximo (5MB), con barra de progreso de upload en tiempo real usando `HttpEventType`.
  • Filtros de búsqueda por título y por cada dimensión de categorización.
  • Opción de marcar tareas como públicas (compartidas entre equipos).

Gestión de Eventos del Club

CRUD de eventos genéricos del club (reuniones, actos, etc.) con:

  • Título, fecha/hora y descripción.
  • Integración automática con el calendario al crear, editar o eliminar.
  • Búsqueda y filtrado de eventos.

Perfil de Usuario

  • Visualización de datos del usuario autenticado.
  • Subida de foto de perfil con preview, validación y barra de progreso.
  • La foto se asocia al perfil del staff/jugador y aparece en la plantilla.

Panel de Administración

Acceso restringido a administradores con gestión de:

  • Usuarios: alta, baja y modificación de usuarios del sistema con asignación de rol.
  • Jugadores: CRUD completo de jugadores con todos sus datos.
  • Staff: gestión del cuerpo técnico.
  • Equipos: configuración de categorías y códigos de federación.

Impacto y métricas

  • El cronómetro del partido en directo no corre solo en el cliente. Al iniciar cada parte, se guarda el timestamp Unix en base de datos. Cualquier dispositivo que abra el partido calcula el tiempo transcurrido desde ese timestamp y arranca el intervalo desde el minuto correcto. Esto garantiza que el entrenador y el delegado vean exactamente el mismo minuto, aunque uno recargue la página.
  • La aplicación gestiona múltiples equipos. Cuando el usuario cambia de equipo activo, todos los módulos abiertos (plantilla, clasificación, partidos, etc.) se actualizan automáticamente sin recargar la página. Esto se implementa mediante un `EventEmitter` en `AuthService` al que cada componente se suscribe en `ngOnInit`, recargando sus datos al recibir la señal.
  • La clasificación oficial se obtiene mediante scraping del sitio de Futgal desde el backend Node-RED. El administrador solo necesita pegar los códigos de la URL de la competición; el sistema hace el resto. Esto elimina la necesidad de introducir manualmente los datos de clasificación.
  • La subida de imágenes (fotos de perfil y tareas de entrenamiento) usa `HttpClient` con `reportProgress: true` y `observe: 'events'`, procesando los eventos `UploadProgress` para mostrar una barra de progreso real al usuario.
  • El módulo de convocatorias genera un mensaje de texto formateado con emojis, datos del partido y listado numerado de jugadores, codificado para URL, y abre directamente la app de WhatsApp. La detección de dispositivo móvil controla la visibilidad del botón para que solo aparezca donde tiene sentido usarlo.

Galería

Galería de FutbolGes. Usa las flechas o desliza para cambiar de imagen. Pulsa Enter o haz clic para ampliar.