RL Stats
Cuando el anticheat mató a BakkesMod, la comunidad de Rocket League perdió sus estadísticas. Construí RL Stats para devolverles el control —datos locales, privados y en tiempo real— y una landing que muestra la app real, sin mockups ni promesas infladas.
- 01Tauri 2 + Rust
- 02React 19 + TypeScript
- 03SQLite (WAL mode)
- 04TCP Ingestor en Tiempo Real
- 056 Overlays para OBS
- 06Landing en Vite + Cloudflare Pages
- 07Pipeline de capturas reales
- 08i18n (ES/EN/PT)
- 09SEO + JSON-LD
- 10GitHub Actions CI/CD
Sobre el proyecto
Todo comenzó con un apagón. Cuando Epic Games activó el anticheat (EAC) en Rocket League, BakkesMod — la herramienta de estadísticas más querida de la comunidad — dejó de funcionar para partidas online. De la noche a la mañana, millones de jugadores quedaron ciegos: sin historial, sin métricas, sin forma de entender su progreso. Días después, Psyonix lanzó las APIs oficiales del juego: un stream TCP local en el puerto 49123 que transmitía datos en bruto de cada partida en tiempo real. Los datos fluían, pero no existía interfaz alguna para verlos. RL Stats nació en ese espacio: una app de escritorio para Windows que escucha ese stream, parsea cada evento y lo transforma en un dashboard con el MMR de todos los jugadores del lobby, historial completo, análisis de rendimiento y seis overlays para OBS. Todo local, sin cuentas, sin telemetría. Con el producto ya en producción, el proyecto se completó con su propia landing de marketing: un sitio estático que muestra la app real —no mockups— con capturas generadas automáticamente desde el frontend de producción. Tres idiomas, SEO completo y un botón de descarga que siempre resuelve la última release.
El problema
El primer desafío fue técnico: conectarse a un stream TCP de alta frecuencia, parsear JSON sin esquema estable y persistir miles de partidas en SQLite sin perder un solo evento, todo dentro de una app de escritorio que arranca en menos de dos segundos. El segundo desafío fue de producto: comunicar una app que no se puede probar desde el navegador. La landing tenía que transmitir confianza sin prometer de más, mostrar la interfaz real sin recurrir a mockups y mantener cada captura sincronizada con la versión publicada. Y había una restricción innegociable: la landing no podía tocar el build de la app. Cualquier asset, script o dependencia del sitio debía vivir aislado para no afectar el instalador ni el pipeline de releases.
El enfoque
Elegí Rust para el backend porque, al parsear un stream TCP de alta frecuencia, no hay margen para pausas de garbage collection. La conexión maneja reconnection automática con backoff exponencial, el parseo de JSON es a structs fuertemente tipados y la persistencia usa SQLite en WAL mode con connection pooling. En el frontend, React 19 + TypeScript se integra con Tauri 2 mediante comandos type-safe, Zustand maneja el estado global y TanStack Query cachea los datos para mantener la UI fluida incluso con miles de partidas. La landing vive como un paquete separado dentro del mismo repo: Vite + TypeScript, desplegada en Cloudflare Pages. El pipeline de captura levanta el frontend de producción en Chromium con una capa de IPC simulada de Tauri, toma 16 pantallas y 6 overlays reales, y los optimiza a WebP y MP4. El sitio completo pesa 2 MB, tiene i18n (ES/EN/PT), JSON-LD, sitemap por idioma y un botón de descarga que consulta la API de GitHub para resolver la última release. La app y la web comparten repositorio, pero nunca se mezclan en el build.
Los fundamentos del diseño
RL Stats sigue una estética Broadcast Cyber-Athletic: dark, high-contrast, dense information. Inspirada en dashboards de análisis competitivo, cada pixel tiene un propósito. El sistema incluye tokens de color semánticos, tipografía de tres familias, componentes de alta densidad y animaciones que comunican estado sin distraer.
Explorar el design system→