$ show arianrhodsandlot/retroassembly
RetroAssembly is a full-stack web application for self-hosting a personal retro game collection and playing it directly in the browser via emulation. It provides a complete library management system for ROMs, save states, favorites, and launch history, with a rich UI built on React 19, Radix UI, and Tailwind CSS 4. The backend uses Hono with Drizzle ORM and SQLite (Node.js) or Cloudflare D1 (Workers), with file storage abstracted for local filesystem or Cloudflare R2. Emulation is powered by Nostalgist.js using libretro cores, supporting dozens of platforms with per-platform core options, BIOS validation, shaders, rewind, and auto-save. The app features multi-user accounts with shared library mode, keyboard/gamepad navigation via spatial navigation, a virtual gamepad for touch devices, internationalization with 12 languages, and a Docker-first deployment model. The architecture is dual-runtime (Node.js or Cloudflare Workers), with a Vite-based build system and pnpm workspaces. While the codebase is well-structured and demonstrates strong engineering patterns, it carries medium technical drift due to pinned CDN commit hashes, patched third-party packages for SSR compatibility, and the complexity of maintaining dual runtimes.
The LLM identified 4 files worth highlighting for reuse:
Provides a `createStorage()` factory that returns an abstract storage interface (`put`, `get`, `head`, `delete`). It handles both local filesystem (Node.js) and Cloudflare R2 (Workers) transparently, with proper error handling and a consistent API. This is a clean, reusable pattern for any application that needs runtime-agnostic file storage.
A React hook that fetches and updates user preferences via SWR mutation, synchronized with a Jotai atom. It provides a simple `updatePreference` function that optimistically updates the local state, then persists changes via the API. This pattern is a model for building reactive, data-driven settings UIs with minimal boilerplate.
Wraps Radix UI's Dialog primitive with automatic spatial navigation pausing/resuming when the dialog opens or closes. It uses React context and effects to disable keyboard/gamepad navigation on the underlying page while the dialog is active, preventing focus conflicts. This is a clean encapsulation of a common accessibility concern in spatial-navigation-based interfaces.
Implements a virtual button for touch devices that simulates gamepad button presses. It tracks global pointer events (touch/mouse) to detect press-down and press-up, then dispatches commands to the emulator via Nostalgist. The component uses a shared `touchAction` ref to coordinate multi-touch and avoid ghost taps, demonstrating a robust approach to emulating hardware inputs on a web page.