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

Deploy No GitHub Pages

Este projeto e um app Vite. Para publicar no GitHub Pages, nao publique a raiz do projeto diretamente como site estatico. A raiz contem src/main.jsx, que precisa ser compilado antes.

O jeito recomendado e usar o workflow ja incluso em:

.github/workflows/deploy.yml

Passos:

1. Envie todos os arquivos para o GitHub, incluindo a pasta .github.
2. No GitHub, abra Settings.
3. Entre em Pages.
4. Em Build and deployment, selecione GitHub Actions.
5. Faca um novo push na branch main ou master.
6. Aguarde a Action Deploy GitHub Pages finalizar.

O build publicado sera a pasta dist/, com os caminhos ajustados para funcionar em URLs como:

https://gabrieltech.github.io/Sorteador-TranspoTech-V1/

Se a pagina ficar branca, verifique:

• Se o deploy foi feito pela Action e nao pela raiz do repositorio.
• Se a Action terminou com sucesso.
• Se o GitHub Pages esta configurado como GitHub Actions.
• Se voce fez push do arquivo vite.config.js atualizado.

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.