Sorteador Online Premium

Aplicacao React para sorteios visuais com roda giratoria animada, lista de participantes, pesos/chances, historico, confete, som e modo responsivo para desktop, celular e uso em transmissao.

Como Rodar

Abra esta pasta no VS Code:

C:\Users\gabriel.p\Documents\Codex\2026-05-27\files-mentioned-by-the-user-chatgpt

No terminal integrado, execute:

npm.cmd install
npm.cmd run dev

Depois acesse:

http://127.0.0.1:5173

No Windows, prefira npm.cmd porque o PowerShell pode bloquear o comando npm direto por politica de execucao.

Como Funciona

1. Adicione participantes pelo campo de nome.
2. Defina o peso/chance de cada participante, se quiser.
3. Use a importacao rapida para colar varios nomes separados por linha.
4. Clique em Girar para sortear.
5. O vencedor aparece em modal com efeito visual, confete e registro no historico.
6. O sistema evita repetir vencedor ate voce clicar em Resetar.
7. Use Compartilhar para copiar ou enviar o resultado.

Funcionalidades

• Cadastro individual de participantes.
• Importacao de lista por linhas.
• Remocao individual.
• Limpeza completa da lista.
• Edicao de peso/chance por participante.
• Roda animada com desaceleracao.
• Som de roleta configuravel.
• Confete ao finalizar.
• Modal de vencedor.
• Historico de vencedores.
• Anti-repeticao ate resetar.
• Compartilhamento com fallback para copia manual.
• Exportacao da lista em .txt.
• Temas por cor.
• Modo transmissao para OBS.
• Tela cheia.
• Layout responsivo para desktop e celular.

Imagens

Desktop

Mobile

Vencedor

Scripts

Rodar em desenvolvimento:

npm.cmd run dev

Gerar build de producao:

npm.cmd run build

Visualizar build localmente:

npm.cmd run preview

Testar funcionalidades principais:

npm.cmd run functional:check

Testar layout e screenshots:

npm.cmd run visual:check

Estrutura Principal

src/
  App.jsx
  index.css
  assets/
    transpotech_empilhadeiras_branco.png
  components/
    Header.jsx
    ParticipantPanel.jsx
    SpinWheel.jsx
    WheelStage.jsx
    SettingsPanel.jsx
    WinnerModal.jsx
    ShareDialog.jsx
  hooks/
    useRouletteAudio.js
  lib/
    wheel.js
scripts/
  functional-check.mjs
  visual-check.mjs

Tecnologias

• React
• Vite
• TailwindCSS
• Framer Motion
• GSAP
• tsParticles
• Sonner
• Lucide Icons
• Canvas Confetti
• Playwright Core para validacao automatizada

Observacoes Para APK

O layout foi testado em resolucoes pequenas como 320px, 360px, 430px e em modo landscape. Para empacotar como APK, uma boa rota e usar Capacitor ou outro wrapper WebView apontando para o build gerado em dist/.

Antes de gerar o APK, rode:

npm.cmd run build
npm.cmd run functional:check

Assim voce confirma que os fluxos principais continuam funcionando antes de empacotar.