Claude Code é a ferramenta da Anthropic que roda direto no terminal e age de forma autônoma no seu projeto: executa comandos, cria arquivos, instala dependências, corrige erros e segue em frente sem precisar que você interfira a cada passo. É diferente de usar o Claude no chat, onde você cola código e recebe resposta. Aqui o agente age no projeto inteiro.

Quatro horas é um prazo real para um app com banco de dados, autenticação e deploy. Não é um tutorial de “hello world”. Esse passo a passo cobre o que fazer em cada bloco de tempo, o que costuma travar no meio e como resolver sem perder ritmo.

O que dá pra fazer em 4 horas com Claude Code

Quatro horas bem usadas são suficientes para ter um app funcional no ar, com banco de dados, login, ao menos uma funcionalidade central e URL pública. O que determina o escopo não é o tempo, é a clareza do que você quer construir antes de abrir o terminal.

Tela de app funcional criado com Claude Code em sessão de 4 horas

Apps que cabem bem nesse prazo:

  • Ferramenta interna com formulário, tabela e lógica de negócio simples
  • SaaS de nicho com cadastro, dashboard e uma ação principal (ex.: gerador de documentos, calculadora de proposta, sistema de agendamento básico)
  • MVP de marketplace com perfis, listagem e contato entre partes
  • App de gestão para um processo específico (estoque, atendimentos, tarefas)

O que não cabe: integrações complexas com APIs de terceiros que têm documentação ruim, lógica de pagamento do zero (Stripe é mais rápido, mas ainda precisa de tempo), ou funcionalidades que dependem de dados externos que você ainda não tem.

A conta fecha assim: segundo benchmarks da Anthropic, sessões com Claude Code em modo agentic completam tarefas de criação de ponta a ponta em uma fração do tempo de um dev solo. A limitação real é a especificação, não a velocidade de geração.

O que preparar antes de abrir o terminal

A maior causa de sessões que não chegam a lugar nenhum em 4 horas é começar sem saber o que se quer construir. Claude Code precisa de contexto claro para tomar boas decisões de arquitetura desde o início.

Checklist de preparação antes de iniciar sessão com Claude Code

Antes de rodar o primeiro comando, defina em texto simples:

1. O que o app faz em uma frase. Exemplo: “É uma ferramenta onde freelancers cadastram clientes e geram propostas em PDF.” Uma frase. Se precisar de três, a ideia ainda não está pronta.

2. Quem usa e o que essa pessoa precisa fazer. Não precisa ser um doc de requisitos. Basta: “Um usuário entra, cria um projeto, adiciona itens com valor, gera o PDF.” Fluxo linear, ação por ação.

3. Qual stack você quer. Se não tiver preferência, peça ao Claude Code uma recomendação antes de começar. Stacks que funcionam bem com ele: Next.js + Supabase, React + Firebase, ou apps mais simples em Flask/FastAPI + SQLite. Misturar tecnologias que ele não conhece bem cria atrito desnecessário.

4. Onde vai hospedar. Vercel, Railway, Render, Supabase. Saber isso antes evita retrabalho de configuração no final.

Com isso em mãos, escreva um arquivo BRIEF.md na raiz do projeto. Uma página. Claude Code vai ler esse arquivo nas primeiras mensagens e usar como referência ao longo de toda a sessão.

Hora 1 e 2: criar o projeto e as funcionalidades principais

Nas primeiras duas horas, o objetivo é ter o esqueleto do app funcionando localmente, com as telas principais e pelo menos uma funcionalidade central operacional de ponta a ponta.

Sessão de criação de projeto no terminal com Claude Code nas primeiras 2 horas

Hora 1: estrutura e primeiras telas.

Abra o terminal na pasta onde quer criar o projeto e inicie o Claude Code com:

claude

No primeiro prompt, envie o conteúdo do BRIEF.md e peça para ele criar a estrutura inicial do projeto com a stack escolhida. Inclua na mensagem inicial: stack, nome do app, e o fluxo principal que você descreveu na preparação.

Deixe ele rodar. Claude Code vai instalar dependências, criar arquivos de configuração, montar as primeiras rotas e telas. Não interrompa a cada arquivo criado. Espere o bloco terminar e leia o resumo.

Ao fim da hora 1, você deve ter: projeto rodando localmente, pelo menos a tela de entrada e uma tela principal criadas, e navegação básica funcionando.

Hora 2: funcionalidade central.

Agora descreva a funcionalidade mais importante do app. Uma só. Não peça tudo de uma vez. Exemplo: “Cria o formulário de nova proposta com os campos nome do cliente, escopo, valor e prazo. Ao salvar, mostra a proposta na listagem.”

Claude Code vai criar o componente, a lógica de estado e o mock de dados. Nessa fase ainda não precisa de banco de dados real. O importante é que a funcionalidade central esteja navegável e visualmente compreensível.

Ao fim da hora 2: funcionalidade principal funciona com dados locais, telas conectadas entre si, e você consegue demonstrar o fluxo básico para alguém.

