StreamHub
App web de streaming multideporte
El Problema
Las transmisiones deportivas en vivo sufren constantemente de desincronización entre el feed de video y las fuentes de datos adicionales (marcadores, estadísticas). El requerimiento principal era construir un cliente web capaz de consumir múltiples fuentes en tiempo real (APIs de streams y API de ESPN) y orquestarlas sin saturar el cliente de peticiones redundantes ni perder la coherencia del estado a través de múltiples dispositivos.
Stack Tecnológico
- React 19
- Vite
- React Router v7
- Tailwind CSS
- HeroUI
- Framer Motion
- Supabase
- PostgreSQL
- Vercel Serverless
Implementación Técnica
1. Estrategia de Caché y Deduplicación
Implementé un mecanismo de caché en memoria a nivel cliente para deduplicar requests HTTP simultáneos hacia las APIs de terceros. Esto mitigó el riesgo de alcanzar límites de rate-limiting durante picos de concurrencia, aislando los componentes del árbol de React que dependían del mismo recurso asíncrono.
2. Sincronización de Estado y RLS
Sincronicé los historiales de visualización y favoritos a través de Supabase. Diseñé e implementé políticas de Row Level Security (RLS) en PostgreSQL para restringir el acceso a los datos a nivel de fila, asegurando que cada cliente solo pueda consultar o mutar los registros asociados al ID de su sesión autenticada.
3. Notificaciones Asíncronas Calibradas
Desarrollé un sistema de notificaciones push donde el delay es calculado y calibrado a nivel de cliente individual. Este algoritmo compensa la varianza en el retraso del stream de video, evitando que las alertas tempranas del servidor corrompan la experiencia visual (spoilers) de la transmisión.