Pular para o conteudo
Voltar aos artigos
tutorialclaude-codeprimeiro-app

Seu Primeiro App com Claude Code: Do Zero ao Funcionando

Crie um app de tarefas completo usando Claude Code, mesmo sem saber programar. Tutorial pratico de ~30 minutos com prompts reais.

11 min de leitura

Seu Primeiro App com Claude Code

Você nunca programou na vida. Ou talvez tenha tentado e desistido no meio. Não importa. Nos próximos 30 minutos, você vai construir um app de verdade — funcional, bonito, que roda no navegador.

Sem copiar e colar código de tutorial. Sem entender cada linha. Você vai descrever o que quer em português, e o Claude Code vai construir para você.

O resultado? Um gerenciador de tarefas pessoal com interface moderna. Adicionar tarefas, marcar como concluídas, deletar, filtrar por status. Tudo salvo no seu navegador.

Vamos lá.

O que vamos construir

Antes de começar, veja o que você vai ter no final:

  • Um app de tarefas com visual limpo e tema escuro
  • Campo para adicionar novas tarefas
  • Botão para marcar tarefas como concluídas (com risco no texto)
  • Botão para deletar tarefas
  • Filtros: ver todas, apenas pendentes, apenas concluídas
  • Data de vencimento em cada tarefa
  • Barra de progresso mostrando porcentagem de tarefas concluídas
  • Layout responsivo que funciona no celular
  • Dados salvos em localStorage — fechar o navegador e abrir de novo, suas tarefas continuam lá

Parece muita coisa? Com Claude Code, vamos construir tudo isso em iterações simples. Cada iteração é um pedido em português. Nenhuma exige conhecimento prévio de programação.

Por que um gerenciador de tarefas?

Você poderia construir qualquer coisa. Uma calculadora, uma página pessoal, um quiz. Mas o gerenciador de tarefas é especial por três motivos.

Primeiro, é útil de verdade. Você vai poder usar o app que construir. Não é um exercício que vai para o lixo depois.

Segundo, tem complexidade real sem ser intimidante. Envolve criar, ler, atualizar e deletar dados — as quatro operações fundamentais de qualquer software. Profissionais chamam isso de CRUD. Todo app do mundo — do Instagram ao banco online — é basicamente CRUD com uma interface bonita.

Terceiro, é expandível. Depois de pronto, você pode adicionar funcionalidades infinitas. Categorias, prioridades, notificações, sincronização com a nuvem. Cada adição é uma oportunidade de aprender algo novo.

Pré-requisitos

Você precisa ter o Claude Code instalado e funcionando. Se ainda não fez isso, siga nosso guia Como Instalar Claude Code Passo a Passo e volte aqui.

Também vai precisar de um navegador (Chrome, Firefox, Edge — qualquer um serve).

Passo 1: Criar a pasta do projeto

Abra o terminal e crie uma pasta para o seu app:

mkdir ~/meu-task-manager
cd ~/meu-task-manager

Agora inicie o Claude Code dentro dessa pasta:

claude

Sua pasta está vazia. É exatamente assim que queremos. O Claude Code funciona melhor quando entende o contexto — e uma pasta vazia diz "estamos começando do zero".

Passo 2: O primeiro prompt

Essa é a parte mais importante. Você vai descrever o que quer em linguagem natural. Não precisa ser perfeito — precisa ser claro. Pense assim: se você estivesse pedindo a um programador humano, o que diria?

Uma boa descrição inclui o que o app faz, como ele deve se comportar, e qual visual você quer. Quanto mais contexto, melhor o resultado na primeira tentativa.

Digite o seguinte no Claude Code:

Voce: Crie um app de gerenciador de tarefas usando HTML, CSS e JavaScript em um único arquivo index.html. O app deve ter: adicionar tarefas com campo de texto, marcar tarefas como concluídas, deletar tarefas, e filtrar por status (todas, pendentes, concluídas). Use um tema escuro e visual moderno e limpo. Salve as tarefas em localStorage para que persistam ao fechar o navegador.

O Claude Code vai analisar seu pedido e começar a trabalhar. Você vai ver ele criando o arquivo, escrevendo HTML, CSS e JavaScript. Algo assim vai aparecer no terminal:

Claude: Vou criar o gerenciador de tarefas com todas as funcionalidades solicitadas. Criando o arquivo index.html...

[Claude cria o arquivo index.html com ~200 linhas de código]

Pronto! Criei um gerenciador de tarefas com:

  • Campo de input para adicionar tarefas
  • Botões para marcar como concluída e deletar
  • Filtros por status (Todas/Pendentes/Concluídas)
  • Tema escuro com design moderno
  • Persistência via localStorage

