Saltar al contenido principal

Arquitectura

Esta sección está pensada para desarrolladores, agentes de IA e integradores que quieran entender cómo está construido bonkPadel.

Stack​

  • Frontend estático: HTML, CSS y módulos JavaScript vanilla. Sin framework SPA; las páginas son archivos HTML independientes.
  • Hosting: Vercel (estático, con vercel.json para rewrites puntuales).
  • Backend: Firebase:
    • Firebase Authentication para el login del organizador.
    • Cloud Firestore como base de datos principal (torneos, participantes, resultados, organizadores).
  • Analytics: PostHog embebido en las páginas públicas.
flowchart LR
  User["Jugador / Organizador"] -->|HTTP| Vercel[Vercel static]
  Vercel -->|JS módulos| Browser["Browser runtime"]
  Browser -->|Auth| FirebaseAuth[Firebase Auth]
  Browser -->|Read/Write| Firestore[Cloud Firestore]
  Browser -->|Events| Posthog[PostHog]

Principales módulos en el frontend​

  • index.html – landing pública (Spanish).
  • tournaments.html – directorio público.
  • tournament.html – página en vivo de un torneo (renderiza a partir de ?id=<CODE>).
  • organizer.html – página pública del organizador (/p/<slug>, vía rewrite en vercel.json).
  • login.html – pantalla de acceso.
  • manage.html – panel del organizador (gestión de torneos, participantes, resultados).
  • js/shared/* – componentes compartidos (footer, helpers de auth, utilidades).

Convenciones​

  • Spanish es-AR es la lengua del producto; esta documentación agrega inglés como secundario.
  • Sin bundler ni transpiler: los módulos se sirven directamente con <script type="module">.
  • El tema oscuro es el default. Los tokens de color viven en css/styles.css como variables CSS.

Seguridad​

  • El acceso al panel del organizador requiere Firebase Auth.
  • Las reglas de Firestore restringen escrituras a datos propios del organizador.
  • Las páginas públicas leen solamente vistas "safe" de los datos (sin PII de jugadores más allá del nombre).

Para saber más​