10k Switches
Experimento colaborativo com 10 mil switches sincronizados em tempo real
2025
Projeto
Experimento web colaborativo com 10 mil switches persistentes. Qualquer visitante pode ligar ou desligar um item, escolher entre seis cores e acompanhar em tempo real as alterações feitas por outras pessoas. A navegação exibe o total de switches ativos e a quantidade de interações realizadas na sessão.
Interface e Design
A interface usa uma grade responsiva, tema claro ou escuro e controles compactos para manter o foco no comportamento coletivo. A identidade visual deriva do próprio componente de switch e utiliza azul sobre cinza. Os controles têm identificação acessível, estado de processamento e foco visível para navegação por teclado.
Identidade visual do projeto.
Interface do experimento colaborativo.
Arquitetura Técnica
O frontend é uma aplicação SvelteKit escrita em TypeScript e estilizada com Tailwind CSS. O build usa adapter-static, gera arquivos Brotli e Gzip e carrega o cliente Supabase de forma assíncrona após a hidratação. O Supabase fornece persistência em PostgreSQL, API REST e sincronização por Realtime.
A carga inicial consulta a primeira página com a contagem exata e busca os lotes restantes em paralelo. Uma assinatura Realtime é iniciada antes da consulta; eventos recebidos durante o carregamento ficam em uma fila e são aplicados de forma idempotente após a montagem dos dados. Um mapa não reativo relaciona cada identificador à sua posição, permitindo atualizações em tempo constante, enquanto inserções ordenadas usam busca binária.
Desempenho e Confiabilidade
A grade virtual renderiza apenas as linhas visíveis e uma pequena área excedente, adaptando-se a 5, 8, 16 ou 25 colunas. O cálculo da janela é limitado por requestAnimationFrame e evita leituras de layout durante a rolagem. Alterações locais são otimistas, bloqueiam cliques concorrentes e fazem rollback em caso de erro; a confirmação local mantém os contadores corretos mesmo sem Realtime.
O projeto possui validação com ESLint, Prettier e Svelte Check. Um workflow do GitHub Actions executa consultas periódicas somente leitura para manter atividade no banco do plano gratuito.