Abra o arquivo index.html no navegador para testar.

Seu primeiro app já existe. Sério. Um prompt, um app.

Talvez você esteja pensando: "Mas eu não entendo o código que ele gerou." Tudo bem. Você também não entende o motor do seu carro em detalhes — mas sabe dirigir. Com o tempo, à medida que você vê o Claude Code gerando código repetidamente, os padrões vão ficando familiares. Não precisa forçar o aprendizado. Ele acontece naturalmente.

Passo 3: Abrir e testar

Abra o arquivo no navegador. Você pode fazer isso de duas formas:

Pelo terminal (sem sair do Claude Code):

Abra outra aba do terminal e execute:

# No Linux/WSL
xdg-open ~/meu-task-manager/index.html

# No macOS
open ~/meu-task-manager/index.html

Pelo gerenciador de arquivos: Navegue até a pasta meu-task-manager e dê dois cliques no index.html.

Você vai ver seu app. Tema escuro, campo para digitar tarefas, botões funcionando. Teste tudo:

  1. Digite uma tarefa e clique em adicionar
  2. Crie mais algumas tarefas
  3. Marque uma como concluída
  4. Delete uma
  5. Use os filtros para alternar entre todas, pendentes e concluídas
  6. Feche o navegador, abra de novo — suas tarefas continuam lá

Funciona? Parabéns. Você acabou de construir um app real.

Mas não vamos parar aqui.

Passo 4: Primeira iteração — adicionar data de vencimento

Apps reais evoluem. E com Claude Code, evoluir é fazer outro pedido. Volte ao terminal onde o Claude Code está rodando:

Voce: Adicione um campo de data de vencimento em cada tarefa. O campo deve aparecer ao lado do campo de texto na hora de criar a tarefa. Na lista, mostre a data formatada (ex: "15 Mar 2026"). Tarefas vencidas devem ter a data em vermelho.

Claude: Vou adicionar o campo de data de vencimento. Atualizando o index.html...

[Claude edita o arquivo existente]

Adicionei:

  • Campo date picker ao lado do input de texto
  • Data formatada na exibição de cada tarefa
  • Destaque em vermelho para tarefas com data vencida
  • A data é salva junto com a tarefa no localStorage

Atualize o navegador. O campo de data está lá. Crie uma tarefa com data de ontem — a data aparece em vermelho. Crie uma para semana que vem — aparece normal.

Percebeu o padrão? Você descreve, Claude Code implementa, você testa. Esse ciclo tem um nome no mundo da programação: desenvolvimento iterativo. É como profissionais trabalham. A diferença é que antes você precisava de anos de estudo para executar cada ciclo. Agora precisa de um prompt.

Note também que o Claude Code não criou um arquivo novo. Ele editou o index.html existente, adicionando a funcionalidade sem quebrar o que já existia. Ele entende o contexto do projeto.

Passo 5: Segunda iteração — layout responsivo

Seu app funciona no desktop. Mas e no celular? Vamos garantir:

Voce: Torne o layout totalmente responsivo para mobile. Em telas pequenas, o campo de texto e o campo de data devem ficar um embaixo do outro. Os botões de ação de cada tarefa devem ter tamanho mínimo de 44px para facilitar o toque. Teste com largura de 375px.

Claude: Vou adicionar responsividade ao app. Atualizando os estilos...

[Claude modifica o CSS do arquivo]

Alterações feitas:

  • Media query para telas abaixo de 480px
  • Inputs empilham verticalmente em mobile
  • Botões com min-width e min-height de 44px
  • Espaçamento ajustado para toque

Para testar: abra as DevTools (F12) e ative o modo responsivo.

Teste: aperte F12 no navegador, ative o modo responsivo (o ícone de celular/tablet), e veja seu app se adaptando. Mude para diferentes tamanhos de tela. iPhone, iPad, Android. Tudo deve funcionar.

Esse detalhe dos 44px não é aleatório. É uma diretriz de acessibilidade real (WCAG 2.2). O Claude Code conhece essas boas práticas e as aplica quando você pede. Você não precisa saber o número — precisa saber pedir "facilitar o toque em mobile".

Passo 6: Terceira iteração — barra de progresso

Vamos adicionar um toque final. Uma barra de progresso que mostra quantas tarefas você já completou:

Voce: Adicione uma barra de progresso no topo do app, abaixo do título. Ela deve mostrar a porcentagem de tarefas concluídas (ex: "3 de 5 concluídas - 60%"). A barra deve ser verde e preencher proporcionalmente. Se não houver tarefas, mostre "Nenhuma tarefa ainda". Atualize em tempo real ao marcar/desmarcar/adicionar/deletar tarefas.

Claude: Adicionando a barra de progresso...

[Claude atualiza o arquivo]

Barra de progresso adicionada com:

  • Texto mostrando "X de Y concluídas - Z%"
  • Barra visual com preenchimento proporcional em verde
  • Atualização automática em toda interação
  • Estado vazio: "Nenhuma tarefa ainda"

Atualize o navegador. A barra está lá. Adicione tarefas, complete algumas, veja o progresso subir. Delete uma concluída, veja o percentual mudar.

Três iterações. Três prompts em português. Seu app tem data de vencimento, layout responsivo e barra de progresso. Olhe o que você construiu e compare com o primeiro prompt. Cada iteração adicionou uma camada. É assim que software profissional é feito — camada por camada, nunca tudo de uma vez.

Quando algo não funciona

Vai acontecer. Talvez a barra de progresso não atualize direito. Talvez o layout quebre em alguma resolução. Não entre em pânico.

Diga ao Claude Code exatamente o que está errado:

Voce: A barra de progresso não atualiza quando eu deleto uma tarefa. Ela continua mostrando o número antigo.

Ou:

Voce: No celular, o botão de deletar está cortado na lateral direita. O texto fica "Del..." truncado.

Quanto mais específico o problema, melhor a correção. "Não está funcionando" é vago. "A data não fica vermelha quando está vencida" é preciso.

O Claude Code vai ler o código atual, identificar o bug e corrigir. Na maioria das vezes, um prompt resolve. Se não resolver, descreva o que ainda está errado. Iterar é o processo.

Uma dica valiosa: se o Claude Code fez algo diferente do que você queria, mas não está "errado" — é uma questão de gosto ou design — seja explícito sobre a sua preferência. "Quero o botão redondo, não quadrado." "Prefiro que a data fique abaixo do título da tarefa, não ao lado." Você é o designer. O Claude Code é o construtor.

Levando adiante

Seu app de tarefas está completo e funcional. Mas você pode continuar evoluindo. Aqui estão ideias para praticar:

Adicionar categorias:

"Adicione um campo de categoria (Trabalho, Pessoal, Estudos) com cores diferentes para cada uma. Permita filtrar por categoria."

Tema claro/escuro:

"Adicione um botão de toggle para alternar entre tema escuro e tema claro. Salve a preferência no localStorage."

Converter para React:

"Converta este app para React com Vite. Mantenha todas as funcionalidades. Separe em componentes: TaskForm, TaskList, TaskItem, ProgressBar, FilterBar."

Arrastar para reordenar:

"Permita reordenar as tarefas arrastando e soltando. A nova ordem deve ser salva no localStorage."

Colocar no ar: Você pode fazer deploy deste app para que qualquer pessoa acesse pelo celular ou computador, de qualquer lugar. Vamos cobrir isso em um artigo futuro sobre deploy.

Cada uma dessas ideias é um prompt. Um pedido, uma evolução. É assim que apps crescem. Não existe um momento mágico onde você "termina" de aprender. Cada funcionalidade nova é aprendizado. E o Claude Code está ali para construir junto com você.

O que você aprendeu

Pare um momento para perceber o que aconteceu nos últimos 30 minutos:

Você descreveu o que queria em linguagem natural. Sem aprender sintaxe, sem decorar comandos. Você disse o que o app deveria fazer, e ele foi construído.

Você iterou e refinou. O primeiro prompt criou a base. Cada prompt seguinte adicionou uma funcionalidade. É assim que software é desenvolvido no mundo real — em ciclos, não de uma vez.

Você testou e deu feedback. Abriu o navegador, clicou, verificou se funcionava. Quando algo não estava certo, descreveu o problema e pediu correção.

Você construiu um app de verdade. Não um exercício acadêmico. Um gerenciador de tarefas funcional com persistência de dados, layout responsivo e interface moderna. É um projeto que você pode mostrar para alguém.

E o mais importante: esse processo escala. O mesmo fluxo — descrever, iterar, testar — funciona para apps muito mais complexos. Uma landing page. Uma loja virtual. Um dashboard de dados. A diferença é o número de iterações, não o processo.

Seu próximo passo? Escolha uma das ideias da seção anterior e continue construindo. Ou pense em um app que você realmente precisa no seu dia a dia. E peça ao Claude Code para criar.

Você já sabe como.

Referências