Guia para iniciantes · vibe codingBeginner guide · vibe coding

Aprenda as stacks por trás de sites. APIs. dashboards. lojas virtuais. sua próxima ideia.

Learn the stacks behind websites. APIs. dashboards. online stores. your next idea.

Entenda como apps de verdade são montados (front-end, back-end e banco de dados) para criar os seus com IA sabendo exatamente o que pedir. No final, você escolhe uma stack e recebe um prompt pronto. Understand how real apps are put together (front-end, back-end and database) so you can build yours with AI, knowing exactly what to ask for. At the end you pick a stack and get a ready-made prompt.

Começar o passo 1Start step 1 → Ir para o Gerador de PromptJump to the Prompt Builder
● Front-end● Back-end● Banco de dadosDatabase
Por que aprender issoWhy learn this

Vibe coding é conversar com a IA.Vibe coding is talking to the AI.

Você descreve o que quer e a IA escreve o código. Mas quem entende os conceitos pede melhor, percebe quando a IA erra e resolve os problemas muito mais rápido. Este guia ensina só o que você precisa para isso.You describe what you want and the AI writes the code. But people who understand the concepts ask better, notice when the AI is wrong, and fix problems much faster. This guide teaches just what you need for that.

💬Você descreveYou describe“Quero um sistema de estoque com login…”“I want an inventory app with login…”
🤖A IA escreve o códigoThe AI writes the codetelas, API, banco de dadosscreens, API, database
🧠Você entende e testaYou understand & test“isso é front ou back? por que deu 404?”“is this front or back? why a 404?”
🔁E ajustaAnd adjustum passo de cada vezone step at a time
A ideiaThe idea

Uma tech stack é só o conjunto de ferramentas que você empilha para criar um app. A tech stack is just the set of tools you pile up to build an app.

Cada camada tem uma função. O front-end desenha a tela, o back-end aplica as regras e o banco de dados guarda tudo. Escolha uma ferramenta por camada e pronto: você tem uma stack. Algumas famosas: Each layer does one job. The front-end draws the screen, the back-end applies the rules, and the database remembers everything. Pick one tool per layer and you have a stack. Here are some well-known ones:

O jeito MicrosoftThe Microsoft way

.NET Classic

Bootstrapcss
ASP.NET MVCfront
ASP.NET Web APIback
SQL Serverdb

Muito usada em empresas e sistemas corporativos. Tipagem forte de ponta a ponta.Common in companies and enterprise apps. Strongly typed from top to bottom.

JavaScript em tudoJavaScript everywhere

PERN

Reactfront
Node.js + Expressback
PostgreSQLdb

Uma linguagem só (JavaScript) no app inteiro. Queridinha das startups.One language (JavaScript) across the whole app. Popular with startups.

O clássico da webThe web classic

LAMP / Laravel

Bladefront
PHP + Laravelback
MySQLdb

Roda uma parte enorme da web. Hospedagem barata em qualquer lugar.Runs a huge part of the web. Cheap hosting everywhere.

Tudo inclusoBatteries included

Django

Django templatesfront
Python + Djangoback
PostgreSQLdb

Painel admin, login e ORM prontos. Ótimo quando o app é basicamente dados.Admin panel, auth and ORM built in. Great when the app is mostly data.

Como ler este guiaHow to read this guide

Siga as cores.Follow the colors.

Todas as páginas usam o mesmo código de cores, então você sempre sabe em qual camada está.Every page uses the same color code, so you always know which layer you're looking at.

Front-end

Roda no navegador. É tudo o que o usuário vê e clica.Runs in the browser. It's everything the user sees and clicks.

Back-end

Roda num servidor. Regras, segurança e a API.Runs on a server. Rules, security, and the API.

Banco de dadosDatabase

Guarda os dados em tabelas. Você conversa com ele em SQL.Stores the data in tables. You talk to it in SQL.

A jornadaThe journey

Oito passos, do zero ao seu primeiro projeto com IA. Eight steps, from zero to your first AI-built project.

01

IntroduçãoIntroduction

Vibe coding ao vivo: uma ideia vira app, e por que saber o básico muda o resultado.Vibe coding live: an idea becomes an app, and why knowing the basics changes the result.

→ 02

Front-end vs Back-end

A analogia do restaurante e a viagem de um clique, do navegador ao banco e de volta.The restaurant analogy and the journey of one click, from browser to database and back.

→ 03

Front-end

HTML, CSS e JavaScript, Bootstrap, React, Angular, MVC… o que é cada um e o que pedir à IA.HTML, CSS and JavaScript, Bootstrap, React, Angular, MVC… what each is and what to ask the AI.

→ 04

Back-end

O que um servidor faz, o que é uma API e as linguagens mais usadas.What a server does, what an API is, and the most used languages.

→ 05

Bancos de dadosDatabases

Tabelas, chaves, SQL em 4 palavras e o erro mais perigoso de todos.Tables, keys, SQL in 4 words, and the most dangerous mistake of all.

→ 06

Criando com IABuilding with AI

O passo a passo de um projeto completo (.NET ou JavaScript), com o prompt de cada etapa.The step-by-step of a complete project (.NET or JavaScript), with the prompt for each stage.

→ 07

GlossárioGlossary

As palavras que a IA vai usar com você, explicadas em uma frase.The words the AI will use with you, explained in one sentence.

→ 08

Gerador de PromptPrompt Builder

Escolha sua stack, descreva sua ideia e copie um prompt pronto para a IA.Pick your stack, describe your idea, and copy a ready-made prompt for the AI.

→

Pronto? Veja o vibe coding em ação. Ready? See vibe coding in action.

IntroduçãoIntroduction →
Passo 1 · IntroduçãoStep 1 · Introduction

Você tem a ideia.
A IA constrói.

You bring the idea.
AI builds it.

Vibe coding é criar um app conversando: você descreve o que quer, com as suas palavras, e a IA escreve o código. Escolha uma ideia e veja acontecer. Repare nas três partes que aparecem: todo app tem as mesmas. Vibe coding is building an app by talking: you describe what you want in your own words and the AI writes the code. Pick an idea and watch it happen. Notice the three parts that show up: every app has the same ones.

💬 Conversa com a IA💬 Chat with the AI
Front-end · a telathe screen
Back-end · as regrasthe rules
Banco de dados · os dadosDatabase · the data
✓ App pronto!✓ App ready!
Por que aprender o básicoWhy learn the basics

A IA é tão boa quanto o seu pedido.The AI is only as good as your request.

Mesma ideia, dois pedidos. As palavras coloridas são exatamente o que você vai aprender nas próximas páginas, e o número mostra em qual passo. Clique numa para espiar. Same idea, two requests. The colored words are exactly what you'll learn in the next pages, and the number shows which step. Click one to peek.

💬 Seu pedidoYour request

“faz um app de pedidos pra minha loja”“make an orders app for my store”

“Crie um app de pedidos para minha loja. Front-end em React com Bootstrap, back-end com uma API em Node.js e login, e um banco PostgreSQL com as tabelas Clientes e Pedidos. Antes do código, me mostre o plano.” “Build an orders app for my store. Front-end in React with Bootstrap, a back-end with an API in Node.js and login, and a PostgreSQL database with Customers and Orders tables. Before any code, show me the plan.”

🤖 O que a IA entregaWhat the AI delivers
  • ❓Tem que adivinhar o que você quis dizer com “pedidos”Has to guess what you meant by “orders”
  • 🎲Escolhe uma tecnologia qualquer, talvez uma que você nunca viuPicks any technology, maybe one you've never seen
  • 🔓Sem login: qualquer pessoa vê os pedidosNo login: anyone can see the orders
  • 💨Guarda tudo só no navegador: limpou, perdeuKeeps everything in the browser only: clear it and it's gone
  • 🗺️Primeiro um plano (telas, tabelas e endpoints) para você aprovarA plan first (screens, tables and endpoints) for you to approve
  • 🎯Exatamente as tecnologias que você pediuExactly the technologies you asked for
  • 🔐Login: só quem pode vê os pedidosLogin: only the right people see the orders
  • 🗄️Dados guardados de verdade, num banco de dadosData stored for real, in a database
