Como isso se encaixa no seu app
Agora sobreponha o quadro inteiro a um app criado com vibe coding, porque cada parte que você vai construir vive de um lado da dança:
- O é tudo que roda no navegador — os botões, formulários e layout que o usuário vê e clica. É o cliente. Ele majoritariamente envia requests e exibe responses.
- O é seu código rodando num servidor — a lógica que decide o que fazer com uma request, conversa com o banco de dados, e monta a response. É o servidor.
Aqui está toda a jornada de cadastro numa imagem só — cada palavra em negrito do capítulo sentada onde pertence:
FRONTEND (navegador = cliente) BACKEND (servidor)
┌────────────────────────┐ ┌────────────────────────┐
│ usuário clica "Cadastrar"│ POST /signup │ cria a conta │
│ │ ──────────────▶ │ define um cookie │
│ │ via HTTPS │ │
│ mostra tela de boas-vindas◀│ ───────────── │ ◀── manda de volta 200 OK│
└────────────────────────┘ └────────────────────────┘
Uma interação real costura tudo isso junto. Um usuário clica em "Cadastrar" (frontend). O navegador manda uma request POST via para um path como /api/signup, carregando os dados do formulário. Seu backend a recebe, cria a conta, define um cookie para o usuário continuar logado, e manda de volta um 200. O frontend vê o sucesso e mostra uma tela de boas-vindas. Toda palavra em negrito ali é algo que você acabou de aprender — e essa é a forma inteira de quase tudo que você vai construir.
Você não precisa guardar tudo isso de cabeça de uma vez. Mas quando um capítulo mais à frente disser "a request chegou no servidor mas voltou 500", ou "define este header", ou "esta rota processa o POST", você agora vai saber exatamente para qual parte da dança isso aponta. Esse modelo mental é o verdadeiro pré-requisito — e você já tem ele.