Construa um Mini-App de Verdade: O Quadro de Ideias
De Página a App
Tudo o que você construiu até agora era uma página — ficava linda, reagia a cliques, mas esquecia tudo no momento em que você atualizava. Hoje isso muda. Você vai construir seu primeiro app de verdade: dados entram, dados aparecem e dados são lembrados.
Esse é todo o segredo dos apps, aliás. Três movimentos:
- Dados entram — um campo onde o usuário digita algo
- Dados aparecem — uma lista que se atualiza na tela
- Dados são lembrados — armazenamento, para que ainda estejam lá amanhã
Quando você faz vibe coding, você não descreve a fiação — você descreve o fluxo. Este é o tipo de prompt que constrói o projeto de hoje:
"Uma caixa onde eu digito uma ideia, um botão que a adiciona a uma lista abaixo, e a lista ainda deve estar lá quando eu voltar amanhã."
Essa única frase diz tudo à IA: ela precisa de um campo de entrada, um botão com um detector de clique, uma lista para acrescentar itens e localStorage para a parte do "amanhã". Você descreve o fluxo, a IA cuida de entrada + lista + armazenamento.
O app que você vai construir é um Quadro de Ideias — um lugar para capturar cada momento de "espera, eu poderia construir isso com IA" que você tiver daqui pra frente. Pode acreditar: depois deste curso, você vai ter muitos.
Instruções
Adicione um <input id="idea-input"> com um placeholder — é por aqui que as ideias entram
Dica: Tente: `<input id="idea-input" type="text" placeholder="I could build..." class="flex-1 bg-white/10 border border-white/20 rounded-xl px-4 py-3 text-sm">`
Adicione um <button id="add-btn"> ao lado do campo — o gatilho que adiciona uma ideia
Adicione um <ul id="idea-list"> vazio logo abaixo — é aqui que as ideias aparecem
No <script>, escute os cliques em #add-btn: crie um <li> com o valor do campo, acrescente-o à lista e depois limpe o campo
Faça o app lembrar: salve o array de ideias no localStorage("vca-ideas") a cada adição, e carregue + mostre as ideias salvas quando a página abrir
Seu Código
Descreva o que você quer construir para esta etapa e eu escrevo o código — depois clique em Aplicar para inseri-lo no seu editor. Esta etapa: Adicione um <input id="idea-input"> com um placeholder — é por aqui que as ideias entram