UX case study for Homienoes

Homienoes is Block Dominoes for friends: private rooms, local practice against bots, and All Fives scoring where open ends that total a multiple of five score immediately. Empty your hand and you’ve Homienoed; everyone starts with seven bones. The product also works as a front-end case study—realtime surfaces, drag-and-drop play, and reusable UI on a typed game engine—using a design system built by Tulio Solorzano.

Digital table games often bury the felt under chrome, or treat multiplayer as an afterthought bolted onto a single-player board. Friends need readable scores, a flexible chain that stays on the table, and ways to jump back into the room that needs them—without losing trust around turns, rematches, and invites.

Homies who want a quick private table, players practicing locally against bots, and hosts managing rematches or resets. Success looks like: scores and open ends updating in place, fullscreen table mode for focus on mobile and desktop, invite chrome that surfaces open rooms, and profile-driven table colors and bone faces so every felt feels like theirs.

App Router page boundaries keep routes focused while feature components own play hubs, rooms, and lobby flows. Server routes and Supabase-backed helpers own authoritative game state; client hooks handle realtime sync, drag play, toasts, and table chrome. A shared typed domino engine deals the bone set, validates matches, scores All Fives open ends, and settles Homienoes or locked-table counts.

Pointer-driven hand play keeps mouse and touch on one path; legal ends light up while aiming, and the chain folds when long runs need elbows. Header invite and messages CTAs surface activity at a glance—Play now jumps into fullscreen. Profile preferences cover felt colors (felt, brand blue, Homienoes orange, red-and-gold) and bone face schemes (classic or inverse). Protected play surfaces share the same design language as public pages.

A complete interface system connecting UI decisions, realtime state, access control, and component boundaries in a real multiplayer app—practice locally, host or join private rooms, invite Homies, chat at the table or by DM, and customize the felt without fighting scaffold syncs.

Next.js App Router, React server and client components, TypeScript, Supabase PostgreSQL + realtime, Sass tokens and mixins, a typed domino engine and room APIs, role-based authentication, and Prettier for consistent formatting. Shared UI primitives come from the synced design kit; app-owned folders hold Homienoes-specific polish.