Caso práctico
MovieTQ
Un juego de navegador multijugador en tiempo real en el que los jugadores compiten por nombrar películas primero. Crea salas o únete a ellas, juega en varios modos de juego, compite en las tablas de clasificación y conserva tu progresión mediante cuentas, logros, moneda del juego y elementos cosméticos.
Dos modos en vivo
Bomb-It
Los jugadores se turnan para nombrar una película que encaje con la consigna antes de que se agote el temporizador de la bomba. Si fallas, pierdes una vida; gana el último en pie.
Trailer Quiz
Se reproduce un tráiler y todos compiten por nombrar la película antes de que termine el temporizador de la ronda. La respuesta y los puntos llegan juntos al sonar el timbre.
Hoy hay dos modos en vivo, y más en preparación.
Dentro del juego
Multijugador en tiempo real
Salas con autoridad en el servidor mantienen a cada jugador en el mismo fotograma, sincronizados en menos de un segundo. El servidor decide; los clientes solo renderizan.
Progresión persistente
Cuentas, niveles y XP que registran tus puntuaciones de partida, además de tablas de clasificación globales y logros otorgados automáticamente según cómo juegas.
Una economía dentro del juego
Gana Popcorn jugando y gástalo en una tienda de cosméticos —avatares, títulos, fondos— con packs opcionales y niveles de suscripción a través de Stripe.
Moderación integrada
Una consola de administración con registros de sistema auditados, reportes de jugadores y de tráileres, y las habituales herramientas de baneo, silencio y bloqueo mantiene las salas civilizadas.
Bajo el capó
En lenguaje sencillo por defecto; cambia al detalle de ingeniería.
Un bucle de juego con autoridad en el servidor
El servidor ejecuta toda la partida como una máquina de estados con un pulso de un segundo, de modo que un cliente no puede falsear la puntuación ni los tiempos.
Una máquina LOBBY → STARTING → IN_ROUND → BETWEEN_ROUNDS → FINISHED avanza con un pulso de setInterval; cada solicitud recorre primero una cadena ordenada de middleware de Express: CORS, CSRF, límite de tasa, validación, autenticación.
Sincronización en tiempo real
Todos en una sala ven el mismo tráiler en el mismo instante; el servidor es la única fuente de verdad.
La presencia en la sala se gestiona en el servidor y cada acción del jugador se valida a través de un cliente de service-role de Supabase que se sitúa por encima de la seguridad a nivel de fila; el estado del cliente se descarta.
Tráileres sin la factura de ancho de banda
Los tráileres se transmiten directamente desde la CDN de YouTube, y el reproductor se recorta para ocultar sus controles sin infringir las reglas de YouTube.
El embed se renderiza dentro de un contenedor escalado y con desbordamiento recortado —un recorte de caja— para que siga técnicamente visible; los videos rotos se detectan mediante códigos de error del embed (100/101/150) y se sustituyen al instante por una copia de seguridad.
Cuentas, economía y pagos
Los perfiles conservan niveles, moneda y cosméticos, y Stripe se encarga de los packs y las suscripciones.
Eliminar o banear a un usuario se propaga en cascada por partidas, inventario y logros; los niveles de suscripción viven en un paquete compartido como única fuente de verdad, y una API de estadísticas de administración informa de los costes de operación en vivo.
Un único código base en TypeScript
El frontend, el backend y los tipos compartidos viven en un solo repositorio, tipados de principio a fin.
React + Vite en el frente, Node 22 + Express en el back, Supabase (PostgreSQL) para los datos; el TypeScript del servidor se compila a JavaScript en archivos hermanos en tiempo de compilación.
La capa social
Construido con
- TypeScript
- React
- Vite
- Node.js
- Express
- Supabase
- PostgreSQL
- Stripe
Toda la pila, construida internamente
Frontend, backend, base de datos, multijugador en tiempo real, cuentas y pagos: diseñados, construidos y operados de principio a fin.