Sports DB: Diseño e implementación de una aplicación web y móvil para seguimiento de resultados de fútbol

Abstract

SportsDB es una plataforma web y móvil para el seguimiento de resultados de fútbol, desarrollada con Angular 17 en el frontend y Django 5.2 en el backend. La arquitectura sigue el patrón BFF (Backend For Frontend): el cliente Angular nunca llama directamente a las APIs externas, sino que todas las peticiones pasan por el servidor Django, que actúa como intermediario, oculta las credenciales y normaliza los datos antes de devolverlos al cliente. Los datos deportivos se obtienen en tiempo real desde LiveScore API, proveedor de pago que suministra clasificaciones, resultados, partidos, estadísticas, alineaciones, plantillas, goleadores e historial de enfrentamientos de las principales ligas europeas. La información editorial de equipos y jugadores se enriquece con la Wikipedia REST API, extrayendo extractos, imágenes e infoboxes mediante scraping de wikitext. Los datos propios del sistema —usuarios, favoritos, noticias y minijuego— se persisten en una base de datos MySQL gestionada con el ORM de Django. La aplicación ofrece clasificaciones con soporte para fases de grupos y eliminatorias, resultados por jornada con selector de temporadas históricas, partidos en directo con marcador en tiempo real, bracket visual de competiciones eliminatorias, fichas completas de equipo con palmarés extraído de Wikipedia, modal de jugadores con datos biográficos, y una sección de favoritos enriquecida que muestra el último resultado y el próximo partido de cada equipo guardado. Complementan la aplicación una sección de noticias administrable desde el panel de Django y un minijuego de trivia diario configurable por el administrador. El frontend está construido con componentes standalone de Angular 17, RxJS para la gestión de la asincronía, Bootstrap 5 para el diseño responsive y Angular Material para los componentes de interacción. La gestión del estado global se implementa mediante cuatro servicios singleton en la carpeta core/ sin dependencias externas como NgRx. La aplicación incorpora Server-Side Rendering con Angular SSR para mejorar el tiempo de carga inicial. Mediante Capacitor 7.4, el mismo código Angular se compila como APK instalable en dispositivos Android, conectándose al mismo backend Django por red local. El proyecto incluye 28 requisitos funcionales, 5 requisitos no funcionales, diagramas de casos de uso, modelo entidad-relación, diagramas de componentes Angular, diagramas de secuencia, mockups de las interfaces principales y un manual de usuario completo como Anexo.