Quanto a IA precisa chutarHow much the AI has to guess
Mito ou verdade?Myth or truth?

O que dizem sobre vibe coding.What people say about vibe coding.

Dê seu palpite e passe o mouse (ou toque) para ver a resposta.Make your guess, then hover (or tap) to see the answer.

🤔 Mito ou verdade?Myth or truth?

“Preciso saber programar antes de começar.”“I need to know how to code before I start.”

Mito ✕Myth ✕

A IA escreve o código. Você precisa entender os conceitos para pedir bem, e é isso que este guia ensina.The AI writes the code. You need the concepts to ask well, and that's what this guide teaches.

🤔 Mito ou verdade?Myth or truth?

“A IA acerta tudo de primeira.”“The AI gets everything right the first time.”

Mito ✕Myth ✕

Erros fazem parte. Cole a mensagem de erro completa, diga o que esperava, e a correção vem em minutos.Errors are part of it. Paste the full error message, say what you expected, and the fix comes in minutes.

🤔 Mito ou verdade?Myth or truth?

“Saber o nome das peças melhora o resultado.”“Knowing the names of the pieces improves the result.”

Verdade ✓True ✓

“API em Node.js com banco PostgreSQL” deixa a IA muito menos perdida que “faz um app”.“An API in Node.js with a PostgreSQL database” leaves the AI far less lost than “make an app”.

🤔 Mito ou verdade?Myth or truth?

“Dá para criar um sistema completo assim.”“You can build a complete system this way.”

Verdade ✓True ✓

Telas, API e banco de dados, um passo de cada vez. A receita completa está no passo 6.Screens, API and database, one step at a time. The full recipe is in step 6.

Como usar este guiaHow to use this guide

Três coisas para ficar de olho.Three things to watch for.

💬

Frases prontasReady-made phrases

Estas caixas mostram as palavras exatas para usar no seu pedido à IA.These boxes show the exact words to use when you ask the AI.

“back-end em Node.js com Express”“back-end in Node.js with Express”

👆

Demos para mexerDemos to play with

Sliders, botões e simulações em todas as páginas. Pode clicar à vontade: nada quebra.Sliders, buttons and simulations on every page. Click away: nothing breaks.

✅

Como conferirHow to check

No passo 6, cada etapa diz como saber se a IA acertou antes de seguir.In step 6, every stage tells you how to know the AI got it right before moving on.

Deu certo se: o app abre no navegador.It worked if: the app opens in the browser.

O que vem por aíWhat's coming

Sete paradas até o seu primeiro app.Seven stops to your first app.

Um trailer de cada página. Clique numa parada para pular direto para ela.A trailer of every page. Click a stop to jump straight to it.

02

Front-end vs Back-end

O que você vê e o que fica escondido: a divisão mais importante de todas.What you see and what stays hidden: the most important split of all.

🩻 raio-x de uma lojax-ray of a store🍝 o restaurantethe restaurant⚡ a vida de um cliquelife of a click
 03

Front-end

As três linguagens de toda tela e as ferramentas que deixam tudo bonito e interativo.The three languages of every screen and the tools that make it pretty and interactive.

🧱 uma tela em 3 camadasa screen in 3 layers🧩 React, Bootstrap, MVC…💬 o que dizer à IAwhat to tell the AI
 04

Back-end

O cérebro escondido: regras, login, segurança e a API.The hidden brain: rules, login, security and the API.

🖥️ um servidor ao vivoa live server📜 o cardápio da APIthe API menu🔐 checklist de segurançasecurity checklist
 05

Bancos de dadosDatabases

Onde os dados moram: tabelas, chaves e SQL em 4 palavras.Where the data lives: tables, keys and SQL in 4 words.

🔎 consultas ao vivolive queries🔗 JOIN interativointeractive JOIN😈 um ataque hacker simuladoa simulated hack
 06

Criando com IABuilding with AI

A receita completa: 7 etapas, cada uma com o prompt pronto para colar.The full recipe: 7 stages, each with a ready-to-paste prompt.

🔀 .NET ou JavaScript.NET or JavaScript📁 as pastas do projetothe project folders📋 7 prompts prontos7 ready prompts
 07

GlossárioGlossary

As palavras que a IA vai usar com você, cada uma explicada em uma frase.The words the AI will use with you, each explained in one sentence.

🔎 busca instantâneainstant search🎨 filtro por camadafilter by layer
 08

Gerador de PromptPrompt Builder

Escolha sua stack, descreva sua ideia e leve um prompt pronto para a IA.Pick your stack, describe your idea and take a ready-made prompt to the AI.

⚡ atalhos prontosready shortcuts🧩 peça por peçapiece by piece📋 copiar e colarcopy & paste

Agora vamos espiar atrás da tela. Now let's peek behind the screen.

Front-end vs Back-end →
Passo 2 · A grande divisãoStep 2 · The big split

O que você vê vs. o que você não vê.

What you see vs. what you don't.

Todo app tem dois lados. O front-end é a parte que aparece na tela. O back-end é a máquina por trás dela. Arraste a alça para espiar atrás da tela. Every app has two sides. The front-end is the part on the screen. The back-end is the machinery behind it. Drag the handle to look behind the screen.

GET /api/products200 OK · 14ms
{ "id": 1,
  "name": "Keyboard",
  "price": 49.90 }
auth ✓ · stock: 12SELECT … WHERE Id = 1
{ "id": 2,
  "name": "Mouse",
  "price": 19.90 }
auth ✓ · stock: 40SELECT … WHERE Id = 2
{ "id": 3,
  "name": "Monitor",
  "price": 189.00 }
auth ✓ · stock: 3SELECT … WHERE Id = 3

o preço é relido do banco no checkout: nunca confie no navegadorprice is re-read from the database at checkout: never trust the browser

Back-end · servidorserver
🛍️ ShopXProdutosProductsOfertasDealsCarrinhoCart · 2
⌨️
TecladoKeyboard$49.90
🖱️
Mouse$19.90
🖥️
Monitor$189.00
Front-end · navegadorbrowser
A analogia que faz tudo fazer sentidoThe analogy that makes it click

Um app é um restaurante.An app is a restaurant.

O cliente nunca entra na cozinha. Ele pede no salão, o garçom leva o pedido, a cozinha prepara com ingredientes da despensa e o prato volta para a mesa. Guests never walk into the kitchen. They order from the dining room, a waiter carries the order, the kitchen cooks it using ingredients from the pantry, and the plate comes back.

🍽️
SalãoDining roomFront-end

Cardápio, mesas e decoração. Tudo o que o cliente vê e toca.The menu, tables and decor. Everything guests see and touch.

🤵
GarçomWaiterAPI · HTTP

Leva os pedidos à cozinha e traz a comida de volta, seguindo regras fixas.Carries orders to the kitchen and brings the food back, following fixed rules.

👨‍🍳
CozinhaKitchenBack-end

Segue as receitas, confere o pedido e decide o que é permitido.Follows the recipes, checks the order, and decides what's allowed.

🧊
DespensaPantryBanco de dadosDatabase

Guarda cada ingrediente, etiquetado e organizado em prateleiras (tabelas).Stores every ingredient, labeled and organized on shelves (tables).

Veja acontecerWatch it happen

A vida de um clique.The life of one click.

