Superliga Hockey es un torneo amateur femenino con base en Córdoba, Argentina. Llegaron con una consigna clara: superar a Fansbury, el referente actual del rubro en Argentina, tanto en diseño como en funcionalidad. La plataforma tenía que servir a perfiles con necesidades muy distintas —jugadoras, veedoras, administradoras y público general— sin convertirse en sistemas separados.
La decisión técnica fue construir una única PWA multi-rol: un solo repositorio, un solo deploy, instalable en iOS y Android sin pasar por las app stores. Cada usuaria entra al mismo dominio y la app le muestra exactamente lo que su rol le permite ver y operar — ni más, ni menos.
"Jugadora y veedora en la misma app. Cero descargas desde la store."
2
roles dentro de la app
Solo
usuarias logueadas
100%
TypeScript strict
iOS+Android
PWA instalable
02 · Arquitectura
Cómo está construida
Frontend
Next.js 14 App Router
→Next.js 14 App Router
→React 19
→TypeScript estricto
→Tailwind CSS
→Service Worker custom
→Manifest PWA
Backend / Datos
Supabase
→Supabase Auth con Google OAuth
→PostgreSQL con RLS en todas las tablas
→Supabase Storage con bucket privado de avatars
→Supabase Realtime
→Web Push con VAPID
Infraestructura
VPS Hostinger
→VPS Hostinger
→Easypanel deploy
→HTTPS automático
→PWA instalable iOS y Android
03 · Roles y permisos
Dos roles dentro de la app
La PWA es de acceso exclusivo para usuarias logueadas. Concentra los dos perfiles que necesitan estar donde ocurre la acción: la jugadora, que sigue su torneo y mantiene su perfil; y la veedora, que carga los eventos del partido en tiempo real desde la cancha. El contenido público del torneo (fixture, posiciones, planteles, estadísticas) vive en la web pública —un sitio separado, sin login— para que cualquier persona pueda consultar el torneo sin instalar nada.
Jugadora
Login con Google, perfil personal con foto y stats, y acceso completo al torneo en vivo.
→Login Google OAuth + email/password
→Onboarding 3 pasos: Categoría → Equipo → Perfil
→Stats personales: PJ, Goles, Amarillas, Rojas
→QR personal en modal fullscreen
Veedora
Carga eventos en vivo durante el partido. Solo accede a los partidos que le fueron asignados desde el panel admin.
→Solo ve partidos asignados a su usuario
→Botón Iniciar deshabilitado hasta la hora del match
→Auto-refresh cada 30 segundos
→Carga de eventos: goles, tarjetas, suspensiones
→Notificación push automática al finalizar
¿Acceso sin login?
El contenido público vive en la web oficial del torneo, un proyecto separado con SSR sobre el mismo backend de Supabase.
Listado del torneo con filtros y estados visuales en tiempo real, accesible desde cualquier dispositivo.
→Filtro por categoría con dropdown
→Badges animados EN VIVO / FINAL / PRÓXIMO
→Cards con fecha dd/mm · HH:mm y cancha en cyan
→Realtime sobre Supabase sin polling
Posiciones
Tabla · Por categoría
Tabla de posiciones por categoría con recálculo automático al cargar resultados.
→Tabla completa por categoría
→Recálculo automático
→Sincronización con web pública
Planteles
Equipos · Jugadoras
Equipos agrupados por categoría con acceso al perfil de cada jugadora.
→Equipos agrupados por categoría
→Foto y nombre por jugadora
→Acceso al perfil con un tap
Estadísticas
Goleadoras · Tarjetas · Suspendidas
Tabs de goleadoras, tarjetas y suspendidas calculadas desde match_events.
→Tabs: Goleadoras / Tarjetas / Suspendidas
→Datos calculados desde match_events
→Top goleadoras clickeables al perfil
Perfil de jugadora
OAuth · Onboarding · QR
Login Google OAuth + email/password. Onboarding de 3 pasos y conversión automática de fotos a WEBP.
→Login Google OAuth + email/password
→Onboarding 3 pasos: Categoría → Equipo → Perfil
→Foto obligatoria con conversión JPG/PNG/HEIC → WEBP
→Card con stats: PJ, Goles, Amarillas, Rojas
→QR personal en modal fullscreen
Panel veedor
Eventos en vivo · Push
Solo ve los partidos que le fueron asignados. Auto-refresh cada 30 segundos y notificación push al finalizar.
→Solo partidos asignados
→Botón Iniciar deshabilitado hasta la hora del match
→Auto-refresh cada 30 segundos
→Carga de eventos en vivo
→Notificación push automática al finalizar
Sistema de descargos
Denuncias · PDF · Notificaciones
Flujo completo de denuncias y reclamos, con notificación al admin y exportación en PDF.
→Formulario desde la app
→Notificación al admin y encargado
→Historial filtrable por fecha, equipo y categoría
→Exportación PDF para el admin
Notificaciones push
Web Push · VAPID · Service Worker
Web Push con VAPID y Service Worker. Notificación automática al cargar resultado y al finalizar partido.
→Web Push con VAPID
→Service Worker custom
→Push automática al cargar resultado
→Push al finalizar partido
05 · Tecnología y seguridad
Stack técnico y medidas de protección
Next.js 14
App Router · SSR
TypeScript Strict
Sin any
Tailwind CSS
Mobile-first
Supabase
Auth · DB · Storage
PostgreSQL
RLS en todo
Service Worker
Cache explícita
Web Push VAPID
Notificaciones
Google OAuth
Login social
Framer Motion
Animaciones
lucide-react
Iconografía
Medidas de seguridad implementadas
Decisiones técnicas orientadas a proteger los datos del torneo y de cada usuaria.
Row Level SecurityActivo en todas las tablas de Supabase. Cada usuaria solo accede a sus datos autorizados.
Bucket privado de avatarsFotos de perfil en bucket privado con políticas RLS. Nunca expuestas públicamente.
Asignación automática de rolEl rol jugadora se asigna automáticamente al registrarse con Google.
Conversión de imágenes en clienteHEIC, JPG y PNG convertidos a WEBP en el navegador antes del upload.
Variables de entornoSin credenciales en el código. Variables seguras por entorno.
HTTPS forzadoCertificado SSL automático vía Easypanel y Let's Encrypt.
Service Worker controladoEstrategia de cache explícita. Sin sorpresas en producción.
TypeScript estrictoSin any en todo el proyecto. Errores capturados en build.
06 · Resultado
Plataforma multi-rol completa
Caso de estudio · 2026
La PWA cubre la operativa completa de un torneo: desde la inscripción de equipos hasta la carga de resultados en vivo, el sistema de descargos y las notificaciones push automáticas a cada usuaria según su rol.
La arquitectura separa responsabilidades: jugadoras y veedoras operan en la PWA, el panel admin gestiona el torneo desde afuera, y el contenido público del torneo vive en la web pública —sin login. Cada capa protegida a nivel de base de datos mediante RLS.
Sin pasar por las app stores. Instalable en iOS y Android directamente desde el navegador, con updates instantáneos y una experiencia nativa gracias al Service Worker y el Web App Manifest.
Desarrollado por thebullgroove — Juan Martinez, Córdoba, Argentina.
jugadora + veedora
Una sola PWA · 2026 · Córdoba, Argentina
07 · Cliente
Información del cliente
Empresa
Superliga Hockey
Torneo amateur femenino · Córdoba, Argentina
Desarrollado por
thebullgroove
Desarrollo de Software · Soluciones IT · Automatización