Projeto

Poker Planning — estimativa ágil em tempo real

Planning Poker colaborativo: crie uma sala, compartilhe o link e o time vota em cartas Fibonacci em tempo real — cartas ocultas até o reveal, com contagem regressiva, histograma e média dos votos.

Criador e desenvolvedor

Ficha Técnica

Papel

Criador e desenvolvedor

Stack

nextjsreactsocket.iowebsockettypescriptreal-time

Toda planning tem aquele momento: "quantos pontos vale essa task?" — e a resposta muda dependendo de quem fala primeiro. O Poker Planning resolve o viés de ancoragem do jeito clássico: todo mundo vota em segredo, as cartas viram ao mesmo tempo. Sem cadastro, sem instalação: cria a sala, manda o link, o time vota.

Como funciona

  1. Crie uma sala com nome personalizado — o link é compartilhável na hora (com Web Share API e copiar-link).
  2. Cada participante entra com um nome (identidade leve via localStorage, sem login).
  3. Todos votam no deck Fibonacci (1 a 89, mais ? e pro cafezinho) — cada um vê a própria carta, as dos outros ficam viradas.
  4. Flip! Contagem regressiva de 3 segundos animada e as cartas viram juntas.
  5. Resultado: histograma da distribuição de votos + média dos valores numéricos. Um clique reinicia a rodada.

Com i18n en/pt e layout de mesa que distribui os participantes ao redor (topo/laterais/baixo) conforme o tamanho do time.

Arquitetura

O desafio técnico central: Next.js App Router não expõe servidor WebSocket. A solução foi inverter o controle — um servidor Node próprio que hospeda o Next e o Socket.io no mesmo processo HTTP.

Visão de componentes:

Fluxo de uma rodada:

Decisões técnicas que valem a pena contar

Servidor autoritativo, estado efêmero. Cada sala vive num objeto em memória no servidor — participantes, votos, estado de reveal. Todo evento devolve a sala inteira via broadcast (session_update), então qualquer cliente re-sincroniza com uma única mensagem. Salas de planning são efêmeras por natureza: persistência aqui seria complexidade sem benefício.

Saída no meio do reveal. Se alguém cai da sala com as cartas abertas, remover na hora apagaria um voto que o time está discutindo. A solução: com a sala revelada, quem desconecta vai pra uma lista de remoção pendente e só sai de verdade na próxima rodada — o histograma nunca muda embaixo do time.

Reveal coreografado. O flip envolve três tempos: o clique marca a sala como revelada no servidor, o broadcast dispara a contagem regressiva de 3s em cada cliente, e só então o resultado aparece. O drama do "3... 2... 1..." é feature, não firula — é o que faz todo mundo olhar pra tela ao mesmo tempo.

Stack

Next.js 15 (App Router) + React 19 · Express + Socket.io 4 no mesmo processo · TypeScript · Tailwind · framer-motion · i18next (en/pt).

Status

No ar em poker.racoelho.com.br e em uso em plannings reais. No radar: papel de moderador (hoje qualquer um pode virar as cartas), deck configurável e o termômetro de consenso que já existe no código esperando a vez dele.

Curtiu o projeto?

Se quiser conversar sobre esse projeto, arquitetura ou uma oportunidade de trabalho, é só me chamar. 🚀

contato@racoelho.com.br
Racoelho

Conteúdo sobre desenvolvimento, tecnologia e desafios de programação para impulsionar sua carreira em tech.

Conecte-se

© 2024- 2026 Racoelho. Todos os direitos reservados.

v3.0.19 • Build: 2026-04-17