Polir e preparar para enviar

Transformar código funcionando em produto pronto

⏱ Estim. ~9 min

01 · Ler

Seu jogo funciona. Dois jogadores conseguem se encontrar, jogar o jogo da velha em tempo real e lidar com desconexões de forma elegante. Mas funciona e pronto não são a mesma coisa.

Um projeto pronto tem UI limpa, README que explica do que se trata, nenhum log de debug largado no código e histórico git decente. É a diferença entre um side project e uma peça de portfólio — algo que você de fato mostraria para outro dev ou recrutador.

Esta lição é sobre os últimos 10% que fazem os primeiros 90% brilharem.

Pontos-chave

Código que funciona e código pronto não são a mesma coisa
Polir significa: UI limpa, README, sem logs de debug, git decente
O README é a primeira coisa que qualquer pessoa que olhar seu projeto vai ver
É o que separa um side project de uma peça de portfólio

02 · Modelo de prompt

Peça ao Claude para melhorar o polimento visual do jogo. Dê feedback concreto sobre o que parece tosco.

Melhore a UI do jogo da velha. Requisitos específicos: (1) adicione uma transição suave quando os símbolos aparecem nas células; (2) quando alguém vencer, destaque as três células vencedoras com uma cor de fundo diferente; (3) adicione uma indicação visual de quem está jogando — por exemplo, pulse o texto de status ou mude a cor para a do símbolo do jogador atual; (4) enquanto busca oponente, desabilite o botão Find Game e mostre um loading spinner ou animação; (5) garanta que o jogo fique bom em mobile — o tabuleiro precisa redimensionar bem em telas pequenas.

03 · Modelo de prompt

Todo projeto precisa de um README. Peça ao Claude para escrever um que explique o que o projeto é, como rodar e que tecnologias usa.

Me ajuda a criar um README.md para o projeto do jogo da velha. Inclua: (1) título e uma frase curta de descrição; (2) seção 'How to Play' explicando o fluxo (encontrar oponente, jogar por turnos, vitória/empate); (3) seção 'Tech Stack' listando Node.js, Express, Socket.io e HTML/CSS/JS puros; (4) seção 'Run Locally' com passos: clone, npm install, node server.js, abrir localhost:3000; (5) seção 'How It Works' com explicação breve da arquitetura cliente-servidor e da comunicação via WebSocket. Mantenha conciso — ninguém lê um README de 500 linhas.

04 · Lista de verificação

Passe por este checklist de preparação para envio. Cada item separa o projeto amador do profissional.

Remova todos os console.log de debug (mantenha só os logs de connection/disconnection no server.js)
A UI do jogo está limpa — sem elementos sobrepostos, layouts quebrados ou texto-placeholder
O README explica o que é o projeto e como rodar
Crie um arquivo .gitignore excluindo node_modules/
Sem URLs hard-coded apontando para localhost — use caminhos relativos para funcionar também em deploy
Refaça o teste do fluxo completo do jogo depois de todas as mudanças de polimento

05 · Prática real

Inicialize o repositório git, faça o primeiro commit e dê push para o GitHub. É o fluxo que você aprendeu no Level 4.

06 · Quiz

Por que remover os console.log de debug antes de enviar?

Eles deixam o servidor significativamente mais lento
Expõem estado interno para quem abrir o DevTools, poluem os logs do servidor e dificultam achar problemas reais
JavaScript não permite console.log em modo de produção
Socket.io conflita com console.log

07 · Preencher

O arquivo _____ avisa a outros devs o que é o seu projeto, como instalar e como rodar.

Outras lições deste capítulo

⚠ A experiência interativa completa precisa de JavaScript. Ative-o e recarregue a página.

※ Este é um projeto educacional independente — não é um produto oficial da Anthropic. Claude™ é uma marca registrada da Anthropic, PBC.