Hora 3: conectar banco de dados e autenticação

Com o app funcionando localmente com dados mockados, a hora 3 é para conectar persistência real e proteger as rotas com login.

Configuração de banco de dados Supabase e autenticação no Claude Code

Banco de dados.

Supabase é a escolha mais rápida aqui: cria o projeto em minutos, tem SDK bem documentado e o Claude Code tem contexto sólido sobre ele. Se você já tem um projeto criado no Supabase, passe a URL e a chave anônima pro Claude Code via variáveis de ambiente e peça pra ele migrar os dados mockados para tabelas reais.

O prompt ideal: “Conecta o app ao Supabase. Cria as tabelas necessárias baseadas nas funcionalidades que já construímos. Substitui os dados mockados pelas chamadas reais à API.”

Claude Code vai criar as tabelas, ajustar os tipos TypeScript, substituir os hooks ou chamadas locais pelas queries reais. Esse processo leva de 20 a 40 minutos dependendo da complexidade.

Autenticação.

Após o banco conectado, peça o login. Supabase Auth resolve isso com poucas linhas. O prompt: “Adiciona autenticação por email e senha com Supabase Auth. Rotas protegidas redirecionam para o login se o usuário não estiver autenticado.”

Ao fim da hora 3: app com banco de dados real, dados persistindo entre sessões, login funcionando e rotas protegidas.

Hora 4: testar, corrigir e publicar

A última hora é para fechar o ciclo: revisar o que quebrou, ajustar o que ficou faltando e colocar o app no ar com URL pública.

Deploy do app e revisão final na hora 4 com Claude Code

Revisão e correções.

Navegue pelo app do início ao fim como um usuário novo faria. Anote o que quebra, o que está incompleto ou confuso. Passe a lista pro Claude Code de uma vez: “Encontrei esses problemas: [lista]. Corrige todos.”

Não corrija um de cada vez. Mandar a lista completa de uma vez economiza contexto e evita que uma correção desfaça outra.

Deploy.

Para Vercel: o Claude Code consegue configurar o vercel.json, as variáveis de ambiente e fazer o primeiro deploy direto pelo terminal se você tiver a CLI instalada. Para Railway ou Render: peça pro Claude Code gerar o arquivo de configuração e o Dockerfile se necessário.

Configurar as variáveis de ambiente no painel da plataforma de hospedagem é um passo manual que você precisará fazer pelo dashboard. Claude Code gera a lista de variáveis que precisam ser configuradas.

Ao fim da hora 4: URL pública funcionando, banco de dados conectado em produção, login operacional.

O que geralmente trava no meio (e como resolver)

Mesmo com boa preparação, algumas situações aparecem com frequência em sessões de 4 horas e custam mais tempo do que deveriam.

Desenvolvedor resolvendo problema comum durante sessão com Claude Code

Claude Code entrou em loop corrigindo o mesmo erro.

Acontece quando o erro tem uma causa raiz que ele não identificou. O sinal: ele tentou corrigir 3 vezes e o erro persiste com variações. O que fazer: copie a mensagem de erro completa, cole no prompt e diga: “Para tudo. Leia esse erro completo e me explique a causa raiz antes de tentar corrigir.”

Forçar o diagnóstico antes da correção resolve 80% dos casos de loop.

As dependências não instalam ou conflitam.

Projetos que misturam versões incompatíveis de pacotes travam na instalação. O que fazer: peça pro Claude Code gerar um package.json limpo com versões compatíveis conhecidas para a stack escolhida, apague o node_modules e instale do zero.

O banco de dados não conecta em produção mas funciona local.

Quase sempre é variável de ambiente errada ou formato da URL de conexão diferente entre local e produção. Peça pro Claude Code listar todas as variáveis de ambiente que o app usa e compare com o que está configurado no painel da plataforma.

Claude Code começou a criar funcionalidades que você não pediu.

Modo agentic ativo com contexto longo às vezes leva o agente a inferir o que vem a seguir. O que fazer: use o /compact para comprimir o contexto e reafirme o escopo: “O app está completo no escopo que definimos. Não adicione funcionalidades novas. Foque apenas nas correções que listei.”

O contexto ficou longo e as respostas pioraram.

Sessões longas acumulam contexto e a qualidade das respostas cai. Use /compact quando notar que o Claude Code começou a repetir passos ou tomar decisões inconsistentes com o que foi combinado no início da sessão. Esse comando resume o histórico sem perder o estado do projeto.

A Formação em Vibe Coding da ibe.IA mostra como sair da ideia e publicar o primeiro app em menos de uma semana, usando Claude Code, Cursor e as ferramentas que os melhores builders estão usando hoje.

Conheça a Formação em Vibe Coding

E se essa leitura ajudou a entender como criar apps com IA de verdade, segue a ibe.IA no Instagram (@ibe.ia) que toda semana sai conteúdo desse jeito.