Caso de estudio UX para Homienoes
Cómo Homienoes convierte un juego de salón familiar en una interfaz multijugador clara: mesas en tiempo real, salas protegidas y reuso del design system sin pelear con el pulido de producto.
Contexto
Homienoes es Dominó Block para amigos: salas privadas, práctica local contra bots y puntuación All Fives donde los extremos abiertos que suman múltiplo de cinco puntúan de inmediato. Vacía tu mano y has Homienoeado; todos empiezan con siete fichas. El producto también funciona como caso de estudio front-end—superficies en tiempo real, juego con arrastrar y soltar y UI reutilizable sobre un motor tipado—usando un design system de Tulio Solorzano.
Problema
Los juegos de mesa digitales a menudo entierran el fieltro bajo cromática, o tratan el multijugador como un añadido a un tablero en solitario. Los amigos necesitan puntuaciones legibles, una cadena flexible que se quede en la mesa y formas de volver a la sala que los necesita—sin perder confianza en turnos, revanchas e invitaciones.
Usuarios y objetivos
Homies que quieren una mesa privada rápida, jugadores que practican en local contra bots y anfitriones que gestionan revanchas o reinicios. El éxito se ve así: puntuaciones y extremos abiertos actualizándose en el lugar, modo mesa a pantalla completa en móvil y escritorio, cromática de invitaciones que muestra salas abiertas, y colores de mesa y caras de fichas en el perfil para que cada fieltro se sienta propio.
Enfoque
Los límites de página del App Router mantienen las rutas enfocadas mientras los componentes de feature poseen hubs de juego, salas y flujos de lobby. Las rutas de servidor y helpers con Supabase poseen el estado autoritativo; los hooks de cliente manejan sync en tiempo real, juego con arrastre, toasts y cromática de mesa. Un motor tipado de dominó reparte el set, valida jugadas, puntúa extremos All Fives y resuelve Homienoes o mesas bloqueadas.
Decisiones clave de UX
El juego con puntero unifica ratón y táctil; los extremos legales se iluminan al apuntar y la cadena se pliega cuando las rachas largas necesitan codos. Las CTAs de invitaciones y mensajes en el header muestran actividad de un vistazo—Jugar ahora entra en pantalla completa. El perfil cubre colores de fieltro (fieltro, azul de marca, naranja Homienoes, rojo y oro) y esquemas de fichas (clásico o inverso). Las superficies protegidas comparten el mismo lenguaje visual que las páginas públicas.
Resultado
Un sistema de interfaz completo que conecta decisiones de UI, estado en tiempo real, control de acceso y límites de componentes en una app multijugador real: practicar en local, crear o unirse a salas privadas, invitar Homies, chatear en la mesa o por MD, y personalizar el fieltro sin pelear con los syncs del scaffold.
Stack
Next.js App Router, componentes server y client de React, TypeScript, Supabase PostgreSQL + realtime, tokens y mixins Sass, motor tipado de dominó y APIs de salas, autenticación por roles y Prettier. Las primitivas de UI compartidas vienen del kit sincronizado; carpetas propias de la app guardan el pulido de Homienoes.
