About This App

Project Overview

Gueysos is a play on words for Bones in Spanish “Huesos”. Let's play Gueysos! It is Block Dominoes for friends — local tables, private rooms, and clean All Fives scoring.

It uses a Design System built by Tulio Solorzano.

The project also works as a practical front-end case study: real-time play surfaces, protected rooms, and reusable UI patterns built on a typed game engine.

Design and Architecture

A closer look at the front-end decisions, reusable patterns, and typed architecture behind the app.

Front End and UI

This app shows how I turn real product data into clear, maintainable interfaces. It combines visual hierarchy, reusable React components, admin tooling, and typed page systems in a production-style Next.js project.

Data-dense interfaces

Sortable, filterable tables—client tables with paging and optional server-read variants—make rosters, event history, and participation easier to scan. Help text follows the viewport: header sorting on wide layouts and the mobile sort strip (column + direction) on narrow ones, matching the design-system table pattern.

Admin workflows

Role-aware tools support the full content lifecycle for players, users, events, event dates, and participation records.

Reusable UI composition

Cards, buttons, breadcrumbs, section headers, grid layouts, forms, and table controls create consistent page patterns.

Responsive presentation

SCSS partials, design tokens, layout utilities, and page-level styles keep the interface polished. Tables switch to a stacked “card row” layout on small screens with a dedicated sort control row; horizontal scroll is reserved for classic wide tables so mobile layouts are not fighting a nested scroll region.

Design Patterns

App Router page boundariesRoute files stay focused while feature components own page content, data loading, and domain-specific UI decisions.
Server and client component separationServer components fetch Supabase data and prepare page state; client components handle sorting, filtering, forms, auth context, and interactive controls.
Configuration-driven event metricsEvent codes drive participation metrics, table columns, labels, and sorting behavior without duplicating one-off screens.
Typed data accessSupabase query helpers and domain types create predictable contracts between database rows, admin APIs, and UI tables—including clan catalog lookups and history reads used on player screens.
Audit trails and canonical clan dataPlayer display-name changes and clan membership moves write to history tables (who, when, from/to), while roster clan text resolves through a managed clan catalog so admin edits stay aligned with leadership data.
Protected admin surfacesAdmin-only routes and role checks keep management actions separate from public views while sharing the same underlying design language.
Design-system layeringShared UI primitives are reused from the synced UI kit, while app-specific components and styles live in app-owned folders.

Technology Stack

Product Scope

The app includes public player and event pages, protected admin sections, editable forms, Supabase-backed data queries, participation syncing, metric-specific event displays, clan administration, and reusable table interactions—with responsive table chrome and hints consistent across app tables and the shared UI kit.

Recent work extends that system with player rename and clan-membership history, canonical clan codes on roster updates, and tighter coupling between auth-linked user roles and the player’s current clan—so UI, APIs, and persistence stay coherent as the dataset grows.

Those pieces work together as a complete interface system, connecting UI decisions, data modeling, access control, and component boundaries in a real application.