TBGTHEBULLGROOVE
Caso de Estudio · Web Pública · 2026
para Superliga Hockey

Web Pública

para el cliente
Superliga Hockey
Año
2026
Tipo
Sitio público SSR
Deploy
VPS · Easypanel
Estado
Caso de estudio
Next.js 14TypeScript StrictTailwindApp RouterMobile-firstSupabase SSRRealtime

01 · El proyecto

La cara pública del torneo

La web pública es el primer punto de contacto del torneo con el mundo: el lugar al que llegan jugadoras nuevas, periodistas, sponsors potenciales y aficionadas. Sin login, sin fricciones, todo accesible y todo en tiempo real.

La web comparte la misma base de datos que la app y el panel admin: cualquier cambio cargado por la delegada se ve reflejado al instante en la web pública. Esto se logra con suscripciones directas a Supabase Realtime, sin polling y sin endpoints intermedios. Server-side rendering en Next.js 14 garantiza SEO óptimo y carga inicial veloz.

"Estadísticas, fixture y posiciones del torneo en tiempo real, accesibles desde cualquier dispositivo y sin necesidad de instalar nada."
8
páginas públicas
100%
TypeScript strict
Realtime
sin polling
Mobile-first
SSR

02 · Arquitectura

Cómo está construida

Frontend
Next.js 14 App Router
  • Next.js 14 App Router
  • React 19
  • TypeScript estricto
  • Tailwind CSS
  • Framer Motion
Datos
Supabase SSR
  • Supabase SSR con createServerClient
  • Solo lectura pública — sin auth
  • RLS filtra automáticamente lo que se puede leer
  • Realtime client side para fixture en vivo
Infraestructura
VPS Hostinger
  • Easypanel en VPS Hostinger
  • Mismo Supabase que la PWA
  • Proyecto Next.js independiente
  • HTTPS automático

03 · Páginas públicas

Ocho páginas, una sola experiencia

Cada ruta resuelta con SSR para SEO y carga inicial óptima.

Inicio
Landing · Resultados

Landing del torneo con últimos resultados y próximos partidos. Hero visual con identidad de marca.

  • Hero del torneo
  • Últimos resultados
  • Próximos partidos
  • Logo del cliente y paleta de marca
Cronograma
Fixture · Realtime

Fixture completo con filtros, badges en vivo y marcador en tiempo real.

  • Fixture completo
  • Filtros por categoría y fecha
  • Realtime: badge EN VIVO pulsante
  • Marcador actualizado al instante
Posiciones
Tabla · SSR

Tabla de posiciones por categoría sincronizada con la app y el panel admin.

  • Tabla por categoría
  • Datos sincronizados con la app
  • Render SSR para SEO
Estadísticas
Goleadoras · Eventos

Goleadoras, tarjetas y partidos jugados calculados desde match_events.

  • Goleadoras leídas desde match_events
  • Tarjetas amarillas y rojas
  • Partidos jugados por jugadora
Jugadoras
Directorio · Perfiles

Directorio completo con buscador y página de perfil pública por jugadora.

  • Directorio completo
  • Buscador
  • Página de perfil pública por jugadora
Equipos
Grilla · Plantel

Grilla por categoría con página de equipo individual y plantel detallado.

  • Grilla por categoría
  • Página de equipo individual
  • Plantel y stats del equipo
Inscripciones
Formulario · Validación

Formulario público con validación estricta y categorías cargadas dinámicamente.

  • Formulario público
  • Validación de DNI numérico 7-8 dígitos
  • Email validado
  • Categorías cargadas dinámicamente desde Supabase
Galería
Slideshow · Drive

Hero slideshow y página de galería con filtro por fecha y álbumes vinculados a Drive.

  • Hero slideshow
  • Filtro por fecha
  • Álbumes vinculados a Google Drive

04 · Realtime sobre Supabase

Datos en vivo sin polling

El fixture y los partidos en vivo no usan polling: la web se suscribe directamente a los canales de Supabase Realtime. Cuando una veedora carga un gol desde la app durante un partido, el marcador en la web pública se actualiza en menos de un segundo, sin recargar la página.

Hook custom useRealtimeMatches

Suscripción al canal de matches con cleanup automático en unmount.

Hook custom useRealtimeEvents

Eventos de partido (goles, tarjetas) actualizados al instante.

Server-side rendering

Carga inicial renderizada en servidor para SEO y performance.

Sin polling

Cero peticiones repetidas. La conexión queda abierta y reacciona a cambios.


05 · SEO y rendimiento

Performance y posicionamiento

SSR Next.js 14

Render server-side por defecto. Crawlers acceden a HTML completo desde el primer byte.

Metadata por página

Title, description y Open Graph configurados en cada ruta. Compartido optimizado en redes.

Mobile-first responsive

Diseño base mobile, escalado progresivo a desktop con sm: md: lg: de Tailwind.

next/image

Imágenes optimizadas, lazy loading y formatos modernos por defecto.


06 · Cliente y desarrollador

Información del cliente

Empresa
Superliga Hockey
Torneo de hockey amateur femenino · Córdoba, Argentina
  • Presencia digital pública del torneo
  • Vidriera para sponsors y aficionadas
  • Datos en tiempo real
Desarrollado por
THEBULLGROOVE — Juan Martinez
Agencia de tecnología · thebullgroove.com
  • Diseño y desarrollo full-stack
  • SSR y SEO
  • Realtime sobre Supabase
  • Mantenimiento continuo
thebullgroove.com →LinkedIn →