10k Switches

Project

A collaborative web experiment with 10,000 persistent switches. Any visitor can turn an item on or off, choose from six colors, and follow changes made by other people in real time. The navigation displays the total number of active switches and the interactions performed during the current session.

Interface and Design

The interface uses a responsive grid, light and dark themes, and compact controls to keep the focus on collective behavior. Its visual identity derives from the switch component itself and combines blue with gray. Controls include accessible labels, processing states, and visible focus for keyboard navigation.

Project visual identity.

Collaborative experiment interface.

Technical Architecture

The frontend is a SvelteKit application written in TypeScript and styled with Tailwind CSS. The build uses adapter-static, generates Brotli and Gzip files, and loads the Supabase client asynchronously after hydration. Supabase provides PostgreSQL persistence, a REST API, and Realtime synchronization.

The initial load requests the first page with an exact count and fetches the remaining batches in parallel. A Realtime subscription starts before the query; events received while loading are queued and applied idempotently after the data is mounted. A non-reactive map relates each identifier to its position, enabling constant-time updates, while ordered insertions use binary search.

Performance and Reliability

The virtual grid renders only visible rows and a small overscan area, adapting to 5, 8, 16, or 25 columns. Window calculations are throttled with requestAnimationFrame and avoid layout reads while scrolling. Local changes are optimistic, prevent concurrent clicks, and roll back on errors; local confirmation keeps counters accurate even when Realtime is unavailable.

The project is validated with ESLint, Prettier, and Svelte Check. A GitHub Actions workflow performs periodic read-only queries to keep the free-tier database active.

Web App

GitHub