Completed
Arousa Fútbol 7 - Web Oficial
Plataforma web completa para la gestión y promoción del torneo de fútbol 7 más importante de España, desarrollada con Angular 20 y arquitectura SSR
Arousa Fútbol 7 (AF7) es el torneo de fútbol 7 más prestigioso de España, disputado en Ribadumia, Pontevedra, con participación de equipos tanto profesionales como aficionados. La organización necesitaba una plataforma digital que fuera mucho más que un sitio informativo: un ecosistema completo capaz de gestionar inscripciones de equipos, venta de entradas, reservas de alojamiento, resultados en tiempo real, galería multimedia, noticias y hasta juegos interactivos para la comunidad. El resultado es una Single Page Application con Server-Side Rendering que combina la fluidez de una SPA moderna con el rendimiento y la indexabilidad de un sitio renderizado en servidor. La plataforma atiende a miles de usuarios durante los periodos de inscripción y celebración del torneo, con picos de tráfico que exigen una arquitectura sólida y bien optimizada.
Arquitectura y Estructura
La aplicación está construida con Angular 20 en modo standalone (sin NgModules), lo que simplifica la estructura y mejora el tree-shaking. Toda la lógica de negocio se organiza en una capa `core` con servicios, guards, pipes e interceptores, mientras que las páginas viven en `main` como componentes lazy-loaded independientes.
El servidor Express gestiona el SSR, el sitemap dinámico, el robots.txt y la caché de assets, todo desde un único punto de entrada (`server.ts`).
Módulos y Páginas (18+ rutas lazy-loaded)
La plataforma cubre todas las necesidades del torneo en secciones bien diferenciadas: Información deportiva
- Resultados de partidos con integración en tiempo real vía API de FTF
- Clasificaciones por jornada y temporada
- Estadísticas detalladas del torneo
- Historia, reglamento y temporadas anteriores
Transacciones y participación
- Inscripción de equipos con formulario dinámico: múltiples equipos, jugadores variables por equipo, cálculo de precio en tiempo real y opción de lista de espera
- Compra de entradas con selección de cantidad y validación antifraude
- Reservas de alojamiento con selector de fechas, múltiples habitaciones, datos de huéspedes y opción de comida adicional
- Flujo de pago completo con confirmación y gestión de estados (éxito, error, pendiente)
Contenido y comunidad
- Blog de noticias con categorías, paginación y slugs SEO-friendly
- Galería multimedia organizada por evento y temporada
- Área privada para participantes con acceso diferenciado por fase (previa / final)
- Sección de colaboraciones y patrocinios
Entretenimiento
- AF7dle: juego tipo Wordle con jugadores del torneo
- AF7Quiz: quiz interactivo sobre la historia del AF7
- Flopaf7: juego tipo Flappy Bird con temática del torneo
Dashboard dinámico en Home con CTA
La página de inicio muestra un panel de estado en tiempo real que se adapta al momento del torneo: si hay preventa de entradas activa (con fecha de cierre), si las inscripciones están abiertas o si es fase final y se ofrece alojamiento, y cuál es el próximo evento confirmado. Todo esto se obtiene de Strapi y se renderiza tanto en servidor como en cliente.
SEO Técnico Avanzado
El SEO no es un añadido, es una parte central de la arquitectura:
- Metadatos dinámicos por ruta: título, descripción, Open Graph, Twitter Cards y canonical URL generados por `MetadataService` según la página activa
- Structured Data (JSON-LD) con schemas de Schema.org para `WebSite`, `SportsEvent`, `Organization`, `NewsArticle`, `ImageGallery`, `BreadcrumbList` y `FAQPage`
- Sitemap XML dinámico generado en el servidor Express, incluyendo URLs de noticias obtenidas de la API en tiempo real
- Robots.txt servido dinámicamente con reglas específicas por bot (Googlebot, Bingbot, facebookexternalhit) y exclusión de rutas privadas y de pago
- SEO Guard que aplica los metadatos correctos antes de activar cada ruta
Analytics Propio
En lugar de depender exclusivamente de herramientas de terceros, se desarrolló un sistema de analytics personalizado que captura:
- Sesiones de usuario con identificación persistente (localStorage)
- Eventos de página: tiempo en página, profundidad de scroll, secuencia de navegación
- Interacciones: clicks, envíos de formulario, focus/blur
- Conversiones: reservas, entradas, inscripciones, acreditaciones
- Métricas técnicas: Core Web Vitals, tiempos de carga de API, uso de memoria
- Fuentes de tráfico: UTM params, referrer, clasificación orgánico/pagado/directo/social
- Retención: primera visita, días desde primera visita, usuarios nuevos vs recurrentes
- Detección de bots para excluir tráfico no humano
Todo esto se envía a un endpoint propio mediante un interceptor HTTP que actúa de forma transparente sobre todas las peticiones de la aplicación.
Seguridad
- Cloudflare Turnstile (CAPTCHA) en todos los formularios de pago para prevenir bots y abuso
- Encriptación con crypto-js para datos sensibles en cliente
- Sanitización de URLs con `DomSanitizer` de Angular para embeds de YouTube
- Variables de entorno separadas por ambiente (development / production)
- Rutas de pago y área privada excluidas del sitemap y del crawling
Internacionalización
La plataforma soporta español e inglés con detección automática del idioma del navegador. Las traducciones se cargan de forma lazy desde archivos JSON (`/i18n/`) mediante `ngx-translate`. El locale de Angular (formatos de fecha, número) se sincroniza con el idioma activo. En SSR, el servidor respeta el header `Accept-Language` para servir el idioma correcto desde el primer render.
Impacto y métricas
- La combinación de SSR, lazy loading en todas las rutas y caché agresiva de assets (1 año para estáticos) se traduce en métricas de Core Web Vitals sólidas. El First Contentful Paint se beneficia directamente del renderizado en servidor, que entrega HTML completo al navegador sin esperar a la hidratación del cliente. El budget de build está configurado con límites estrictos (2 MB de warning, 4 MB de error) para mantener el tamaño del bundle bajo control.
- La implementación completa de SEO técnico —metadatos dinámicos, structured data con múltiples schemas, sitemap dinámico con URLs de noticias y robots.txt configurado— posiciona la plataforma correctamente para los motores de búsqueda. El SSR garantiza que los crawlers reciban contenido renderizado, no una página en blanco esperando JavaScript.
Galería
Galería de Arousa Fútbol 7 - Web Oficial. Usa las flechas o desliza para cambiar de imagen. Pulsa Enter o haz clic para ampliar.