Dugout Pixels
A unified pixel-art baseball card platform spanning leagues and seasons.
The problem
The 8-bit baseball card concept kept expanding — first the Dodgers, then the World Baseball Classic, then Spring Training. Each lived in its own repo with duplicated rendering logic, separate deploys, and diverging features. Three apps doing the same thing with different rosters.
The approach
Dugout Pixels consolidates everything into a single platform with league-specific modules. Shared components handle the pixel-art pipeline, tier system, and card rendering, while each league gets its own routes, color schemes, and roster logic. One codebase, one deploy, multiple leagues.
The tier system maps real-time player stats to visual quality — a 7-tier scale from NES-era 4-color sprites with CRT scanlines up to gold-foil cards with full 256-color rendering. Your eye knows who’s performing before reading a single number.
How it works
React 19 with React Router 7 handles navigation between leagues (/spring/*, /wbc/*, /mlb). A shared pixelation pipeline — median-cut color quantization and Floyd-Steinberg dithering — produces authentic retro sprites on canvas. The MLB Stats API provides all player, team, and game data, with sportId toggling between leagues. CSS custom properties cascade from brand-level vars through league accents to per-entity colors, keeping the visual identity cohesive across contexts.