StreamHub
Agregador de transmisiones deportivas y marcadores en tiempo real
El Problema
Ver deportes en vivo por internet suele ser incómodo: las páginas de streaming están llenas de anuncios invasivos y el video llega con retraso frente a las notificaciones móviles, arruinando los goles antes de verlos. Quería construir una interfaz limpia que combinara transmisiones de video con estadísticas en vivo de ESPN, manteniendo un reproductor flotante que no se reinicie al navegar.
Stack Tecnológico
- React 19
- Vite
- React Router 7
- Tailwind CSS
- HeroUI
- Framer Motion
- Supabase
- PostgreSQL
- Vercel Edge Functions
Implementación Técnica
1. Caché en Memoria y Emparejamiento Aproximado
Para evitar saturar las APIs de terceros y no superar límites de peticiones, implementé una capa de caché en memoria que comparte respuestas entre componentes sin hacer fetches repetidos. Además, como las fuentes de video y las de estadísticas no comparten identificadores comunes, programé un algoritmo de emparejamiento aproximado (fuzzy matching) que asocia partidos por nombres de equipos y horarios de juego.
2. Persistencia y Seguridad con Supabase
Sincronicé los equipos favoritos y el historial de navegación mediante Supabase. Diseñé políticas de Row Level Security (RLS) en PostgreSQL para garantizar que cada usuario solo pueda consultar y modificar sus propios registros, protegiendo las credenciales mediante funciones serverless en Vercel.
3. Notificaciones Anti-Spoiler Calibradas
Cada transmisión tiene un retraso distinto frente a la señal original de televisión. Diseñé un sistema de alertas push donde el desfase se calibra según la latencia de la fuente de video. Las notificaciones se programan con cron jobs y se retardan automáticamente para llegar justo después de que la jugada se ve en pantalla.
Proyecto personal desarrollado como Progressive Web App (PWA) e implementado sobre la red Edge de Vercel.