10k Switches
Experimento colaborativo con 10.000 interruptores sincronizados en tiempo real
2025
Proyecto
Experimento web colaborativo con 10.000 interruptores persistentes. Cualquier visitante puede encender o apagar un elemento, elegir entre seis colores y seguir en tiempo real los cambios realizados por otras personas. La navegación muestra el total de interruptores activos y la cantidad de interacciones realizadas durante la sesión.
Interfaz y Diseño
La interfaz utiliza una cuadrícula adaptable, tema claro u oscuro y controles compactos para mantener el foco en el comportamiento colectivo. La identidad visual parte del propio componente de interruptor y combina azul con gris. Los controles tienen etiquetas accesibles, estado de procesamiento y foco visible para la navegación con teclado.
Identidad visual del proyecto.
Interfaz del experimento colaborativo.
Arquitectura Técnica
El frontend es una aplicación SvelteKit escrita en TypeScript y estilizada con Tailwind CSS. El build utiliza adapter-static, genera archivos Brotli y Gzip y carga el cliente de Supabase de forma asíncrona después de la hidratación. Supabase proporciona persistencia en PostgreSQL, API REST y sincronización mediante Realtime.
La carga inicial consulta la primera página con el recuento exacto y solicita los lotes restantes en paralelo. Una suscripción Realtime comienza antes de la consulta; los eventos recibidos durante la carga se guardan en una cola y se aplican de forma idempotente después de montar los datos. Un mapa no reactivo relaciona cada identificador con su posición, lo que permite actualizaciones en tiempo constante, mientras que las inserciones ordenadas utilizan búsqueda binaria.
Rendimiento y Fiabilidad
La cuadrícula virtual renderiza únicamente las filas visibles y una pequeña zona adicional, adaptándose a 5, 8, 16 o 25 columnas. El cálculo de la ventana está limitado por requestAnimationFrame y evita lecturas de layout durante el desplazamiento. Los cambios locales son optimistas, bloquean clics simultáneos y revierten el estado si ocurre un error; la confirmación local mantiene los contadores correctos incluso sin Realtime.
El proyecto se valida con ESLint, Prettier y Svelte Check. Un workflow de GitHub Actions ejecuta consultas periódicas de solo lectura para mantener actividad en la base de datos del plan gratuito.