Aperte play e acompanhe uma requisição do navegador até o banco de dados e de volta. O inspetor à direita mostra o código ou os dados reais em cada etapa. Press play and follow one request from the browser to the database and back. The inspector on the right shows the actual code or data at each step.

🖥️NavegadorBrowser
🌐Internet
⚙️Servidor APIAPI server
🗄️BancoDatabase
    inspector
    // ▶
    Lado a ladoSide by side

    Front-end vs back-end, num relance.Front-end vs back-end, at a glance.

    Front-endBack-end
    Roda emRuns onNo navegador do usuário (celular, notebook, tablet)The user's browser (phone, laptop, tablet)No seu servidor ou na nuvemYour server or the cloud
    Função principalMain jobMostrar dados, reagir a cliques, ser bonito e acessívelShow data, react to clicks, look good, be accessibleRegras de negócio, segurança, ler e gravar dadosBusiness rules, security, reading and writing data
    LinguagensLanguagesHTML, CSS, JavaScript / TypeScript (ou C# com Blazor)HTML, CSS, JavaScript / TypeScript (or C# with Blazor)C#, JavaScript (Node.js), Python, Java, PHP, Go…
    Quem lê o códigoWho can read the codeQualquer pessoa.Anyone. Botão direito → Exibir código-fonteRight-click → View SourceSó você.Only you. Ele nunca sai do servidorIt never leaves the server
    Conversa comTalks toO back-end, via HTTP (normalmente JSON)The back-end, over HTTP (usually JSON)O banco de dados (SQL) e outros serviços (e-mail, pagamentos)The database (SQL) and other services (email, payments)
    Tarefas típicasTypical tasksFormulários, layouts, animações, design responsivoForms, layouts, animations, responsive designLogin, pagamentos, validação, relatórios, e-mailsLogin, payments, validation, reports, emails
    Quando quebraWhen it breaksUm botão fica tortoA button looks wrongDados são perdidos ou vazamData is lost or leaked
    A regra de ouroThe golden rule

    Tudo no front-end é público.Everything in the front-end is public.

    O navegador baixa o código do seu front-end, então qualquer um pode ler ou alterar. Segredos e decisões importantes (preços, permissões) ficam no back-end. The browser downloads your front-end code, so anyone can read or change it. Secrets and important decisions (prices, permissions) belong on the back-end.

    ✕ Front-end · app.js

    ✓ Back-end · server.js

    Como eles conversamHow they talk

    Quatro verbos movem quase todo app.Four verbs run almost every app.

    O front-end envia requisições HTTP. Cada verbo corresponde a uma ação no banco (CRUD: Create, Read, Update, Delete). Passe o mouse ou toque num card para virá-lo. The front-end sends HTTP requests. Each verb maps to a database action (CRUD: Create, Read, Update, Delete). Hover or tap a card to flip it.

    GETLerRead
    SELECT

    “Me mostre os produtos.”“Show me the products.”

    200 OK
    POSTCriarCreate
    INSERT

    “Cadastre este produto novo.”“Add this new product.”

    201 Created
    PUTAtualizarUpdate
    UPDATE

    “Mude o preço deste produto.”“Change this product's price.”

    200 OK / 204
    DELETEApagarDelete
    DELETE

    “Remova o produto #3.”“Remove product #3.”

    204 No Content
    Duas formas de montar a páginaTwo ways to build the page

    Quem desenha o HTML: o servidor ou o navegador? Who draws the HTML: server or browser?

    Essa é a pergunta por trás de “MVC vs React”. Os dois são front-end, só montam a página em lugares diferentes. This is the question behind “MVC vs React”. Both are front-ends; they just build the page in different places.

    Renderização no servidor (SSR)Server-side rendering (SSR)

    A cozinha monta o pratoThe kitchen plates the food

    1. 1O navegador pede /productsBrowser asks for /products
    2. 2O servidor consulta o banco de dadosServer queries the database
    3. 3O servidor preenche um template HTML com os dadosServer fills an HTML template with the data
    4. 4O navegador mostra a página prontaBrowser shows the finished page
    ASP.NET MVC / RazorLaravel BladeDjango templates
    Renderização no cliente (SPA)Client-side rendering (SPA)

    O cliente monta o pratoThe guest assembles the dish

    1. 1O navegador baixa uma página quase vazia + um pacote JavaScriptBrowser downloads an almost empty page + a JavaScript bundle
    2. 2O JavaScript chama GET /api/productsJavaScript calls GET /api/products
    3. 3A API devolve dados em JSONThe API returns JSON data
    4. 4O JavaScript monta a página no navegadorJavaScript builds the page in the browser
    ReactAngularVueSvelteBlazor WASM
    💡
    Full-stack é quem faz os dois lados. Frameworks como Next.js, Nuxt e Blazor podem até misturar os dois modelos no mesmo app. Você verá exemplos completos em Projetos completos. Full-stack means doing both sides. Frameworks like Next.js, Nuxt and Blazor can even mix both models in one app. You'll see complete examples in Full Projects.
    Passo 3 · Front-endStep 3 · Front-end

    Tudo começa com três linguagens.

    It all starts with three languages.

    Todo front-end (React, Angular, Bootstrap…) no fim vira HTML, CSS e JavaScript no navegador. Clique nas camadas e veja cada uma entrar em ação. Every front-end (React, Angular, Bootstrap…) ends up as HTML, CSS and JavaScript in the browser. Click the layers and watch each one kick in.

    ⌨️

    Teclado mecânicoMechanical keyboard

    R$ 249,90 · Frete grátis$49.90 · Free shipping

    Sem JavaScript, o clique não faz nada.Without JavaScript, the click does nothing.

    HTML é a estrutura, como os ossos. Diz o que existe na página: um título, um preço, um botão.is the structure, like bones. It says what is on the page: a title, a price, a button.

    O que é o quêWhat is what

    As ferramentas não são todas rivais.The tools aren't all rivals.

    Elas cuidam de partes diferentes. Normalmente você escolhe uma para o visual e outra para o comportamento, ou deixa o servidor montar as páginas. They take care of different parts. Usually you pick one for the look and one for the behavior, or let the server build the pages.

    VisualLook

    Deixa bonitoMakes it pretty

    CSS puro(plain) Bootstrap Tailwind CSS
    ComportamentoBehavior

    Faz a tela reagirMakes the screen react

    JavaScript puro(plain) React Angular Vue
    Páginas prontas do servidorServer-made pages

    O servidor monta o HTMLThe server builds the HTML

    ASP.NET MVC Blazor Next.js Laravel Blade
    🧩
    Bootstrap + React? Pode! O Bootstrap só cuida do visual; o React cuida do comportamento. O mesmo vale para MVC + Bootstrap: o MVC monta as páginas e o Bootstrap deixa bonito. Bootstrap + React? Sure! Bootstrap only handles the look; React handles the behavior. Same with MVC + Bootstrap: MVC builds the pages and Bootstrap makes them pretty.
    As opções mais comunsThe most common options

    O que cada uma é, e o que dizer à IA.What each one is, and what to tell the AI.

    Você não precisa decorar nada disso. Só entender o suficiente para escolher e pedir com as palavras certas. You don't need to memorize any of this. Just understand enough to choose and ask with the right words.

    HTML + CSS + JS

    O básicoThe basics

    Sem framework. O navegador entende direto, nada para instalar.No framework. The browser understands it directly, nothing to install.

    Escolha se: é um site simples ou você está aprendendo.Pick it if: it's a simple site or you're learning.

    “site com HTML, CSS e JavaScript puro, sem framework”“a site with plain HTML, CSS and JavaScript, no framework”

    Bootstrap

    Visual prontoReady-made look

    Peças prontas: botões, cards, menus, formulários e um grid que se ajusta ao celular.Ready-made pieces: buttons, cards, menus, forms and a grid that adapts to phones.

    Escolha se: quer algo bonito e padrão rapidinho (painéis, sistemas internos).Pick it if: you want something clean and standard, fast (dashboards, internal tools).

    “use Bootstrap 5 para o layout”“use Bootstrap 5 for the layout”

    Tailwind CSS

    Visual sob medidaCustom look

    Classes pequenas que você combina para criar um design só seu.Small classes you combine to create a design of your own.

    Escolha se: quer um visual moderno e diferente do “padrão Bootstrap”.Pick it if: you want a modern look that doesn't feel “default Bootstrap”.

    “estilize com Tailwind CSS”“style it with Tailwind CSS”

    React

    O mais popularThe most popular

    Monta a tela com componentes (peças reutilizáveis) e atualiza sozinho quando os dados mudam.Builds the screen from components (reusable pieces) and updates itself when data changes.

    Escolha se: o app é bem interativo ou você quer a maior comunidade.Pick it if: the app is very interactive or you want the biggest community.

    “front-end em React com Vite”“front-end in React with Vite”

    Angular

    Completo e corporativoComplete & corporate

    Framework do Google com tudo incluso. Usa TypeScript. Muito comum em empresas que usam .NET.Google's framework with everything included. Uses TypeScript. Very common in .NET companies.

    Escolha se: é um sistema grande de empresa ou seu time já usa.Pick it if: it's a large company system or your team already uses it.

    “front-end em Angular”“front-end in Angular”

    Vue

    AmigávelFriendly

    Parecido com React, mas muitos acham mais simples de ler e de começar.Similar to React, but many find it simpler to read and to start with.

    Escolha se: quer uma SPA sem a complexidade de Angular.Pick it if: you want a SPA without Angular's complexity.

    “front-end em Vue 3 com Vite”“front-end in Vue 3 with Vite”

    ASP.NET MVC

    Páginas do servidor .NET.NET server pages

    O servidor .NET monta as páginas com templates Razor (HTML + C#). Já vem com Bootstrap.The .NET server builds the pages with Razor templates (HTML + C#). Comes with Bootstrap.

    Escolha se: a stack é .NET e o app é feito de listas e formulários.Pick it if: the stack is .NET and the app is lists and forms.

    “ASP.NET Core MVC com views Razor e Bootstrap”“ASP.NET Core MVC with Razor views and Bootstrap”

    Blazor

    C# no lugar do JavaScriptC# instead of JavaScript

    Telas interativas escritas em C#. Tudo numa linguagem só, da tela ao servidor.Interactive screens written in C#. One language from screen to server.

    Escolha se: você (ou o time) sabe C# e quer uma tela interativa.Pick it if: you (or the team) know C# and want an interactive UI.

    “Blazor Web App”“a Blazor Web App”

    Next.js

    React turbinadoReact, supercharged

    React com páginas, rotas e até um back-end simples no mesmo projeto.React with pages, routing and even a simple back-end in the same project.

    Escolha se: quer aparecer bem no Google (SEO) e ter um projeto só.Pick it if: you want good Google ranking (SEO) and a single project.

    “Next.js com App Router”“Next.js with the App Router”

    Na dúvida?Not sure?

    Qual escolher, em 10 segundos.Which one to pick, in 10 seconds.

    🌱

    Estou aprendendoI'm learning

    HTML + CSS + JavaScript, depois Bootstrap. Entenda a base antes do framework.HTML + CSS + JavaScript, then Bootstrap. Get the basics before a framework.

    🏢

    Sistema de empresaA company system

    ASP.NET MVC + Bootstrap (clássico) ou Angular (mais interativo).ASP.NET MVC + Bootstrap (classic) or Angular (more interactive).

    🚀

    Produto novo / startupNew product / startup

    React ou Next.js + Tailwind. É o que a IA mais conhece, então ela erra menos.React or Next.js + Tailwind. It's what AI knows best, so it makes fewer mistakes.

    ⚡

    Quero algo simplesI want it simple

    Vue + Bootstrap, ou até HTML puro. Menos peças, menos coisas para quebrar.Vue + Bootstrap, or even plain HTML. Fewer pieces, fewer things to break.

    Passo 4 · Back-endStep 4 · Back-end

    O cérebro que ninguém vê.

    The brain nobody sees.

    O back-end é um programa que fica rodando num servidor, esperando pedidos. Ele recebe cada pedido, confere as regras, fala com o banco de dados e responde. É isso que você vê no terminal ao lado. The back-end is a program that keeps running on a server, waiting for requests. It receives each one, checks the rules, talks to the database and answers. That's what you see in the terminal.

    terminal
    O que ele fazWhat it does

    Seis trabalhos de todo back-end.Six jobs of every back-end.

    🛣️

    API

    A lista de pedidos que ele aceita, tipo um cardápio: “listar produtos”, “criar pedido”…The list of requests it accepts, like a menu: “list products”, “create order”…

    📐

    Regras do negócioBusiness rules

    “Não vender sem estoque”, “frete grátis acima de R$ 200”. A lógica que faz o negócio funcionar.“Don't sell without stock”, “free shipping over $50”. The logic that makes the business work.

    🔐

    Login e segurançaLogin & security

    Quem é você (login) e o que você pode fazer (permissões).Who you are (login) and what you're allowed to do (permissions).

    🗄️

    DadosData

    Lê e grava no banco de dados. O front-end nunca fala com o banco direto.Reads and writes the database. The front-end never talks to the database directly.

    🔌

    IntegraçõesIntegrations

    Pagamentos, e-mail, WhatsApp, IA… usando chaves secretas que nunca vão para o navegador.Payments, email, messaging, AI… using secret keys that never reach the browser.

    ⏱️

    Tarefas em segundo planoBackground jobs

    Enviar e-mails, gerar relatórios, limpar dados antigos, sem fazer o usuário esperar.Send emails, build reports, clean old data, without making the user wait.

    A APIThe API

    A API é o cardápio do back-end.The API is the back-end's menu.

    Cada item do cardápio é um endpoint: um verbo + um endereço. O front-end só consegue pedir o que está no cardápio. Quando a IA diz “criei os endpoints”, é isto: Each menu item is an endpoint: a verb + an address. The front-end can only order what's on the menu. When the AI says “I created the endpoints”, this is it:

    GET/api/productsme dá a lista de produtosgive me the product list200 OK
    GET/api/products/7me dá o produto nº 7give me product #7200 ou 404 (não existe)200 or 404 (not found)
    POST/api/productscadastre este produto novosave this new product201 (criado) ou 400 (dados errados)201 (created) or 400 (bad data)
    PUT/api/products/7atualize o produto nº 7update product #7204
    DELETE/api/products/7apague o produto nº 7delete product #7204
    🔢
    Os números são o “resultado” da resposta. 2xx = deu certo · 4xx = o pedido veio errado (ex.: 401 sem login, 404 não achou) · 5xx = o servidor quebrou. Quando algo falhar, conte à IA qual número apareceu. The numbers are the answer's “result”. 2xx = success · 4xx = the request was wrong (e.g. 401 not logged in, 404 not found) · 5xx = the server broke. When something fails, tell the AI which number you got.
    Palavras que a IA vai usarWords the AI will use

    Por dentro, o pedido passa por camadas.Inside, the request passes through layers.

    A IA costuma separar o código assim, cada parte com uma função. Não precisa decorar: só saiba que esses nomes são normais e para que servem. AI usually splits the code like this, each part with one job. No need to memorize: just know these names are normal and what they're for.

    PedidoRequestPOST /api/orders
    Middlewareporteiro: login, logsdoorman: auth, logs
    Controllerrecebe e conferereceives & checks
    Serviceaplica as regrasapplies the rules
    Repository / ORMfala com o bancotalks to the DB
    Banco de dadosDatabaseguardastores it
    As linguagensThe languages

    Seis linguagens, o mesmo trabalho.Six languages, the same job.

    Todas fazem tudo o que você viu acima. A diferença é mais de gosto, de comunidade e de onde você quer trabalhar. Cada linguagem tem um framework famoso que faz o trabalho pesado. They all do everything you saw above. The difference is mostly taste, community and where you want to work. Each language has a famous framework that does the heavy lifting.

    C# · .NET

    Framework: ASP.NET Core

    Da Microsoft. Rápido, organizado e com ótimas ferramentas. Par perfeito do SQL Server.By Microsoft. Fast, organized and with great tooling. The perfect partner for SQL Server.

    Escolha se: quer trabalhar em empresas ou fazer sistemas grandes.Pick it if: you want to work at companies or build large systems.

    “back-end em ASP.NET Core Web API (C#)”“back-end in ASP.NET Core Web API (C#)”

    Node.js

    Framework: Express · NestJS

    JavaScript no servidor. A mesma linguagem no front e no back.JavaScript on the server. The same language on front and back.

    Escolha se: seu front é React/Vue e você quer uma linguagem só.Pick it if: your front is React/Vue and you want one language.

    “back-end em Node.js com Express”“back-end in Node.js with Express”

    Python

    Framework: FastAPI · Django

    A linguagem mais fácil de ler. Rainha dos dados e da IA.The easiest language to read. Queen of data and AI.

    Escolha se: o projeto mexe com dados, automação ou IA.Pick it if: the project deals with data, automation or AI.

    “back-end em Python com FastAPI”“back-end in Python with FastAPI”

    Java

    Framework: Spring Boot

    O veterano dos bancos e grandes corporações. Robusto, porém mais verboso.The veteran of banks and big corporations. Robust, but more verbose.

    Escolha se: a empresa já usa Java.Pick it if: the company already uses Java.

    “back-end em Java com Spring Boot”“back-end in Java with Spring Boot”

    PHP

    Framework: Laravel

    Roda boa parte da web (inclusive o WordPress). Hospedagem barata em qualquer lugar.Runs a big part of the web (WordPress included). Cheap hosting everywhere.

    Escolha se: quer publicar barato ou já tem hospedagem PHP.Pick it if: you want cheap hosting or already have PHP hosting.

    “back-end em PHP com Laravel”“back-end in PHP with Laravel”

    Go

    Framework: nem precisabarely needs one

    Do Google. Simples e muito rápido. Popular em infraestrutura e microsserviços.By Google. Simple and very fast. Popular for infrastructure and microservices.

    Escolha se: desempenho é prioridade. Para começar, prefira as outras.Pick it if: performance is the priority. To start, prefer the others.

    “back-end em Go usando net/http”“back-end in Go using net/http”

    Não pule esta parteDon't skip this

    Segurança: o que sempre pedir à IA.Security: what to always ask the AI for.

    A IA nem sempre faz isso sozinha. O Gerador de Prompt no final já inclui tudo.AI doesn't always do this on its own. The Prompt Builder at the end already includes all of it.

    • Validar tudo que o usuário envia, no servidor.Validate everything the user sends, on the server.
    • Consultas com parâmetros (nunca colar texto do usuário dentro do SQL).Parameterized queries (never glue user text into SQL).
    • Senhas com hash, nunca salvas como texto.Hashed passwords, never stored as plain text.
    • Senhas e chaves fora do código, em variáveis de ambiente.Passwords and keys out of the code, in environment variables.
    • HTTPS e login obrigatório nas telas e endpoints privados.HTTPS and required login on private screens and endpoints.
    • Mensagens de erro genéricas para o usuário (detalhes só no log).Generic error messages for users (details only in the log).
    Passo 5 · Bancos de dados SQLStep 5 · SQL databases

    Onde os dados moram.

    Where the data lives.

    Um banco de dados guarda tudo em tabelas, como planilhas com regras. Você pergunta em SQL (uma linguagem quase em inglês) e ele responde na hora. Veja ao lado: cada pergunta filtra linhas diferentes. A database stores everything in tables, like spreadsheets with rules. You ask in SQL (a language that reads almost like English) and it answers instantly. Watch: each question filters different rows.

    Anatomia de uma tabelaAnatomy of a table

    Cinco palavras que você vai ouvir sempre.Five words you'll hear all the time.

    Clique em cada palavra.Click each word.

    Products
    🔑 IdNamePrice🔗 CategoryId
    1Keyboard49.9010
    2Mouse19.9010
    3Monitor189.0020
    Categories
    🔑 IdName
    10Peripherals
    20Monitors

    Tabela: guarda um tipo de coisa (produtos, clientes, pedidos). Parece uma planilha, mas com regras rígidas.Table: stores one kind of thing (products, customers, orders). Looks like a spreadsheet, but with strict rules.

    Coluna: uma informação com tipo fixo. Name é sempre texto, Price é sempre número.Column: one piece of info with a fixed type. Name is always text, Price is always a number.

    Linha (ou registro): um item de verdade, como o produto “Mouse”.Row (or record): one real item, like the product “Mouse”.

    Chave primária: o “CPF” de cada linha. Um número único que nunca se repete.Primary key: each row's “ID card”. A unique number that never repeats.

    Chave estrangeira: aponta para a chave primária de outra tabela. CategoryId = 10 quer dizer “Peripherals”. É assim que as tabelas se conectam.Foreign key: points to another table's primary key. CategoryId = 10 means “Peripherals”. That's how tables connect.

    RelacionamentosRelationships

    Por isso se chama relacional.That's why it's called relational.

    Um cliente tem vários pedidos. Um pedido tem vários itens. Cada item aponta para um produto. Cada informação fica guardada em um lugar só. Quando você pedir um projeto à IA, descreva essas relações com palavras simples assim.One customer has many orders. One order has many items. Each item points to one product. Each piece of info is stored in one place only. When you ask the AI for a project, describe these relations in simple words like that.

    Customers
    • 🔑 Id
    • Name
    • Email
    1N
    Orders
    • 🔑 Id
    • 🔗 CustomerId
    • CreatedAt
    1N
    OrderItems
    • 🔑 Id
    • 🔗 OrderId
    • 🔗 ProductId
    • Quantity
    N1
    Products
    • 🔑 Id
    • Name
    • Price
    SQL em 4 palavrasSQL in 4 words

    Quase tudo é ler, criar, mudar ou apagar.Almost everything is read, create, change or delete.

    A IA vai escrever o SQL por você, mas bater o olho e entender o que ele faz é um superpoder.The AI will write the SQL for you, but reading it at a glance and knowing what it does is a superpower.

    SELECT

    LerRead

    SELECT * FROM Products WHERE Price < 50“me mostre os produtos abaixo de 50”“show me products under 50”
    INSERT

    CriarCreate

    INSERT INTO Products (Name, Price) VALUES ('Webcam', 59.90)“cadastre a Webcam”“add the Webcam”
    UPDATE

    MudarChange

    UPDATE Products SET Price = 44.90 WHERE Id = 1“mude o preço do produto 1”“change product 1's price”
    DELETE

    ApagarDelete

    DELETE FROM Products WHERE Id = 3“apague o produto 3” (sem WHERE, apaga tudo!)“delete product 3” (without WHERE, it deletes everything!)
    Juntando tabelasCombining tables

    JOIN: a mágica das chaves.JOIN: the magic of keys.

    Como os dados estão separados, o SQL junta as tabelas usando as chaves. Troque entre os dois tipos e veja quem entra no resultado.Since data is split up, SQL combines tables using the keys. Switch between the two kinds and watch who makes it into the result.

    Customers
    IdName
    Orders
    IdCustomerIdTotal
    ResultadoResult
    NameOrderIdTotal

    INNER JOIN: só quem tem par dos dois lados. O Bruno não tem pedidos, então fica de fora.INNER JOIN: only rows that match on both sides. Bruno has no orders, so he's left out.

    LEFT JOIN: todo mundo da esquerda (Customers), mesmo sem par. O que falta vira NULL (vazio).LEFT JOIN: everyone from the left (Customers), even without a match. Missing values become NULL (empty).

    join.sql
    Os bancosThe engines

    Quatro bancos SQL. Todos falam SQL.Four SQL databases. All speak SQL.

    O que você aprende em um serve para os outros. Escolha pelo resto da sua stack.What you learn in one works in the others. Choose based on the rest of your stack.

    SQL Server

    Microsoft

    Par perfeito do .NET e da nuvem Azure. Tem versões gratuitas (Express e Developer).The perfect partner for .NET and the Azure cloud. Has free editions (Express and Developer).

    “banco SQL Server com Entity Framework Core”“SQL Server database with Entity Framework Core”

    PostgreSQL

    Gratuito · open sourceFree · open source

    Poderoso e gratuito. O favorito com Node.js e Python. Existe em toda nuvem.Powerful and free. The favorite with Node.js and Python. Available on every cloud.

    “banco PostgreSQL”“a PostgreSQL database”

    MySQL

    Gratuito · clássicoFree · classic

    O clássico da web e do PHP. Está em qualquer hospedagem barata.The web and PHP classic. Available on any cheap hosting.

    “banco MySQL”“a MySQL database”

    SQLite

    Um arquivo sóJust one file

    O banco inteiro é um arquivo. Nada para instalar. Ótimo para aprender e para protótipos.The whole database is one file. Nothing to install. Great for learning and prototypes.

    “use SQLite para começar”“use SQLite to start”

    O erro mais perigosoThe most dangerous mistake

    SQL injection, ao vivo.SQL injection, live.

    Um hacker digita um texto “especial” num campo de busca. Aperte o botão do ataque e compare: código que cola o texto dentro do SQL vs. código que usa parâmetros. É por isso que você sempre pede parâmetros à IA.A hacker types a “special” text into a search box. Press the attack button and compare: code that glues the text into the SQL vs. code that uses parameters. That's why you always ask the AI for parameters.

    ✕ Colando o textoGluing the text 
    
            
    
          
    
          
    
            ✓ Com parâmetrosWith parameters
            
    SELECT * FROM Users WHERE Name = @name
@name = 
    
            
    
          
    
        
    
      
    
    
    
  
    

  
  
    
    
    
      
    
        
    Mais palavras que a IA vai usarMore words the AI will use
    
        
    ORM, migration, índice e transação.ORM, migration, index and transaction.
    
      
    
      
    
        
    Seu código (C#)Your code (C#)db.Products.Where(p => p.Price < 50)
    
        
        
    SQL geradoGenerated SQLSELECT * FROM Products WHERE Price < 50
    
      
    
      
    
        
    🔁
    ORM
    Um tradutor: você escreve na linguagem do back-end e ele gera o SQL. Ex.: Entity Framework (C#), Prisma (Node), SQLAlchemy (Python).A translator: you write in the back-end's language and it generates the SQL. E.g. Entity Framework (C#), Prisma (Node), SQLAlchemy (Python).
    
        
    🧱
    Migration
    Um “histórico de obras” do banco. Cada mudança nas tabelas vira um arquivo, e o comando de update aplica tudo.A “renovation log” for the database. Each table change becomes a file, and the update command applies them all.
    
        
    📑
    ÍndiceIndex
    Igual ao índice de um livro: o banco pula direto para a página certa em vez de ler tudo. Deixa as buscas rápidas.Like a book's index: the database jumps straight to the right page instead of reading everything. Makes searches fast.
    
        
    ⚖️
    TransaçãoTransaction
    Tudo ou nada. Numa venda, “baixar o estoque” e “criar o pedido” acontecem juntos, ou nenhum acontece.All or nothing. In a sale, “lower the stock” and “create the order” happen together, or neither does.
    
      
    
    
    
  
    

    



    

  
    
    
    
      
    
        
    Passo 6 · Criando com IAStep 6 · Building with AI
    
        
    Um projeto completo, conversando com a IA.
    
        
    A complete project, by talking to the AI.
    
        
    
          Esta é a receita que funciona para qualquer projeto: 7 etapas, cada uma com o prompt para colar na IA e como saber se deu certo. Escolha uma das duas stacks de exemplo.
          This recipe works for any project: 7 stages, each with the prompt to paste into the AI and how to know it worked. Pick one of the two example stacks.
        
    
      
    
    
    
  
    

  
    
    
    
      
    
        
        
      
    

      
      
    
        
    🖥️NavegadorBrowsero usuáriothe user
    
        
        
    
          
          MVC + BootstrapReact + Bootstrapfront-end
        
    
        
        
    
          
          ASP.NET Web APINode + Expressback-end (API)
        
    
        
        
    
          
          SQL ServerPostgreSQLbanco de dadosdatabase
        
    
      
    

      
      
    
        
    
          
    Como o projeto fica nas pastas.What the project looks like in folders.
    
          
    A IA vai criar algo assim. Saber o que é cada pasta ajuda você a encontrar as coisas e a pedir mudanças no lugar certo.The AI will create something like this. Knowing what each folder is helps you find things and ask for changes in the right place.
    
        
    
        
    

    Shop/
├─ Shop.sln               ← abre tudo junto
├─ Shop.Api/             ← back-end (API)
│  ├─ Controllers/        ← os endpoints
│  ├─ Models/             ← Product, Category
│  ├─ Data/               ← conexão com o banco
│  └─ Migrations/         ← histórico do banco
└─ Shop.Web/             ← front-end (MVC)
   ├─ Controllers/        ← qual tela abrir
   ├─ Views/              ← as telas (Razor)
   └─ wwwroot/            ← CSS, JS, Bootstrap
    

    Shop/
├─ Shop.sln               ← opens everything
├─ Shop.Api/             ← back-end (API)
│  ├─ Controllers/        ← the endpoints
│  ├─ Models/             ← Product, Category
│  ├─ Data/               ← database connection
│  └─ Migrations/         ← database history
└─ Shop.Web/             ← front-end (MVC)
   ├─ Controllers/        ← which screen to open
   ├─ Views/              ← the screens (Razor)
   └─ wwwroot/            ← CSS, JS, Bootstrap
    

    shop/
├─ shop-api/             ← back-end (Express)
│  ├─ server.js           ← os endpoints
│  ├─ db.js               ← conexão com o banco
│  ├─ schema.sql          ← as tabelas
│  └─ .env                ← senhas (nunca no Git!)
└─ shop-web/             ← front-end (React)
   ├─ src/App.jsx         ← a tela principal
   ├─ src/components/     ← peças da tela
   └─ package.json        ← dependências
    

    shop/
├─ shop-api/             ← back-end (Express)
│  ├─ server.js           ← the endpoints
│  ├─ db.js               ← database connection
│  ├─ schema.sql          ← the tables
│  └─ .env                ← passwords (never in Git!)
└─ shop-web/             ← front-end (React)
   ├─ src/App.jsx         ← the main screen
   ├─ src/components/     ← screen pieces
   └─ package.json        ← dependencies
    
        
    
      
    

      
      
    
        
    A receitaThe recipe
    
        
    Sete etapas, um prompt por vez.Seven stages, one prompt at a time.
    
        
    O exemplo é um sistema de produtos de uma loja. Troque pelo seu projeto: a ordem das etapas é sempre a mesma.The example is a store's product system. Swap in your own project: the order of the stages never changes.
    
      
    

      
    
        
    1
          
    Peça um plano, não códigoAsk for a plan, not code
    
          
    Antes de qualquer código, peça o plano: telas, tabelas e endpoints. Mudar o plano agora é grátis; mudar depois dá trabalho.Before any code, ask for the plan: screens, tables and endpoints. Changing the plan now is free; changing it later is work.
    
          
    
            
    💬 Prompt
    

    Quero criar um sistema para controlar os produtos de uma loja: cadastrar, listar, editar e excluir produtos e categorias.
Antes de escrever qualquer código, me devolva:
1) as telas do sistema,
2) as tabelas do banco, com colunas e relacionamentos,
3) os endpoints da API.
Stack: {all}.
Sou iniciante: explique em linguagem simples.
    

    I want to build a system to manage a store's products: create, list, edit and delete products and categories.
Before writing any code, give me:
1) the app's screens,
2) the database tables, with columns and relationships,
3) the API endpoints.
Stack: {all}.
I'm a beginner: explain in simple language.
    
          
    
          
    Deu certo se: você entende o plano e ele tem tudo que você quer. Se não, peça ajustes agora.It worked if: you understand the plan and it has everything you want. If not, ask for changes now.
    
        
    

        
    2
          
    Crie o esqueleto do projetoCreate the project skeleton
    
          
    A IA te passa os comandos para criar as pastas e instalar o necessário. Você cola os comandos no terminal, um por vez.The AI gives you the commands to create the folders and install what's needed. You paste them into the terminal, one at a time.
    
          
    
            
    💬 Prompt
    

    Com base no plano, me passe o passo a passo para criar a estrutura do projeto com {all}:
