Como usar o Bolt.new: da ideia ao app implantado, passo a passo
Um passeio completo pelo Bolt.new, reconstruído a partir de uma criação real de iniciante — primeiro prompt, iterações com capturas, analytics, login com Google via Firebase e implantação. Cada passo com captura de tela.
Bolt.new em resumo
- Comece com uma ideia geral e as poucas funções que quer — "registrar sessões de trabalho, adicionar tarefas, salvar sessões" — sem um documento de requisitos. Em cerca de um minuto, um app que funciona está de pé.
- Itere com prompts curtos, uma função por vez: botão de encerrar, aba de analytics, gráfico de pizza, modo escuro. Se um ajuste falhar, diga de outra forma — na segunda tentativa costuma funcionar.
- Mudanças podem quebrar coisas. Quando um botão morre, descreva o bug em palavras simples ou peça para voltar à última versão boa — quase tudo se resolve com um prompt.
- Login com Google pede Firebase: crie um projeto, ative o provedor Google, cole a firebaseConfig no Bolt e autorize seu domínio implantado nas configurações do Firebase.
Building an App from Scratch with Bolt.new
Vídeo original de:Brock Mesarich · AI for Non Techies16:02
As capturas de tela vêm do vídeo original e são creditadas com links de marcação de tempo. O texto é redação própria baseada na transcrição completa — os fatos correspondem ao vídeo.
Este tutorial é um resumo ilustrado e independente para quem prefere ler. Para apoiar o criador, assista ao vídeo original no canal AI for Non Techies, ligado acima.
Crie um app no Bolt.new, passo a passo
- 1
Descreva sua ideia em um prompt
Abra o bolt.new e digite uma ideia geral mais as funções que quer — não um documento de requisitos. O exemplo: "Crie um app que registra sessões de trabalho. Vamos chamá-lo de FocusFlow. A ideia é registrar blocos de trabalho, adicionar as tarefas concluídas na sessão e salvar essas sessões." Detalhe demais no começo atrasa a primeira versão.
O primeiro prompt do FocusFlow no bolt.new: ideia geral, poucas funções.Ver em 0:30 - 2
Veja a primeira versão nascer — e refine com uma captura
Cerca de um minuto depois, o Bolt já escreveu e executou o código: cronômetro, formulário de tarefas e estatísticas. Tire uma captura da parte que não gosta, anexe e diga o que mudar — "vamos deixar esta parte do app um pouco mais simples". Esse retorno visual vale mais que descrever posições de pixels com palavras.
A primeira pré-visualização e um prompt de melhoria com captura anexada.Ver em 1:40 - 3
Adicione categorias às tarefas
Peça uma coluna de categorias com exemplos concretos — admin, criação de conteúdo, finanças, pesquisa, desenvolvimento de apps. O Bolt transforma isso numa grade de botões e cada tarefa ganha uma etiqueta colorida — é o que fará o analytics valer algo depois.
A grade de categorias com etiquetas coloridas nas tarefas.Ver em 2:30 - 4
Peça um botão de encerrar sessão
O cronômetro roda mas nada é salvo. Prompt: "Adicione a capacidade de encerrar uma sessão." O Bolt cria componentes novos (SessionControls, SessionSummary), conecta tudo ao app e, ao encerrar, mostra um resumo com duração, tarefas concluídas e categoria principal.
O Bolt planeia e cria os componentes de encerramento de sessão.Ver em 3:00 - 5
Deixe os resumos no painel principal
Por padrão, encerrar uma sessão salta para uma página separada. Se esse fluxo incomoda, diga sem rodeios: "Não gosto de ser levado a uma nova página quando a sessão termina — mantenha no painel normal." O cartão de resumo aparece agora dentro da tela principal.
O cartão Session Complete volta ao painel principal.Ver em 4:00 - 6
Adicione uma aba de analytics
Peça uma aba Session Analytics que liste todas as tarefas por dia e os totais do dia. O Bolt a coloca ao lado de Current Session, e cada sessão encerrada se abre no histórico de tarefas — é aqui que as etiquetas de categoria começam a valer.
A nova aba Analytics ao lado de Current Session.Ver em 4:30 - 7
Registre o tempo por tarefa
Analytics precisam de dados: peça que as tarefas sejam marcadas como concluídas por padrão e adicione o tempo gasto por tarefa. O Bolt acrescenta campos de horas e minutos (depois trocados por um controle deslizante de até uma hora) e alimenta o analytics com os números.
Os campos de tempo entram no formulário de tarefas.Ver em 6:00 - 8
Visualize o tempo com gráficos de pizza
Prompt: "Vamos adicionar analytics com gráficos de pizza mostrando quanto tempo foi gasto em cada coisa." O primeiro gráfico chega absurdamente grande — "deixe um pouco menor" resolve na segunda tentativa. Esses microajustes de interface são onde o Bolt brilha.
O gráfico de pizza diário depois do ajuste de tamanho.Ver em 6:25 - 9
Corrija regressões falando claro
No meio da construção, as mudanças colidem: botões param de funcionar ou um efeito divertido de rastro do cursor quebra o layout. Descreva o bug em palavras simples, peça para apagar o que desagradou ou use Desfazer. As próprias listas de correção do Bolt — seis itens aqui — normalmente resolvem tudo numa passada.
Uma lista de seis correções conserta o cronômetro e remove o brilho.Ver em 9:30 - 10
Adicione login com Google
Para virar um produto de verdade, o app precisa de contas. Prompt: "Adicione a capacidade de entrar com o Google." O Bolt responde com um cartão de trabalho — atualizar package.json, instalar dependências, criar o contexto de autenticação — mais as instruções de Firebase para você seguir fora do Bolt.
O cartão de trabalho Add Google Authentication do Bolt.Ver em 11:00 - 11
Crie o projeto no Firebase
Siga o link do Bolt para o console do Firebase, crie um novo projeto (dê um nome, escolha a conta) e continue para o console quando ficar pronto. O plano gratuito Spark cobre este tutorial.
Projeto do Firebase pronto — continuar para o console.Ver em 11:30 - 12
Ative o Google nos métodos de login
No console: Build → Authentication → Sign-in method. Ative o provedor Google e também Email/Password, para que os usuários possam se cadastrar dos dois jeitos. É exatamente o que a lista do Bolt pedia para configurar.
O Google aparece agora como provedor de login ativado.Ver em 12:00 - 13
Cole a firebaseConfig no Bolt
Em Project settings → Your apps, registre um app web e copie o bloco firebaseConfig no lugar que o Bolt indica — o arquivo de configuração criado pela lista dele. Diga ao Bolt "adicionei minha configuração do Firebase" e ele conecta tudo, até aparecer um botão de cadastro funcionando.
O bloco firebaseConfig para colar no arquivo de configuração do Bolt.Ver em 12:30 - 14
Autorize seu domínio implantado
Até o Firebase confiar nas suas URLs, o login com Google morre com "popup bloqueado". Implante o app pelo Bolt, abra Firebase → Authentication → Settings → Authorized domains e adicione localhost, o domínio da IDE e a URL implantada (pergunte ao Bolt: ele dá o domínio exato).
Domínios autorizados nas configurações do Firebase.Ver em 14:00 - 15
Entre no ar e faça login
Abra a URL implantada, clique em Sign in e continue com o Google — o popup funciona, seu avatar pousa no canto superior direito e o logout também funciona. Você tem um app implantado com contas reais, construído sem escrever uma linha de código.
Sessão iniciada no app FocusFlow implantado.Ver em 15:00