DESIGNER_DEV

Estudio de caso

Bandeja - Ranking y gestión de grupos de pádel

Aplicación web progresiva (PWA) para grupos de pádel: sorteo de equipos, ranking con niveles y rachas, historial de partidos y torneos. Cada grupo tiene sus propios datos, aislados del resto, y toda la autorización se resuelve del lado del servidor sin backend propio.

Galería

Deslizá para ver más

1 / 5

  • Captura 1 del proyecto Bandeja - Ranking y gestión de grupos de pádel

    Home

    Vista de home.

  • Captura 2 del proyecto Bandeja - Ranking y gestión de grupos de pádel

    Sorteo

    Vista de sorteo.

  • Captura 3 del proyecto Bandeja - Ranking y gestión de grupos de pádel

    Historial

    Vista de historial.

  • Captura 4 del proyecto Bandeja - Ranking y gestión de grupos de pádel

    Perfil

    Vista de perfil.

  • Captura 5 del proyecto Bandeja - Ranking y gestión de grupos de pádel

    Unirse-a-grupo

    Vista de unirse-a-grupo.

El problema

Un grupo de pádel que coordina partidos por WhatsApp no tiene forma de armar equipos parejos, llevar un ranking confiable ni garantizar que nadie pueda manipular sus propios resultados o los del resto del grupo.

La solución

Se construyó una plataforma multi-grupo (los datos de un grupo nunca se mezclan con los de otro) con sorteo de equipos, un ranking que se recalcula siempre desde el historial completo de partidos —nada queda precalculado—, rachas y títulos exclusivos por grupo para gamificar la participación, y un modelo de roles (super de plataforma, dueño, admins con permisos por tiempo, miembros) cuya autorización se aplica del lado del servidor en reglas de Firestore, sin necesidad de un backend propio.

Detalles técnicos

Front-end

  • React 19
  • React Router 7
  • Vite
  • PWA instalable (vite-plugin-pwa)

Back-end / datos

  • Firebase Authentication (Google y email/contraseña)
  • Firestore como única fuente de datos
  • Sin backend propio: toda la autorización vive en firestore.rules

Funcionalidades

  • Sorteo de equipos
  • Ranking dinámico con niveles (1-99) recalculado desde el historial de partidos
  • Rachas y títulos exclusivos por grupo (gamificación)
  • Historial de partidos y torneos con ranking propio por torneo
  • Alta por invitación con códigos que expiran, se renuevan o se rotan
  • Roles con permisos graduales: super de plataforma, dueño de grupo, admins temporales, miembros
  • Registro de auditoría de solo lectura (append-only)
  • Directorio de predios y canchas

Testing y CI/CD

  • Vitest para lógica de negocio (ranking, canchas, backups)
  • Reglas de Firestore testeadas contra el emulador (~90 casos) con @firebase/rules-unit-testing
  • GitHub Actions: lint + tests + build en cada push y PR, preview URL automática por PR
  • Deploy automático a Firebase Hosting al mergear a master
  • Backup diario automático de Firestore a JSON vía GitHub Actions

Resultado

  • Producto en uso real por grupos de pádel
  • ~150 casos de test entre lógica de negocio y reglas de seguridad
  • Autorización crítica resuelta íntegramente en reglas de Firestore, cubiertas por tests

Demo

  • https://fir-d4191.web.app