o que instalar no computador, os comandos exatos para o terminal e a estrutura de pastas final.
Ainda sem funcionalidades: só quero ver o projeto rodando.
    

    Based on the plan, walk me through creating the project structure with {all}:
what to install on my computer, the exact terminal commands, and the final folder structure.
No features yet: I just want to see the project running.
    
          
    
          
    Deu certo se: os projetos rodam (mesmo vazios) e abrem no navegador em localhost.It worked if: the projects run (even empty) and open in the browser at localhost.
    
        
    

        
    3
          
    Monte o banco de dadosBuild the database
    
          
    Os dados são a fundação: comece pelas tabelas. Peça dados de exemplo para já ter algo na tela depois.Data is the foundation: start with the tables. Ask for sample data so you'll have something on screen later.
    
          
    
            
    💬 Prompt
    

    Crie o banco de dados {db} com as tabelas Products e Categories do plano:
chaves primárias, a chave estrangeira entre elas e alguns dados de exemplo.
{dbHow} Explique também como conferir se as tabelas foram criadas.
    

    Create the {db} database with the Products and Categories tables from the plan:
primary keys, the foreign key between them, and some sample data.
{dbHow} Also explain how to check that the tables were created.
    
          
    
          
    Deu certo se: você abre o banco (SSMS no SQL Server, pgAdmin no PostgreSQL) e vê as tabelas com os dados.It worked if: you open the database (SSMS for SQL Server, pgAdmin for PostgreSQL) and see the tables with data.
    
        
    

        
    4
          
    Crie a API (back-end)Build the API (back-end)
    
          
    Agora o “cardápio”: os endpoints que o front-end vai chamar. Peça segurança desde já.Now the “menu”: the endpoints the front-end will call. Ask for security from the start.
    
          
    
            
    💬 Prompt
    

    Crie a API em {back} com endpoints para listar, buscar, criar, editar e excluir produtos.
Valide os dados recebidos, use consultas parametrizadas, retorne os códigos HTTP corretos
e deixe a conexão com o banco numa variável de ambiente. Mostre como testar cada endpoint.
    

    Build the API in {back} with endpoints to list, get, create, edit and delete products.
Validate incoming data, use parameterized queries, return the correct HTTP status codes
and keep the database connection in an environment variable. Show me how to test each endpoint.
    
          
    
          
    Deu certo se: abrir /api/products no navegador mostra os produtos em JSON.It worked if: opening /api/products in the browser shows the products as JSON.
    
        
    

        
    5
          
    Crie as telas (front-end)Build the screens (front-end)
    
          
    Por último, a parte visível. As telas só conversam com a API, nunca direto com o banco.Finally, the visible part. Screens only talk to the API, never directly to the database.
    
          
    
            
    💬 Prompt
    

    Crie as telas em {front}:
- lista de produtos em cards, com busca pelo nome;
- formulário de cadastro e edição, com validação;
- botão de excluir com confirmação.
As telas devem usar a API que já existe. Layout responsivo (funcionar no celular).
    

    Build the screens in {front}:
- a product list with cards and search by name;
- a create/edit form with validation;
- a delete button with confirmation.
The screens must use the existing API. Responsive layout (works on phones).
    
          
    
          
    Deu certo se: você vê os produtos na tela, cadastra um novo e ele aparece na lista.It worked if: you see the products on screen, add a new one, and it shows up in the list.
    
        
    

        
    6
          
    Teste e corrija os errosTest and fix errors
    
          
    Erros vão acontecer, e tudo bem. O segredo é dar contexto: o que você fez, o que esperava e a mensagem de erro completa.Errors will happen, and that's fine. The secret is context: what you did, what you expected, and the full error message.
    
          
    
            
    💬 Prompt
    

    Ao clicar em "Salvar" no cadastro de produto, apareceu este erro:
[cole aqui a mensagem de erro COMPLETA, do navegador ou do terminal]
Eu esperava que o produto fosse salvo e aparecesse na lista.
Explique a causa em palavras simples e me mostre a correção.
    

    When I click "Save" on the product form, this error appears:
[paste the FULL error message here, from the browser or the terminal]
I expected the product to be saved and show up in the list.
Explain the cause in simple words and show me the fix.
    
          
    
          
    Deu certo se: o erro sumiu e você entendeu por que ele aconteceu.It worked if: the error is gone and you understand why it happened.
    
        
    

        
    7
          
    Coloque no ar (deploy)Put it online (deploy)
    
          
    Publicar é tirar o projeto do seu computador e colocar num servidor com um link público.Deploying means moving the project off your computer onto a server with a public link.
    
          
    
            
    💬 Prompt
    

    Quero colocar este projeto no ar ({all}).
Me dê um passo a passo para publicar o front-end, a API e o banco na nuvem,
com opções gratuitas ou baratas, e mostre como guardar senhas em variáveis de ambiente.
    

    I want to put this project online ({all}).
Give me a step-by-step guide to deploy the front-end, the API and the database to the cloud,
with free or cheap options, and show me how to keep passwords in environment variables.
    
          
    
          
    Deu certo se: você abre o sistema por um link público, até no celular.It worked if: you open the app from a public link, even on your phone.
    
        
    
      
    
    
    
  
    

  
  
    
    
    
      
    
        
    Regras de ouroGolden rules
    
        
    Seis hábitos de quem faz vibe coding bem.Six habits of people who vibe code well.
    
      
    
      
    
        
    🐢
    Um passo de cada vezOne step at a time
    Peça uma funcionalidade por vez e teste antes da próxima. Pedidos gigantes geram erros gigantes.Ask for one feature at a time and test before the next. Giant requests create giant bugs.
    
        
    📋
    Cole o erro inteiroPaste the whole error
    A mensagem completa + o que você estava fazendo. “Não funciona” não ajuda ninguém.The full message + what you were doing. “It doesn't work” helps nobody.
    
        
    🤔
    Peça explicaçõesAsk for explanations
    “Explique esse código como se eu fosse iniciante.” Você aprende enquanto constrói.“Explain this code like I'm a beginner.” You learn while you build.
    
        
    💾
    Salve versões com GitSave versions with Git
    Faça um commit sempre que algo funcionar. Se a IA quebrar tudo, você volta no tempo.Commit every time something works. If the AI breaks everything, you go back in time.
    
        
    🔑
    Nunca cole senhasNever paste passwords
    Nem no chat, nem no código. Senhas e chaves vão em variáveis de ambiente.Not in the chat, not in the code. Passwords and keys go in environment variables.
    
        
    👀
    Veja o que mudouCheck what changed
    Pergunte: “quais arquivos você alterou e por quê?”. Assim nada muda escondido.Ask: “which files did you change and why?”. That way nothing changes behind your back.
    
      
    
      
    
        Montar o prompt do meu projetoBuild the prompt for my project →
      
    
    
    
  
    

    



    

  
    
    
    
      
    
        
    Passo 7 · GlossárioStep 7 · Glossary
    
        
    As palavras que a IA vai usar com você.
    
        
    The words the AI will use with you.
    
        
    Cada uma explicada em uma frase. Busque ou filtre por camada.Each one explained in one sentence. Search or filter by layer.
    
      
    
    
    
  
    

  
    
    
    
      
    
        
        
    
          
          
          
          
          
        
    
      
    
      
    
        
    Framework
    Uma base pronta com regras e ferramentas para construir apps mais rápido (React, Angular, ASP.NET).A ready-made foundation with rules and tools to build apps faster (React, Angular, ASP.NET).
    
        
    BibliotecaLibrary
    Código pronto que você chama quando precisa (Bootstrap, jQuery). Mais simples que um framework.Ready-made code you call when you need it (Bootstrap, jQuery). Simpler than a framework.
    
        
    ComponenteComponent
    Uma peça reutilizável da tela: um botão, um card, um menu.A reusable piece of the screen: a button, a card, a menu.
    
        
    SPA
    Single Page App: o app carrega uma vez e troca de tela sem recarregar a página (React, Angular, Vue).Single Page App: loads once and switches screens without reloading the page (React, Angular, Vue).
    
        
    ResponsivoResponsive
    Layout que se ajusta sozinho ao tamanho da tela: celular, tablet ou computador.A layout that adapts to the screen size: phone, tablet or desktop.
    
        
    Build
    O processo que transforma seu código em arquivos otimizados, prontos para publicar.The process that turns your code into optimized files, ready to publish.
    
        
    API
    O “cardápio” do back-end: a lista de pedidos que ele aceita e o formato das respostas.The back-end's “menu”: the list of requests it accepts and the format of the answers.
    
        
    Endpoint
    Um item do cardápio da API: um verbo + um endereço, como GET /api/products.One item on the API menu: a verb + an address, like GET /api/products.
    
        
    JSON
    O formato de texto que front e back usam para trocar dados: { "name": "Mouse" }.The text format front and back use to exchange data: { "name": "Mouse" }.
    
        
    HTTP / HTTPS
    O “idioma” da web para pedidos e respostas. O S significa seguro (criptografado).The web's “language” for requests and responses. The S means secure (encrypted).
    
        
    Status code
    O número que resume a resposta: 200 deu certo, 404 não encontrado, 500 erro no servidor.The number that sums up the answer: 200 success, 404 not found, 500 server error.
    
        
    AutenticaçãoAuthentication
    Descobrir quem você é (login com e-mail e senha).Finding out who you are (login with email and password).
    
        
    AutorizaçãoAuthorization
    Decidir o que você pode fazer (só admin pode excluir).Deciding what you're allowed to do (only admins can delete).
    
        
    Token (JWT)
    Um “crachá” digital que prova que você fez login, enviado a cada pedido.A digital “badge” that proves you logged in, sent with every request.
    
        
    CORS
    Regra do navegador que define quais sites podem chamar sua API. Causa muitos erros no início!A browser rule defining which sites may call your API. Causes lots of early errors!
    
        
    Variável de ambienteEnvironment variable
    Configuração guardada fora do código, como senhas do banco e chaves de API.Settings kept outside the code, like database passwords and API keys.
    
        
    Middleware
    Um “porteiro” por onde todo pedido passa: confere login, registra logs, trata erros.A “doorman” every request passes through: checks login, writes logs, handles errors.
    
        
    SQL
    A linguagem para conversar com bancos de dados relacionais.The language for talking to relational databases.
    
        
    CRUD
    Create, Read, Update, Delete: criar, ler, atualizar e apagar. A base de quase todo sistema.Create, Read, Update, Delete. The base of almost every system.
    
        
    Query
    Uma pergunta (ou comando) enviada ao banco de dados.A question (or command) sent to the database.
    
        
    ORM
    Tradutor que transforma código da sua linguagem em SQL (Entity Framework, Prisma).A translator that turns your language's code into SQL (Entity Framework, Prisma).
    
        
    Migration
    Um arquivo que registra uma mudança nas tabelas, para aplicar em qualquer banco.A file that records a table change, so it can be applied to any database.
    
        
    Seed
    Dados de exemplo colocados no banco para testar.Sample data put in the database for testing.
    
        
    Connection string
    O “endereço + senha” do banco de dados. Deve ficar numa variável de ambiente.The database's “address + password”. It belongs in an environment variable.
    
        
    Terminal
    A tela preta onde você digita comandos (instalar, rodar, publicar).The black window where you type commands (install, run, publish).
    
        
    Localhost
    “Este computador”. localhost:3000 é o seu app rodando só na sua máquina.“This computer”. localhost:3000 is your app running only on your machine.
    
        
    PortaPort
    O número depois dos dois pontos (:5000). Cada programa ocupa uma porta.The number after the colon (:5000). Each program uses one port.
    
        
    PacotePackage
    Código de terceiros que você instala: npm (JavaScript), NuGet (.NET), pip (Python).Third-party code you install: npm (JavaScript), NuGet (.NET), pip (Python).
    
        
    Git / Commit
    Git salva versões do seu código; cada commit é um “ponto de salvamento” com descrição.Git saves versions of your code; each commit is a “save point” with a description.
    
        
    RepositórioRepository
    A pasta do projeto controlada pelo Git, geralmente guardada no GitHub.The project folder tracked by Git, usually stored on GitHub.
    
        
    Deploy
    Publicar: colocar o app num servidor para qualquer pessoa acessar.Publishing: putting the app on a server so anyone can access it.
    
        
    Docker
    Empacota o app com tudo que ele precisa, para rodar igual em qualquer máquina.Packages the app with everything it needs, so it runs the same on any machine.
    
        
    Stack trace
    O “rastro” de um erro: a lista de arquivos e linhas onde ele aconteceu. Cole inteiro para a IA!An error's “trail”: the list of files and lines where it happened. Paste it all to the AI!
    
      
    
      
    
    
  
    

    



    

  
    
    
    
      
    
        
    Passo 8 · Gerador de PromptStep 8 · Prompt Builder
    
        
    Monte sua stack. Copie o prompt.
    
        
    Pick your stack. Copy the prompt.
    
        
    Escolha as peças (ou um atalho pronto), descreva sua ideia no final e cole o prompt na sua IA favorita.Choose the pieces (or a ready-made shortcut), describe your idea at the end, and paste the prompt into your favorite AI.
    
      
    
    
    
  
    

  
    
    
    
      
    
        
    
          AtalhosShortcuts
          
    
        
    
        
    
        
    
          
    09 Nome do projetoProject name (opcional)(optional)
    
          
        
    
        
    
          
    10 Descreva o que você querDescribe what you want
    
          
    Quem vai usar? Quais telas? Quais dados? Quanto mais detalhe, melhor o resultado.Who will use it? Which screens? What data? The more detail, the better the result.