Desenvolvimento Web
Fullstack do Zero

Antes de escrever código, um programador pensa. O raciocinio é sempre o mesmo:

Exemplo: API de Lista de Produtos

Verificar instalação

$ node --version    # v20.x.x
$ npm --version     # 10.x.x
$ git --version     # git version 2.x.x

Extensões do VS Code

Git é o sistema de controle de versão que todo programador usa. Ele salva "fotos" do seu código ao longo do tempo. Se algo quebrar, você volta atrás.

3.1 Instalação e Configuração

# Verificar se já tem
git --version

# Configurar seu nome e email (uma vez só)
git config --global user.name "Seu Nome"
git config --global user.email "seu@email.com"

3.2 Conceitos Fundamentais

Pense assim: você edita os arquivos → escolhe quais quer salvar (git add) → salva com uma mensagem (git commit).

3.3 Comandos do Dia a Dia

3.4 Exemplo Prático Completo

# 1. Criar projeto e inicializar git
mkdir meu-projeto && cd meu-projeto
git init

# 2. Criar um arquivo
echo "console.log('Hello')" > index.js

# 3. Ver status (vai mostrar index.js em vermelho = não rastreado)
git status

# 4. Adicionar ao staging
git add index.js

# 5. Ver status de novo (agora verde = pronto p/ commit)
git status

# 6. Commitar
git commit -m "feat: criar arquivo inicial"

# 7. Ver histórico
git log --oneline

3.5 Branches (Ramificações)

Branches permitem trabalhar em funcionalidades separadas sem mexer no código principal.

# Criar e ir para uma branch nova
git checkout -b minha-feature

# Trabalhar, commitar normalmente...
git add .
git commit -m "feat: nova funcionalidade"

# Voltar pra main e juntar (merge)
git checkout main
git merge minha-feature

# Deletar a branch (já foi juntada)
git branch -d minha-feature

3.6 GitHub - Repositório Remoto

# Conectar seu projeto local ao GitHub
git remote add origin https://github.com/seu-user/seu-repo.git

# Enviar código para o GitHub (primeira vez)
git push -u origin main

# Depois, só:
git push

# Baixar mudanças do GitHub
git pull

3.7 .gitignore

Arquivo que diz ao Git o que NÃO rastrear. Crie na raiz do projeto:

# .gitignore
node_modules/
.env
dist/
*.log

3.8 Padrão de Mensagens de Commit

3.9.1 git stash — Guardar Trabalho Temporariamente

Você está no meio de uma feature e precisa trocar de branch urgente. Mas não quer fazer commit de código incompleto.

$ git stash
# "Guarda" todas as mudanças não commitadas numa pilha temporária
# Seu diretório volta ao estado do último commit

$ git checkout outra-branch
# Agora você pode trocar de branch tranquilo

$ git checkout minha-feature
$ git stash pop
# Restaura as mudanças guardadas e remove da pilha

Comandos úteis do stash

3.9.2 git rebase — Reescrever Histórico

Rebase "replanta" seus commits em cima de outra branch, criando um histórico linear e limpo.

# Você está na branch feature e quer atualizar com a main

$ git checkout feature
$ git rebase main
# Pega seus commits e aplica EM CIMA dos commits mais recentes da main
# Resultado: histórico linear, como se você tivesse começado da main atualizada

Rebase vs Merge — Qual usar?

Resolvendo conflitos no rebase

$ git rebase main
# CONFLICT (content): Merge conflict in src/App.tsx

# 1. Abra o arquivo com conflito e resolva manualmente
# 2. Adicione o arquivo resolvido:
$ git add src/App.tsx

# 3. Continue o rebase:
$ git rebase --continue

# Se quiser cancelar tudo e voltar ao estado anterior:
$ git rebase --abort

3.9.3 git cherry-pick — Pegar Um Commit Específico

Cherry-pick copia um commit específico de outra branch para a sua. Útil quando você precisa de uma correção que está em outra branch mas não quer fazer merge de tudo.

# 1. Descubra o hash do commit que você quer
$ git log --oneline feature
abc1234 fix: corrigir validação de telefone
def5678 feat: adicionar campo email
ghi9012 refactor: organizar imports

# 2. Vá para a branch onde quer aplicar
$ git checkout main

# 3. Cherry-pick do commit específico
$ git cherry-pick abc1234
# Pronto! O commit "fix: corrigir validação" agora está na main

3.9.4 git reflog — Desfazer o "Irreversível"

O reflog registra tudo que aconteceu no seu repositório. Mesmo que você faça reset --hard e "perca" commits, o reflog ainda tem a referência.

$ git reflog
abc1234 HEAD@{0}: commit: feat: adicionar dashboard
def5678 HEAD@{1}: checkout: moving from feature to main
ghi9012 HEAD@{2}: commit: fix: corrigir login
jkl3456 HEAD@{3}: reset: moving to HEAD~2 (ops, perdi commits!)

# Recuperar o commit "perdido":
$ git checkout abc1234
# Ou criar uma branch a partir dele:
$ git branch recuperar abc1234

3.9.5 Resumo — Git Avançado

3.5.1 Variáveis: let, const e var

const nome = 'João';        // não pode mudar
let idade = 25;              // pode mudar
idade = 26;                  // ok!
nome = 'Maria';             // ERRO! const não muda

3.5.2 Tipos de Dados

3.5.3 Template Literals (Crase)

Em vez de concatenar com +, use crase ` e ${}:

// Jeito antigo (ruim)
const msg = 'Olá, ' + nome + '. Você tem ' + idade + ' anos.';

// Jeito moderno (bom)
const msg = `Olá, ${nome}. Você tem ${idade} anos.`;

3.5.4 Funções

// Função normal
function somar(a, b) {
  return a + b;
}

// Arrow function (mais usada no React)
const somar = (a, b) => {
  return a + b;
};

// Arrow function curta (1 linha = return automático)
const somar = (a, b) => a + b;

// Sem parâmetros
const dizerOi = () => 'Oi!';

// Com 1 parâmetro (parênteses opcional)
const dobro = n => n * 2;

3.5.5 Arrays (Listas)

const frutas = ['maçã', 'banana', 'uva'];

frutas.length;              // 3 (quantos itens)
frutas[0];                  // 'maçã' (primeiro item — começa em 0!)
frutas[2];                  // 'uva' (terceiro item)
frutas.push('manga');       // adiciona no final
frutas.includes('banana');  // true (existe na lista?)

Métodos que você vai usar MUITO no React:

const numeros = [1, 2, 3, 4, 5];

// .map() — transforma cada item (retorna novo array)
const dobrados = numeros.map(n => n * 2);
// [2, 4, 6, 8, 10]

// .filter() — filtra itens (retorna novo array)
const grandes = numeros.filter(n => n > 3);
// [4, 5]

// .find() — acha o primeiro que bate
const achou = numeros.find(n => n === 3);
// 3

// .forEach() — faz algo com cada item (NÃO retorna nada)
numeros.forEach(n => console.log(n));

// .some() — algum item bate?
numeros.some(n => n > 4);  // true

// .every() — TODOS batem?
numeros.every(n => n > 0);  // true

3.5.6 Objetos

// Criar objeto
const usuario = {
  nome: 'João',
  idade: 25,
  email: 'joao@email.com',
};

// Acessar valores
usuario.nome;               // 'João'
usuario['email'];           // 'joao@email.com'

// Alterar
usuario.idade = 26;

// Adicionar campo novo
usuario.ativo = true;

3.5.7 Desestruturação

Desestruturação é extrair valores de objetos ou arrays de forma rápida. Você vai ver isso em TODA linha de React.

// SEM desestruturação (verboso)
const nome = usuario.nome;
const email = usuario.email;

// COM desestruturação (limpo)
const { nome, email } = usuario;

// Funciona em parâmetros de função também:
function saudar({ nome, idade }) {
  return `Olá ${nome}, ${idade} anos`;
}
saudar(usuario);  // 'Olá João, 25 anos'

// Desestruturação de ARRAY
const [primeiro, segundo] = ['a', 'b', 'c'];
// primeiro = 'a', segundo = 'b'

// No React: const [valor, setValor] = useState('');  ← é desestruturação de array!

3.5.8 Spread Operator (...)

// Copiar array
const original = [1, 2, 3];
const copia = [...original];        // [1, 2, 3]
const comMais = [...original, 4, 5]; // [1, 2, 3, 4, 5]

// Copiar objeto
const user = { nome: 'Jo', idade: 25 };
const atualizado = { ...user, idade: 26 };
// { nome: 'Jo', idade: 26 } — copiou e atualizou só a idade

// No React, spread é ESSENCIAL pra atualizar estado sem mutar:
// setUsuario({ ...usuario, nome: 'Maria' });

3.5.9 Operador Ternário

// if/else normal
let msg;
if (idade >= 18) {
  msg = 'Maior de idade';
} else {
  msg = 'Menor de idade';
}

// Ternário (faz a mesma coisa em 1 linha)
const msg = idade >= 18 ? 'Maior de idade' : 'Menor de idade';
//          condição     ? se verdadeiro    : se falso

// No React, usado pra renderização condicional:
// {logado ? <Dashboard /> : <Login />}

3.5.10 Truthy e Falsy

No JavaScript, alguns valores são considerados "falsos" mesmo sem ser false:

// Muito usado no React:
const nome = '';
if (nome) { ... }  // NÃO entra — string vazia é falsy

const lista = [];
if (lista.length) { ... }  // NÃO entra — 0 é falsy

// Operador && (E lógico) — muito usado no JSX:
// {erro && <p>{erro}</p>}  ← só mostra se erro existir

3.5.11 Promises e Async/Await

Quando o JavaScript precisa esperar algo (buscar dados de uma API, ler um banco), ele usa código assíncrono.

// Promise = "promessa" de que um valor vai chegar no futuro
// async/await = forma moderna de lidar com Promises

// Função assíncrona (usa async)
async function buscarUsuario(id) {
  const resposta = await fetch(`/api/usuarios/${id}`);  // espera a resposta
  const dados = await resposta.json();                   // espera converter pra JSON
  return dados;
}

// Chamar:
const user = await buscarUsuario(1);

// SEMPRE use try/catch com async/await:
async function buscar() {
  try {
    const res = await fetch('/api/dados');
    const dados = await res.json();
    console.log(dados);
  } catch (erro) {
    console.error('Deu erro:', erro.message);
  }
}

3.5.12 Import e Export (Módulos)

// ==========================================
// FRONTEND (React) — usa import/export (ESM)
// ==========================================

// Exportar (arquivo utils.ts):
export const formatar = (valor) => `R$ ${valor}`;
export default function App() { ... }

// Importar (outro arquivo):
import App from './App';                 // default export
import { formatar } from './utils';     // named export

// ==========================================
// BACKEND (Node.js) — usa require/module.exports (CommonJS)
// ==========================================

// Exportar (arquivo userModel.js):
module.exports = { criar, buscar, deletar };

// Importar (outro arquivo):
const { criar, buscar } = require('./userModel');

3.5.14 Promises em Profundidade

No capítulo 3.5.11 você aprendeu o básico de async/await. Agora vamos entender de verdade como funciona por baixo — essencial para backend e APIs.

O que é uma Promise?

Uma Promise é um objeto que representa uma operação que ainda não terminou. Ela pode estar em 3 estados:

// Criando uma Promise do zero (para entender)
const minhaPromise = new Promise((resolve, reject) => {
  // Simula operação que demora (ex: buscar no banco)
  setTimeout(() => {
    const sucesso = true;
    if (sucesso) {
      resolve({ nome: 'João', idade: 25 });  // deu certo!
    } else {
      reject(new Error('Falhou!'));             // deu errado!
    }
  }, 2000);
});

// Consumindo com .then() e .catch()
minhaPromise
  .then(dados => console.log('Sucesso:', dados))
  .catch(erro => console.error('Erro:', erro))
  .finally(() => console.log('Terminou (com ou sem erro)'));

Encadeamento de Promises (Promise Chain)

Cada .then() retorna uma nova Promise. Isso permite encadear operações:

// Sem encadeamento (callback hell)
fetch('/api/user/1')
  .then(res => res.json())
  .then(user => fetch(`/api/pedidos?userId=${user.id}`))
  .then(res => res.json())
  .then(pedidos => console.log('Pedidos:', pedidos))
  .catch(err => console.error('Qualquer erro da cadeia cai aqui'));

// Com async/await (muito mais legível!)
async function buscarPedidos() {
  const userRes = await fetch('/api/user/1');
  const user = await userRes.json();

  const pedidosRes = await fetch(`/api/pedidos?userId=${user.id}`);
  const pedidos = await pedidosRes.json();

  console.log('Pedidos:', pedidos);
}

3.5.15 Promise.all, Promise.race e Promise.allSettled

Quando você precisa fazer várias operações assíncronas ao mesmo tempo:

Promise.all — Todas ao mesmo tempo, falha se UMA falhar

// Busca 3 coisas AO MESMO TEMPO (paralelo)
const [users, leads, campanhas] = await Promise.all([
  fetch('/api/users').then(r => r.json()),
  fetch('/api/leads').then(r => r.json()),
  fetch('/api/campanhas').then(r => r.json()),
]);
// Se qualquer uma falhar, TODAS falham (cai no catch)
// Se todas derem certo, retorna array com os 3 resultados

Promise.allSettled — Todas ao mesmo tempo, nunca falha

// Mesmo que uma falhe, retorna o resultado de TODAS
const resultados = await Promise.allSettled([
  fetch('/api/users').then(r => r.json()),
  fetch('/api/leads').then(r => r.json()),   // ← se esta falhar...
  fetch('/api/campanhas').then(r => r.json()),
]);

// resultados = [
//   { status: 'fulfilled', value: [...users] },
//   { status: 'rejected',  reason: Error },    ← falhou mas não parou
//   { status: 'fulfilled', value: [...campanhas] }
// ]

// Filtrar só os que deram certo:
const sucessos = resultados
  .filter(r => r.status === 'fulfilled')
  .map(r => r.value);

Promise.race — Retorna a PRIMEIRA que terminar

// Útil para timeout: se a API demorar mais de 5s, cancela
const fetchComTimeout = async (url, ms = 5000) => {
  const timeout = new Promise((_, reject) =>
    setTimeout(() => reject(new Error('Timeout!')), ms)
  );

  return Promise.race([
    fetch(url).then(r => r.json()),
    timeout,
  ]);
};

// Se /api/dados demorar mais de 5s, retorna erro "Timeout!"
const dados = await fetchComTimeout('/api/dados', 5000);

Resumo — Qual usar?

3.5.16 Padrões Async no Backend

No backend com Express, async/await aparece em todo lugar. Aqui estão os padrões que você vai usar diariamente:

Padrão 1: Controller com try/catch

// O padrão mais comum — toda rota assíncrona usa isso
exports.getLeads = async (req, res) => {
  try {
    const [rows] = await pool.query(
      'SELECT * FROM leads WHERE user_id = ?',
      [req.user.id]
    );
    res.json({ success: true, data: rows });
  } catch (error) {
    console.error('Erro:', error);
    res.status(500).json({ error: 'Erro interno' });
  }
};

Padrão 2: Múltiplas queries paralelas

// Dashboard que busca várias estatísticas ao mesmo tempo
exports.getDashboard = async (req, res) => {
  try {
    const [totalLeads, totalCampanhas, totalEnviados] = await Promise.all([
      pool.query('SELECT COUNT(*) as total FROM leads WHERE user_id = ?', [req.user.id]),
      pool.query('SELECT COUNT(*) as total FROM campanhas WHERE user_id = ?', [req.user.id]),
      pool.query('SELECT COUNT(*) as total FROM mensagens WHERE user_id = ?', [req.user.id]),
    ]);

    res.json({
      leads: totalLeads[0][0].total,
      campanhas: totalCampanhas[0][0].total,
      enviados: totalEnviados[0][0].total,
    });
  } catch (error) {
    res.status(500).json({ error: 'Erro ao buscar dashboard' });
  }
};

Padrão 3: Operações sequenciais (uma depende da outra)

// Criar campanha: primeiro verifica, depois insere, depois loga
exports.criarCampanha = async (req, res) => {
  try {
    // 1. Verificar limite do plano
    const [user] = await pool.query(
      'SELECT plano, campanhas_criadas FROM users WHERE id = ?',
      [req.user.id]
    );

    if (user[0].campanhas_criadas >= limiteDoPlano) {
      return res.status(403).json({ error: 'Limite do plano atingido' });
    }

    // 2. Inserir campanha (depende da verificação acima)
    const [result] = await pool.query(
      'INSERT INTO campanhas (nome, user_id) VALUES (?, ?)',
      [req.body.nome, req.user.id]
    );

    // 3. Atualizar contador (depende do insert acima)
    await pool.query(
      'UPDATE users SET campanhas_criadas = campanhas_criadas + 1 WHERE id = ?',
      [req.user.id]
    );

    res.status(201).json({ id: result.insertId });
  } catch (error) {
    res.status(500).json({ error: 'Erro ao criar campanha' });
  }
};

3.5.17 Resumo Visual

3 comandos pra criar

$ npm create vite@latest meu-projeto -- --template react-ts
# Cria projeto React + TypeScript com Vite

$ cd meu-projeto && npm install
# Entra na pasta e instala dependencias

$ npm run dev
# Roda! Acessa http://localhost:5173

O que o Vite cria

meu-projeto/
  |- node_modules/       # Bibliotecas (NUNCA mexa)
  |- public/             # Arquivos estaticos (icones, imagens)
  |- src/                # SEU CODIGO VAI AQUI
  |   |- App.tsx         # Componente raiz
  |   |- main.tsx        # Entrada do React
  |- index.html          # HTML base
  |- package.json        # Dependencias e scripts
  |- tsconfig.json       # Config TypeScript
  |- vite.config.ts      # Config Vite

main.tsx - Ponto de entrada

import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(<App />)
// Renderiza o App dentro da div#root do index.html

package.json - Scripts

{
  "scripts": {
    "dev": "vite",             // npm run dev = desenvolvimento
    "build": "vite build",     // npm run build = gerar producao
    "preview": "vite preview"  // npm run preview = pre-visualizar build
  },
  "dependencies": {},       // Bibliotecas que o projeto USA
  "devDependencies": {}     // Ferramentas so pra desenvolvimento
}

Instalar bibliotecas essenciais

$ npm install react-router-dom         # Navegacao entre paginas
$ npm install -D tailwindcss @tailwindcss/vite  # Estilizacao
$ npx shadcn-ui@latest init            # Componentes prontos
$ npm install lucide-react             # Icones

Configurar atalho @/ nos imports

vite.config.ts:

import path from 'path'
export default defineConfig({
  resolve: { alias: { '@': path.resolve(__dirname, './src') } }
})
// Agora: import { Button } from '@/components/ui/button'
// Em vez de: import { Button } from '../../components/ui/button'

Configurar React Router (navegação)

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Dashboard from './pages/Dashboard'
import Leads from './pages/Leads'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="/leads" element={<Leads />} />
{/*    path = URL no navegador. element = componente que renderiza */}
      </Routes>
    </BrowserRouter>
  )
}

5.1 Backend

backend/src/
  |- routes/        # Define quais URLs existem
  |- controllers/   # Recebe pedido, devolve resposta
  |- models/        # Fala com as tabelas do banco (SQL)
  |- services/      # Logica complexa (validacoes, regras)
  |- middlewares/   # Verifica permissao antes do controller
  |- database/      # Conexao + estrutura das tabelas
  |- config/        # Valores fixos (precos, limites)
  |- utils/         # Funcoes auxiliares reutilizaveis
  |- workers/       # Tarefas pesadas em segundo plano
  |- app.js          # Junta tudo (porta de entrada)
  |- server.js       # Liga o servidor

5.2 Frontend

src/
  |- pages/           # Telas inteiras (cada uma tem URL)
  |- components/      # Pecas reutilizaveis de interface
  |   |- ui/          # Botoes, inputs, modais basicos
  |- services/        # Chamadas pra API do backend
  |- contexts/        # Dados globais (usuario logado)
  |- hooks/           # Logica reutilizavel com hooks
  |- types/           # Formato dos dados (TypeScript)
  |- lib/             # Funcoes auxiliares
  |- data/            # Dados fixos (nao vem do banco)
  |- App.tsx           # Rotas de pagina

Tailwind é um framework CSS utilitário. Em vez de escrever CSS em arquivos separados, você aplica classes direto no HTML/JSX. É o padrão da indústria moderna.

6.1 Instalação no Vite + React

npm install -D tailwindcss @tailwindcss/vite

Configure o plugin no vite.config.ts:

import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

No seu src/index.css, adicione:

@import "tailwindcss";

6.2 CSS Tradicional vs Tailwind

.btn {
  background: #3b82f6;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: bold;
}

<button className="bg-blue-500
  text-white px-4 py-2
  rounded-lg font-bold">
  Clique
</button>

6.3 Classes Mais Usadas

6.4 Responsivo

Tailwind usa prefixos para breakpoints. Mobile first: sem prefixo = mobile, md: = tablet, lg: = desktop.

<!-- 1 coluna no mobile, 2 no tablet, 3 no desktop -->
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <Card />
  <Card />
  <Card />
</div>

6.5 Hover, Focus e Estados

<button className="bg-blue-500 hover:bg-blue-600 active:bg-blue-700
  transition-colors duration-200 focus:ring-2 focus:ring-blue-300">
  Salvar
</button>

<input className="border border-gray-300 focus:border-blue-500
  focus:ring-2 focus:ring-blue-200 rounded-lg px-4 py-2
  outline-none transition-all" />

6.6 Dark Mode

<div className="bg-white dark:bg-gray-900
  text-gray-900 dark:text-white">
  <p>Texto que se adapta ao tema!</p>
</div>

6.7 Exemplo: Card Completo

function UserCard({ nome, email, plano }) {
  return (
    <div className="bg-white rounded-xl shadow-md p-6
      border border-gray-100 hover:shadow-lg transition-shadow">

      <div className="flex items-center gap-4 mb-4">
        <div className="w-12 h-12 bg-blue-500 rounded-full
          flex items-center justify-center text-white font-bold text-lg">
          {nome[0]}
        </div>
        <div>
          <h3 className="font-semibold text-gray-900">{nome}</h3>
          <p className="text-sm text-gray-500">{email}</p>
        </div>
      </div>

      <span className="bg-green-100 text-green-700 px-3 py-1
        rounded-full text-xs font-medium">
        {plano}
      </span>
    </div>
  );
}

6.5.1 JSX — HTML Dentro do JavaScript

No React, você escreve "HTML" dentro do JavaScript. Isso se chama JSX. Não é HTML de verdade — o React transforma em JavaScript por baixo.

// Isso é JSX (parece HTML, mas é JavaScript)
function MeuComponente() {
  const nome = 'João';
  const ativo = true;

  return (
    <div>
      <h1>Olá, {nome}!</h1>          {/* usa {} pra JavaScript */}
      <p>Status: {ativo ? 'Ativo' : 'Inativo'}</p>
      <p>2 + 2 = {2 + 2}</p>          {/* qualquer expressão JS */}
    </div>
  );
}

6.5.2 Componentes — Funções que Retornam Tela

No React, tudo é componente. Um componente é uma função que retorna JSX (a tela). O nome sempre começa com letra maiúscula.

// Componente simples
function Titulo() {
  return <h1>Meus Leads</h1>;
}

// Usando o componente
function App() {
  return (
    <div>
      <Titulo />       {/* usa como se fosse uma tag HTML */}
      <Titulo />       {/* pode usar quantas vezes quiser */}
    </div>
  );
}

6.5.3 onClick — Clique em Botão

Para fazer algo quando o usuário clica, use onClick:

// Exemplo 1: Função inline
function Botao() {
  return (
    <button onClick={() => alert('Clicou!')}>
      Clique Aqui
    </button>
  );
}

// Exemplo 2: Função separada (melhor pra lógica complexa)
function BotaoSalvar() {
  function handleClick() {
    console.log('Salvando...');
    // chamar API, validar, etc.
  }

  return (
    <button onClick={handleClick}>
      Salvar
    </button>
  );
}

// Exemplo 3: Passando dados no clique
function BotaoLead() {
  function handleClick(nome) {
    alert(`Selecionou: ${nome}`);
  }

  return (
    <div>
      <button onClick={() => handleClick('João')}>João</button>
      <button onClick={() => handleClick('Maria')}>Maria</button>
    </div>
  );
}

// ❌ ERRADO — executa na hora, não no clique!
<button onClick={handleClick('João')}>  // chama IMEDIATAMENTE

// ✅ CERTO — arrow function "embrulha" a chamada
<button onClick={() => handleClick('João')}>  // só executa no clique

6.5.4 onChange — Pegando Dado do Input

Para pegar o que o usuário digita, use onChange + useState:

import { useState } from 'react';

function CampoBusca() {
  const [texto, setTexto] = useState('');
  //     ↑ valor atual    ↑ função pra mudar

  return (
    <div>
      <input
        value={texto}                             {/* mostra o valor */}
        onChange={(e) => setTexto(e.target.value)}  {/* atualiza ao digitar */}
        placeholder="Buscar lead..."
      />
      <p>Você digitou: {texto}</p>
      <p>Total de letras: {texto.length}</p>
    </div>
  );
}

Múltiplos inputs com objeto

function FormularioLead() {
  const [form, setForm] = useState({
    nome: '',
    telefone: '',
    email: '',
  });

  // UMA função pra TODOS os inputs
  function handleChange(e) {
    setForm({
      ...form,                     // copia tudo que já tem
      [e.target.name]: e.target.value  // atualiza só o campo que mudou
    });
  }

  function handleSalvar() {
    console.log('Dados:', form);
    // form = { nome: 'João', telefone: '21999...', email: 'joao@...' }
  }

  return (
    <div>
      <input name="nome"     value={form.nome}     onChange={handleChange} placeholder="Nome" />
      <input name="telefone" value={form.telefone} onChange={handleChange} placeholder="Telefone" />
      <input name="email"    value={form.email}    onChange={handleChange} placeholder="Email" />
      <button onClick={handleSalvar}>Salvar</button>
    </div>
  );
}

6.5.5 .map() — Renderizar Listas

O .map() é a forma do React de fazer um "for each" na tela. Ele pega cada item de um array e transforma em um elemento visual:

function ListaDeNomes() {
  const nomes = ['João', 'Maria', 'Pedro', 'Ana'];

  return (
    <ul>
      {nomes.map((nome, index) => (
        <li key={index}>{nome}</li>
      ))}
    </ul>
  );
}

// Resultado na tela:
// • João
// • Maria
// • Pedro
// • Ana

Map com objetos (mais comum no dia a dia)

function ListaDeLeads() {
  const leads = [
    { id: 1, nome: 'Barbearia do João', telefone: '21999001122', status: 'novo' },
    { id: 2, nome: 'Clínica Saúde',      telefone: '21988003344', status: 'contatado' },
    { id: 3, nome: 'Pet Shop Rex',       telefone: '21977005566', status: 'respondeu' },
  ];

  return (
    <div>
      <h2>Meus Leads ({leads.length})</h2>
      {leads.map((lead) => (
        <div key={lead.id} style={{ border: '1px solid #ddd', padding: '12px', marginBottom: '8px' }}>
          <h3>{lead.nome}</h3>
          <p>Tel: {lead.telefone}</p>
          <p>Status: {lead.status}</p>
          <button onClick={() => alert(`Ligar para ${lead.nome}`)}>
            Contatar
          </button>
        </div>
      ))}
    </div>
  );
}

6.5.6 Objetos no React

Objetos são a estrutura de dados mais usada no React. Um lead, um usuário, um produto — tudo é objeto.

// Criar um objeto
const lead = {
  nome: 'Barbearia do João',
  telefone: '21999001122',
  ramo: 'Beleza',
  ativo: true,
};

// Acessar propriedades
lead.nome           // 'Barbearia do João'
lead.telefone       // '21999001122'
lead['ramo']        // 'Beleza' (útil quando a chave é variável)

// Desestruturação — extrair valores do objeto
const { nome, telefone, ramo } = lead;
console.log(nome);   // 'Barbearia do João' (sem precisar de lead.nome)

// Spread — copiar e alterar
const leadAtualizado = { ...lead, ativo: false };
// Copia tudo de lead, mas troca ativo pra false

Operações comuns com objetos

const lead = { nome: 'João', email: 'joao@test.com', status: 'novo' };

// Object.keys — pegar as chaves
Object.keys(lead);     // ['nome', 'email', 'status']

// Object.values — pegar os valores
Object.values(lead);   // ['João', 'joao@test.com', 'novo']

// Object.entries — pegar chave + valor (útil pra .map)
Object.entries(lead);  // [['nome','João'], ['email','joao@...'], ['status','novo']]

// Renderizar objeto dinamicamente
function DetalhesLead({ lead }) {
  return (
    <div>
      {Object.entries(lead).map(([chave, valor]) => (
        <p key={chave}><b>{chave}:</b> {valor}</p>
      ))}
    </div>
  );
  // Resultado: nome: João / email: joao@... / status: novo
}

6.5.7 .filter() e .find() — Filtrar Dados

Além do .map(), dois métodos de array são essenciais no React:

const leads = [
  { id: 1, nome: 'João',  status: 'novo' },
  { id: 2, nome: 'Maria', status: 'respondeu' },
  { id: 3, nome: 'Pedro', status: 'novo' },
  { id: 4, nome: 'Ana',   status: 'convertido' },
];

// .filter() — pegar só os novos
const novos = leads.filter(lead => lead.status === 'novo');
// [{ id:1, nome:'João'... }, { id:3, nome:'Pedro'... }]

// .find() — achar um lead específico
const maria = leads.find(lead => lead.nome === 'Maria');
// { id:2, nome:'Maria', status:'respondeu' }

// .forEach() — fazer algo com cada lead (NÃO retorna nada)
leads.forEach(lead => {
  console.log(`Lead: ${lead.nome} — ${lead.status}`);
});

// Encadear! filter + map (muito comum)
const nomesNovos = leads
  .filter(lead => lead.status === 'novo')
  .map(lead => lead.nome);
// ['João', 'Pedro']

Exemplo prático: Lista com filtro

import { useState } from 'react';

function ListaComFiltro() {
  const [filtro, setFiltro] = useState('todos');

  const leads = [
    { id: 1, nome: 'João',  status: 'novo' },
    { id: 2, nome: 'Maria', status: 'respondeu' },
    { id: 3, nome: 'Pedro', status: 'novo' },
  ];

  // Filtra com base no estado selecionado
  const leadsFiltrados = filtro === 'todos'
    ? leads
    : leads.filter(l => l.status === filtro);

  return (
    <div>
      <button onClick={() => setFiltro('todos')}>Todos</button>
      <button onClick={() => setFiltro('novo')}>Novos</button>
      <button onClick={() => setFiltro('respondeu')}>Respondeu</button>

      <p>Mostrando: {leadsFiltrados.length} leads</p>

      {leadsFiltrados.map(lead => (
        <div key={lead.id}>
          {lead.nome} — {lead.status}
        </div>
      ))}
    </div>
  );
}

6.5.8 Props — Passar Dados Entre Componentes

Props são os dados que um componente pai passa para o filho. É como chamar uma função com argumentos:

// Componente filho — RECEBE props
function LeadCard({ nome, telefone, status }) {
  //              ↑ desestrutura as props
  return (
    <div style={{ border: '1px solid #ddd', padding: '12px', marginBottom: '8px' }}>
      <h3>{nome}</h3>
      <p>Tel: {telefone}</p>
      <span>{status}</span>
    </div>
  );
}

// Componente pai — ENVIA props
function App() {
  return (
    <div>
      <LeadCard nome="Barbearia João" telefone="21999001122" status="novo" />
      <LeadCard nome="Clínica Saúde"  telefone="21988003344" status="respondeu" />
      {/*     ↑ passa os dados como "atributos" */}
    </div>
  );
}

Props com função (callback)

O pai pode passar funções como props. Assim o filho consegue "avisar" o pai quando algo aconteceu:

// Filho: tem um botão que chama a função do pai
function LeadCard({ nome, telefone, onDelete }) {
  return (
    <div>
      <h3>{nome}</h3>
      <p>{telefone}</p>
      <button onClick={onDelete}>Excluir</button>
      {/*              ↑ chama a função que o pai passou */}
    </div>
  );
}

// Pai: define o que acontece quando o filho clica "Excluir"
function App() {
  function handleDelete(id) {
    console.log(`Excluindo lead ${id}...`);
    // chamar API, atualizar estado, etc.
  }

  return (
    <div>
      <LeadCard nome="João" telefone="21999..." onDelete={() => handleDelete(1)} />
      <LeadCard nome="Maria" telefone="21988..." onDelete={() => handleDelete(2)} />
    </div>
  );
}

6.5.9 Renderização Condicional — Mostrar/Esconder

No React, você controla o que aparece na tela com JavaScript. Três formas:

function Painel({ loading, erro, leads }) {

  // 1. IF/RETURN — retorna cedo se algo impede
  if (loading) return <p>Carregando...</p>;
  if (erro)    return <p style={{color: 'red'}}>{erro}</p>;

  return (
    <div>
      {/* 2. && — mostra SÓ SE a condição for true */}
      {leads.length === 0 && <p>Nenhum lead encontrado.</p>}

      {/* 3. TERNÁRIO — se/senão inline */}
      {leads.length > 0
        ? <p>{leads.length} leads encontrados</p>
        : <p>Lista vazia</p>
      }

      {/* Mostrar botão só se tem leads */}
      {leads.length > 0 && (
        <button>Enviar Mensagem para Todos</button>
      )}
    </div>
  );
}

Exemplo real: Badge de status

function StatusBadge({ status }) {
  const cores = {
    novo: 'bg-blue-100 text-blue-700',
    contatado: 'bg-yellow-100 text-yellow-700',
    respondeu: 'bg-green-100 text-green-700',
    convertido: 'bg-purple-100 text-purple-700',
  };

  return (
    <span className={`px-2 py-1 rounded-full text-xs font-medium ${cores[status] || 'bg-gray-100'}`}>
      {status}
    </span>
  );
}

6.5.10 Mini-Projeto: Lista de Contatos

Vamos juntar tudo que aprendemos em um componente funcional completo:

import { useState } from 'react';

// ─── Componente Filho: Card do Contato ───
function ContatoCard({ contato, onRemover }) {
  return (
    <div style={{
      border: '1px solid #e0e0e0',
      borderRadius: '8px',
      padding: '12px',
      marginBottom: '8px',
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
    }}>
      <div>
        <strong>{contato.nome}</strong>
        <p style={{ color: '#666', margin: 0 }}>{contato.telefone}</p>
      </div>
      <button
        onClick={() => onRemover(contato.id)}
        style={{ background: '#ef4444', color: 'white', border: 'none', borderRadius: '4px', padding: '4px 12px', cursor: 'pointer' }}
      >
        Remover
      </button>
    </div>
  );
}

// ─── Componente Pai: Lista Completa ───
function ListaContatos() {
  // Estado: lista de contatos
  const [contatos, setContatos] = useState([
    { id: 1, nome: 'João Silva', telefone: '(21) 99900-1122' },
    { id: 2, nome: 'Maria Oliveira', telefone: '(21) 98800-3344' },
  ]);

  // Estado: formulário de novo contato
  const [form, setForm] = useState({ nome: '', telefone: '' });

  // Estado: busca
  const [busca, setBusca] = useState('');

  // Adicionar contato
  function handleAdicionar() {
    if (!form.nome || !form.telefone) return;

    const novo = {
      id: Date.now(),  // ID único simples
      nome: form.nome,
      telefone: form.telefone,
    };

    setContatos([...contatos, novo]);  // spread: copia + adiciona
    setForm({ nome: '', telefone: '' });    // limpa formulário
  }

  // Remover contato
  function handleRemover(id) {
    setContatos(contatos.filter(c => c.id !== id));  // filter: remove o item
  }

  // Filtrar pela busca
  const contatosFiltrados = contatos.filter(c =>
    c.nome.toLowerCase().includes(busca.toLowerCase())
  );

  return (
    <div style={{ maxWidth: '500px', margin: '20px auto', fontFamily: 'sans-serif' }}>
      <h1>Lista de Contatos</h1>

      {/* ── Formulário ── */}
      <div style={{ marginBottom: '16px' }}>
        <input
          placeholder="Nome"
          value={form.nome}
          onChange={e => setForm({ ...form, nome: e.target.value })}
          style={{ marginRight: '8px', padding: '8px' }}
        />
        <input
          placeholder="Telefone"
          value={form.telefone}
          onChange={e => setForm({ ...form, telefone: e.target.value })}
          style={{ marginRight: '8px', padding: '8px' }}
        />
        <button onClick={handleAdicionar} style={{ padding: '8px 16px' }}>
          Adicionar
        </button>
      </div>

      {/* ── Busca ── */}
      <input
        placeholder="Buscar contato..."
        value={busca}
        onChange={e => setBusca(e.target.value)}
        style={{ width: '100%', padding: '8px', marginBottom: '12px' }}
      />

      {/* ── Contagem ── */}
      <p>{contatosFiltrados.length} contato(s) encontrado(s)</p>

      {/* ── Lista ── */}
      {contatosFiltrados.length === 0 && <p>Nenhum contato.</p>}

      {contatosFiltrados.map(contato => (
        <ContatoCard
          key={contato.id}
          contato={contato}          {/* passa o objeto como prop */}
          onRemover={handleRemover}   {/* passa a função como prop */}
        />
      ))}
    </div>
  );
}

6.8.1 Tipos Básicos

// Tipos primitivos
const nome: string = 'João';
const idade: number = 25;
const ativo: boolean = true;

// Arrays
const nomes: string[] = ['Ana', 'João'];
const idades: number[] = [20, 25, 30];

// Pode ser null ou undefined
const telefone: string | null = null;     // union type
const email: string | undefined = undefined;

6.8.2 Interface — Definir Formato de Objetos

// Interface = "contrato" — diz quais campos o objeto TEM que ter
interface Lead {
  id: number;
  nome: string;
  telefone: string;
  email?: string;       // ? = opcional (pode não ter)
  ativo: boolean;
}

// Usar a interface:
const lead: Lead = {
  id: 1,
  nome: 'Maria',
  telefone: '21999999999',
  ativo: true,
  // email é opcional, pode omitir
};

// Array de leads:
const leads: Lead[] = [lead];

6.8.3 TypeScript no React — Tipando Componentes

// Tipando props de um componente
interface CardProps {
  titulo: string;
  valor: number;
  destaque?: boolean;  // opcional
}

function Card({ titulo, valor, destaque }: CardProps) {
  return (
    <div className={destaque ? 'bg-blue-500' : 'bg-gray-100'}>
      <h3>{titulo}</h3>
      <p>{valor}</p>
    </div>
  );
}

// Usando o componente:
<Card titulo="Leads" valor={42} />              // OK
<Card titulo="Leads" valor={42} destaque />     // OK (destaque = true)
<Card titulo="Leads" />                         // ERRO! faltou 'valor'
<Card titulo={123} valor={42} />                // ERRO! titulo tem que ser string

6.8.4 Tipando useState

// Tipos simples — TypeScript infere automaticamente
const [nome, setNome] = useState('');         // infere string
const [count, setCount] = useState(0);        // infere number
const [ativo, setAtivo] = useState(true);     // infere boolean

// Arrays e objetos — PRECISA tipar com <Tipo>
const [leads, setLeads] = useState<Lead[]>([]);
//                                  ↑ diz que é array de Lead

// Pode ser null no início
const [user, setUser] = useState<Lead | null>(null);
//                                ↑ Lead OU null

6.8.5 Tipando Eventos

// Evento de input (onChange)
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setNome(e.target.value);
};

// Evento de formulário (onSubmit)
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
};

// Evento de clique (onClick)
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
  console.log('clicou');
};

6.8.6 Tipando Funções e Respostas de API

// Tipar resposta de API
interface ApiResponse<T> {
  success: boolean;
  data: T;
  message: string;
}

// Função que busca leads da API
async function buscarLeads(): Promise<Lead[]> {
  const res = await fetch('/api/leads');
  const json: ApiResponse<Lead[]> = await res.json();
  return json.data;
}

// Tipar callback de função
interface ButtonProps {
  label: string;
  onClick: () => void;           // função sem retorno
  onDelete: (id: number) => void; // função que recebe id
}

6.8.7 Utility Types (Ferramentas Prontas)

// Exemplo prático: formulário de criação (sem id, pois o banco gera)
type CriarLead = Omit<Lead, 'id'>;

// Exemplo prático: formulário de edição (tudo opcional)
type EditarLead = Partial<Lead>;

6.8.8 Erros Mais Comuns do TypeScript

7.1 Por que Variável Normal Não Funciona

No JavaScript puro, você faz isso e funciona:

// JavaScript puro - funciona
let contador = 0;
document.getElementById('btn').addEventListener('click', () => {
  contador++;
  document.getElementById('numero').textContent = contador;
});

No React, isso NÃO funciona:

// ❌ ERRADO - o número NUNCA muda na tela
function Contador() {
  let contador = 0;  // variável normal

  function incrementar() {
    contador++;  // muda o valor, mas...
    console.log(contador); // aqui mostra 1, 2, 3...
  }

  return (
    <div>
      <p>{contador}</p>  // ← SEMPRE mostra 0!
      <button onClick={incrementar}>+1</button>
    </div>
  );
}

A solução é o useState — ele guarda o valor entre re-execuções:

// ✅ CERTO - agora funciona!
import { useState } from 'react';

function Contador() {
  const [contador, setContador] = useState(0);
  //     ↑ valor     ↑ função       ↑ valor inicial
  //     atual       pra mudar      (guardado pelo React)

  return (
    <div>
      <p>{contador}</p>  // ← Agora atualiza!
      <button onClick={() => setContador(contador + 1)}>+1</button>
    </div>
  );
}

7.2 useState Profundo

Tipos de estado

Estado com Arrays — NUNCA mute diretamente

const [leads, setLeads] = useState([]);

// ❌ ERRADO - modificar o array diretamente
leads.push({ nome: 'João' });  // React NÃO detecta a mudança!
setLeads(leads);  // É o mesmo objeto na memória, React ignora

// ✅ CERTO - criar array novo com spread
setLeads([...leads, { nome: 'João' }]);  // Novo array = React re-renderiza

// ✅ Remover item (filter cria array novo)
setLeads(leads.filter(l => l.id !== idParaRemover));

// ✅ Atualizar item (map cria array novo)
setLeads(leads.map(l => l.id === id ? { ...l, status: 'ativo' } : l));

Estado com Objetos

const [form, setForm] = useState({
  nome: '',
  email: '',
  telefone: ''
});

// ❌ ERRADO
form.nome = 'João';
setForm(form);

// ✅ CERTO - spread copia tudo e sobrescreve só o que mudou
setForm({ ...form, nome: 'João' });
//        ↑ copia email e telefone    ↑ sobrescreve nome

Callback Form — quando o novo valor depende do anterior

// ❌ Pode dar problema se clicar muito rápido
setContador(contador + 1);

// ✅ SEGURO - garante que usa o valor mais recente
setContador(prev => prev + 1);
//           ↑ React te dá o valor atual como argumento

// ✅ Adicionar item usando callback
setLeads(prev => [...prev, novoLead]);

// ✅ Remover usando callback
setLeads(prev => prev.filter(l => l.id !== id));

7.3 useEffect Profundo

useEffect é "quando algo acontecer, execute isso". Serve para: buscar dados da API, ouvir eventos, configurar timers.

Exemplo real: buscar dados da API

import { useState, useEffect } from 'react';

function ListaLeads() {
  const [leads, setLeads] = useState([]);
  const [loading, setLoading] = useState(true);
  const [erro, setErro] = useState(null);

  useEffect(() => {
    // Função async DENTRO do useEffect
    async function carregar() {
      try {
        const resp = await fetch('/api/leads');
        const data = await resp.json();
        setLeads(data);
      } catch (err) {
        setErro('Falha ao carregar leads');
      } finally {
        setLoading(false);
      }
    }
    carregar();
  }, []);  // [] = só executa uma vez, quando a página abre

  if (loading) return <p>Carregando...</p>;
  if (erro) return <p>{erro}</p>;

  return (
    <ul>
      {leads.map(lead => <li key={lead.id}>{lead.nome}</li>)}
    </ul>
  );
}

Reagir a mudanças (busca com filtro)

const [busca, setBusca] = useState('');
const [resultados, setResultados] = useState([]);

useEffect(() => {
  if (busca.length < 3) return;  // só busca com 3+ letras

  const timer = setTimeout(async () => {
    const resp = await fetch(`/api/leads?q=${busca}`);
    const data = await resp.json();
    setResultados(data);
  }, 500);  // debounce: espera 500ms

  return () => clearTimeout(timer);  // cleanup: cancela se digitar de novo
}, [busca]);  // executa toda vez que "busca" mudar

Cleanup — Limpeza

A função return dentro do useEffect é a limpeza. Ela roda quando:

• O componente some da tela (desmonta)
• Antes de re-executar o efeito (quando dependência muda)

useEffect(() => {
  const intervalo = setInterval(() => {
    console.log('Verificando novos leads...');
  }, 30000);

  return () => {
    clearInterval(intervalo);  // Para o timer quando sai da página
  };
}, []);

7.4 useRef — Guardar Sem Re-renderizar

useRef guarda um valor que persiste entre re-renders mas NÃO redesenha a tela quando muda.

Uso 1: Acessar elemento do DOM

import { useRef } from 'react';

function BuscaLeads() {
  const inputRef = useRef(null);

  function focarInput() {
    inputRef.current.focus();  // acessa o elemento real do DOM
  }

  return (
    <div>
      <input ref={inputRef} placeholder="Buscar..." />
      <button onClick={focarInput}>Focar</button>
    </div>
  );
}

Uso 2: Guardar valor anterior

function Preco({ valor }) {
  const anteriorRef = useRef(valor);

  useEffect(() => {
    anteriorRef.current = valor;  // atualiza DEPOIS do render
  }, [valor]);

  return (
    <p>
      Atual: R$ {valor} | Anterior: R$ {anteriorRef.current}
    </p>
  );
}

7.5 Formulários com Hooks

Formulários são o uso mais comum de hooks no dia a dia. O padrão é: cada input controlado por um estado.

Formulário simples

import { useState } from 'react';

function FormLead() {
  const [nome, setNome] = useState('');
  const [telefone, setTelefone] = useState('');

  return (
    <form>
      <input
        value={nome}
        onChange={e => setNome(e.target.value)}
        placeholder="Nome"
      />
      <input
        value={telefone}
        onChange={e => setTelefone(e.target.value)}
        placeholder="Telefone"
      />
    </form>
  );
}

Formulário com objeto (vários campos)

function FormLeadCompleto() {
  const [form, setForm] = useState({
    nome: '', email: '', telefone: '', ramo: ''
  });
  const [loading, setLoading] = useState(false);
  const [erro, setErro] = useState('');

  // UMA função para TODOS os inputs
  function handleChange(e) {
    const { name, value } = e.target;
    setForm(prev => ({ ...prev, [name]: value }));
    //                         ↑ computed property name
    //  [name] = "nome", "email", "telefone"... depende do input
  }

  async function handleSubmit(e) {
    e.preventDefault();  // impede reload da página

    if (!form.nome || !form.telefone) {
      setErro('Nome e telefone são obrigatórios');
      return;
    }

    setLoading(true);
    setErro('');
    try {
      await fetch('/api/leads', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form)
      });
      setForm({ nome: '', email: '', telefone: '', ramo: '' }); // limpa
    } catch {
      setErro('Erro ao salvar lead');
    } finally {
      setLoading(false);
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      {erro && <p style={{color: 'red'}}>{erro}</p>}
      <input name="nome"     value={form.nome}     onChange={handleChange} placeholder="Nome" />
      <input name="email"    value={form.email}    onChange={handleChange} placeholder="Email" />
      <input name="telefone" value={form.telefone} onChange={handleChange} placeholder="Telefone" />
      <input name="ramo"     value={form.ramo}     onChange={handleChange} placeholder="Ramo" />
      <button disabled={loading}>{loading ? 'Salvando...' : 'Salvar Lead'}</button>
    </form>
  );
}

7.6 Custom Hooks — Extrair Lógica Reutilizável

Quando dois ou mais componentes precisam da mesma lógica (buscar dados, controlar um modal, debounce...), você extrai para um custom hook.

Antes (código repetido em várias páginas)

// PaginaLeads.tsx - busca leads
const [leads, setLeads] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
  leadService.listar().then(setLeads).finally(() => setLoading(false));
}, []);

// Dashboard.tsx - busca leads DE NOVO (código repetido!)
const [leads, setLeads] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
  leadService.listar().then(setLeads).finally(() => setLoading(false));
}, []);

Depois (custom hook — uma vez só)

// hooks/useLeads.ts
import { useState, useEffect } from 'react';
import { leadService } from '@/services/leadService';

export function useLeads() {
  const [leads, setLeads] = useState([]);
  const [loading, setLoading] = useState(true);

  async function carregar() {
    setLoading(true);
    const data = await leadService.listar();
    setLeads(data);
    setLoading(false);
  }

  useEffect(() => { carregar(); }, []);

  return { leads, loading, recarregar: carregar };
}

// Agora em QUALQUER página:
const { leads, loading, recarregar } = useLeads();

7.7 Erros Comuns e Como Resolver

Padrao de consulta no código

const [resultado] = await pool.query('SQL AQUI');
//  [resultado] = desestruturacao. Pega so as linhas

8.2 CREATE TABLE — Criando Tabelas

CREATE TABLE leads (
  id         INT          AUTO_INCREMENT PRIMARY KEY,
  nome       VARCHAR(200) NOT NULL,
  email      VARCHAR(200) DEFAULT NULL,
  telefone   VARCHAR(20)  NOT NULL,
  status     ENUM('novo', 'contatado', 'respondeu', 'convertido') DEFAULT 'novo',
  ativo      TINYINT(1)   DEFAULT 1,
  user_id    INT          NOT NULL,
  criado_em  TIMESTAMP    DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
);

8.3 Relacionamentos entre Tabelas

-- Tabela intermediária (N:M)
CREATE TABLE campanha_leads (
  id           INT AUTO_INCREMENT PRIMARY KEY,
  campanha_id  INT NOT NULL,
  lead_id      INT NOT NULL,
  status       ENUM('pendente', 'enviado', 'respondeu') DEFAULT 'pendente',
  FOREIGN KEY (campanha_id) REFERENCES campanhas(id) ON DELETE CASCADE,
  FOREIGN KEY (lead_id) REFERENCES leads(id) ON DELETE CASCADE
);

8.4 JOINs — Buscar Dados de Várias Tabelas

-- INNER JOIN: só traz onde tem correspondência nas DUAS tabelas
SELECT leads.nome, leads.telefone, users.email AS dono_email
FROM leads
INNER JOIN users ON users.id = leads.user_id
WHERE leads.status = 'novo';

-- LEFT JOIN: traz TODOS da esquerda, mesmo sem correspondência
SELECT c.nome AS campanha, COUNT(cl.lead_id) AS total_leads
FROM campanhas c
LEFT JOIN campanha_leads cl ON cl.campanha_id = c.id
GROUP BY c.id;
-- Campanhas sem leads aparecem com total_leads = 0

-- Exemplo real: buscar leads de uma campanha com dados completos
SELECT l.id, l.nome, l.telefone, cl.status AS status_campanha
FROM campanha_leads cl
INNER JOIN leads l ON l.id = cl.lead_id
WHERE cl.campanha_id = ?
ORDER BY l.nome;

8.5 Índices — Acelerar Consultas

-- Índice = atalho pro banco achar dados mais rápido
-- Crie índice em colunas que aparecem no WHERE, JOIN ou ORDER BY

CREATE INDEX idx_leads_user_id ON leads(user_id);
CREATE INDEX idx_leads_telefone ON leads(telefone);
CREATE INDEX idx_campanha_leads ON campanha_leads(campanha_id, lead_id);
CREATE UNIQUE INDEX idx_users_email ON users(email);

8.6 Paginação

-- Página 1 (itens 1-20)
SELECT * FROM leads WHERE user_id = ? ORDER BY id DESC LIMIT 20 OFFSET 0;

-- Página 2 (itens 21-40)
SELECT * FROM leads WHERE user_id = ? ORDER BY id DESC LIMIT 20 OFFSET 20;

-- Fórmula: OFFSET = (pagina - 1) * limite

-- Contar total (para mostrar "Página 1 de 5"):
SELECT COUNT(*) AS total FROM leads WHERE user_id = ?;

9.1 routes/exemploRoutes.js

const express = require('express');
const router = express.Router();
const ctrl = require('../controllers/exemploController');
const { authenticate } = require('../middlewares/auth');

router.get('/', authenticate, ctrl.listar);         // GET /exemplo
router.get('/:id', authenticate, ctrl.buscarPorId);  // GET /exemplo/42
router.post('/', authenticate, ctrl.criar);          // POST /exemplo
router.put('/:id', authenticate, ctrl.atualizar);    // PUT /exemplo/42
router.delete('/:id', authenticate, ctrl.deletar);  // DELETE /exemplo/42
// router.METODO('url', middleware, controller.funcao)

module.exports = router;
// No app.js: app.use('/exemplo', require('./routes/exemploRoutes'))

9.2 controllers/exemploController.js

const { pool } = require('../database/connection');
// { pool } = desestruturacao. Pega SO o pool do objeto exportado

// LISTAR
exports.listar = async (req, res) => {
  try {
    const [rows] = await pool.query(
      'SELECT * FROM exemplos WHERE user_id = ?', [req.user.id]
//  ? = placeholder seguro (evita SQL injection)
//  [req.user.id] = valor que substitui o ?
    );
    res.json({ success: true, data: rows });
  } catch (error) {
    res.status(500).json({ success: false, error: error.message });
  }
};

// BUSCAR POR ID
exports.buscarPorId = async (req, res) => {
  try {
    const [rows] = await pool.query(
      'SELECT * FROM exemplos WHERE id = ? AND user_id = ?',
      [req.params.id, req.user.id]
//  req.params.id = da URL. GET /exemplo/42 -> id = 42
    );
    if (!rows.length) return res.status(404).json({ error: 'Nao encontrado' });
    res.json({ success: true, data: rows[0] });
  } catch (error) {
    res.status(500).json({ success: false, error: error.message });
  }
};

// CRIAR
exports.criar = async (req, res) => {
  try {
    const { nome, descricao } = req.body;
//  req.body = dados enviados pelo cliente (POST/PUT)
    const [result] = await pool.query(
      'INSERT INTO exemplos (user_id, nome, descricao) VALUES (?, ?, ?)',
      [req.user.id, nome, descricao]
    );
    res.status(201).json({ success: true, id: result.insertId });
//  201 = criado. insertId = ID gerado pelo banco
  } catch (error) {
    res.status(500).json({ success: false, error: error.message });
  }
};

// ATUALIZAR
exports.atualizar = async (req, res) => {
  try {
    const { nome, descricao } = req.body;
    await pool.query(
      'UPDATE exemplos SET nome = ?, descricao = ? WHERE id = ? AND user_id = ?',
      [nome, descricao, req.params.id, req.user.id]
    );
    res.json({ success: true, message: 'Atualizado' });
  } catch (e) { res.status(500).json({ error: e.message }); }
};

// DELETAR
exports.deletar = async (req, res) => {
  try {
    await pool.query('DELETE FROM exemplos WHERE id = ? AND user_id = ?',
      [req.params.id, req.user.id]);
//  SEMPRE filtre por user_id! Senao um usuario deleta dados de outro
    res.json({ success: true });
  } catch (e) { res.status(500).json({ error: e.message }); }
};

9.3 models/exemploModel.js

const { pool } = require('../database/connection');

const ExemploModel = {
  async findAll(userId, filtros = {}) {
    let sql = 'SELECT * FROM exemplos WHERE user_id = ?';
    const params = [userId];
    if (filtros.status) { sql += ' AND status = ?'; params.push(filtros.status); }
    if (filtros.search) { sql += ' AND nome LIKE ?'; params.push(`%${filtros.search}%`); }
//  LIKE '%texto%' = busca parcial. "bar" encontra "barbearia"
    sql += ' ORDER BY criado_em DESC';
    const [rows] = await pool.execute(sql, params);
    return rows;
  },
  async findById(userId, id) {
    const [rows] = await pool.execute(
      'SELECT * FROM exemplos WHERE id = ? AND user_id = ?', [id, userId]);
    return rows[0] || null;
//  Se nao encontrou, retorna null
  },
  async create(userId, data) {
    const [result] = await pool.execute(
      'INSERT INTO exemplos (user_id, nome) VALUES (?, ?)', [userId, data.nome]);
    return this.findById(userId, result.insertId);
//  Depois de criar, busca o registro completo e retorna
  },
};
module.exports = ExemploModel;

9.4 services/exemploService.js

const Model = require('../models/exemploModel');

class ExemploService {
  async criar(userId, data) {
    // Regra: nao pode duplicar nome
    const existe = await Model.findByNome(userId, data.nome);
    if (existe) {
      const err = new Error('Ja existe'); err.statusCode = 409; throw err;
//    throw = lanca erro pro controller capturar no catch
    }
    return Model.create(userId, data);
  }
}
module.exports = new ExemploService();
// Quando NAO precisa de service: consulta simples (stats, monitoramento)
// Quando PRECISA: validacoes, regras de negocio, combinar dados

9.5 middlewares/ - API Key e Validação

// API KEY (protege rotas externas)
function apiKeyAuth(req, res, next) {
  const key = req.headers['x-api-key'];
//  req.headers = headers que o cliente mandou
  if (!key || key !== process.env.MONITOR_API_KEY) {
    return res.status(401).json({ error: 'API Key invalida' });
//  return = PARA AQUI. Controller NAO executa
  }
  next();  // Chave ok! Segue pro controller
}

// VALIDACAO DE CAMPOS
function validar(campos) {
  return (req, res, next) => {
    for (const c of campos) {
      if (!req.body[c]) return res.status(400).json({ error: `${c} obrigatorio` });
    }
    next();
  };
}
module.exports = { apiKeyAuth, validar };

// Na rota: router.post('/', apiKeyAuth, validar(['nome']), ctrl.criar)
//                          1o verifica   2o valida          3o executa

9.6 database/connection.js

const mysql = require('mysql2/promise');
require('dotenv').config();

const pool = mysql.createPool({
  host: process.env.DB_HOST || 'localhost',
  user: process.env.DB_USER || 'root',
  password: process.env.DB_PASSWORD || '',
  database: process.env.DB_NAME || 'meu_banco',
  connectionLimit: 10,
//  Pool = piscina de conexoes. Reutiliza em vez de abrir/fechar toda hora
});
module.exports = { pool };

9.7 database/migration-exemplo.sql

CREATE TABLE IF NOT EXISTS exemplos (
  id INT AUTO_INCREMENT PRIMARY KEY,  -- ID unico, gerado automatico
  user_id INT NOT NULL,               -- Obrigatorio
  nome VARCHAR(255) NOT NULL,         -- Texto ate 255 chars
  descricao TEXT,                     -- Texto longo
  valor DECIMAL(10,2) DEFAULT 0,     -- 2 casas decimais
  status ENUM('ativo','inativo') DEFAULT 'ativo', -- So aceita esses
  ativo TINYINT(1) DEFAULT 1,       -- 0 ou 1 (boolean)
  criado_em TIMESTAMP DEFAULT CURRENT_TIMESTAMP, -- Auto
  FOREIGN KEY (user_id) REFERENCES users(id)
);

9.8 config/ e utils/

// config/plans.js - Valores fixos
const PLAN_PRICES = { starter: 97, profissional: 197, empresarial: 397 };
module.exports = { PLAN_PRICES };

// utils/response.js - Funcoes auxiliares
function sendSuccess(res, data, msg = 'OK', code = 200) {
  res.status(code).json({ success: true, message: msg, data });
}
function sendError(res, msg = 'Erro', code = 500) {
  res.status(code).json({ success: false, message: msg });
}
module.exports = { sendSuccess, sendError };

▶.1 Visão Geral — A Cadeia de Chamadas

Quando o usuário clica num botão e vê dados na tela, a informação percorre uma cadeia de arquivos. Cada arquivo tem UMA responsabilidade:

▶.2 Frontend — Ordem de Criação e Chamada

No frontend, você cria nesta ordem (de baixo pra cima) e os arquivos chamam de cima pra baixo:

▶.3 Backend — Ordem de Criação e Chamada

No backend, a requisição entra pela Route e vai descendo:

▶.4 Fluxo Completo — Do Clique ao Dado na Tela

Exemplo real: o usuário abre a página de Leads.

10.1 pages/ExemploPage.tsx

import { useState, useEffect } from 'react';
import { exemploService } from '@/services/exemploService';
import { Exemplo } from '@/types/exemplo';

const ExemploPage = () => {
  const [items, setItems] = useState<Exemplo[]>([]);  // lista vazia
  const [loading, setLoading] = useState(true);         // carregando
  const [error, setError] = useState<string|null>(null); // sem erro

  useEffect(() => { carregar(); }, []);
//  [] vazio = roda so quando a pagina abre

  const carregar = async () => {
    try {
      setLoading(true);
      const data = await exemploService.listar();
      setItems(data);          // coloca dados na caixa -> redesenha
    } catch (err) {
      setError('Erro ao carregar');
    } finally {
      setLoading(false);       // finally = roda sempre
    }
  };

  if (loading) return <p>Carregando...</p>;
  if (error) return <p>{error}</p>;

  return (
    <div>
      <h1>Itens ({items.length})</h1>
      {items.map(item => (
        <div key={item.id}>{item.nome}</div>
{/*    key = id unico. map = percorre array renderizando cada item */}
      ))}
    </div>
  );
};
export default ExemploPage;

10.2 components/ExemploCard.tsx

import { Exemplo } from '@/types/exemplo';

interface Props {
  item: Exemplo;                           // obrigatorio
  onDelete?: (id: number) => void;         // ? = opcional
}

export const ExemploCard = ({ item, onDelete }: Props) => {
//  { item, onDelete } = desestrutura as props recebidas
  return (
    <div className="p-4 border rounded-lg">
{/*  className = class no HTML. Tailwind CSS pra estilizar */}
      <h3>{item.nome}</h3>
      {onDelete && (
{/*    && = "se existir onDelete, mostra o botao" */}
        <button onClick={() => onDelete(item.id)}>Deletar</button>
{/*    () => = funcao anonima. Sem isso, executaria ao renderizar */}
      )}
    </div>
  );
};
// Uso: <ExemploCard item={meuItem} onDelete={handleDelete} />

10.3 services/exemploService.ts

import { apiFetch } from './api';
import { Exemplo } from '@/types/exemplo';

export const exemploService = {
  async listar(): Promise<Exemplo[]> {
    return apiFetch('/exemplos');            // GET
  },
  async criar(data: Partial<Exemplo>) {
    return apiFetch('/exemplos', {
      method: 'POST',
      body: JSON.stringify(data),            // objeto -> texto JSON
    });
  },
  async deletar(id: number) {
    return apiFetch(`/exemplos/${id}`, { method: 'DELETE' });
  },
};

10.4 contexts/ExemploContext.tsx

import { createContext, useContext, useState, useEffect, ReactNode } from 'react';

interface ContextType {
  usuario: { nome: string } | null;
  logout: () => void;
}
const Ctx = createContext<ContextType | undefined>(undefined);

export const AuthProvider = ({ children }: { children: ReactNode }) => {
  const [usuario, setUsuario] = useState(null);
  const logout = () => setUsuario(null);

  return (
    <Ctx.Provider value={{ usuario, logout }}>
      {children}
{/*    children = tudo que estiver DENTRO do Provider */}
    </Ctx.Provider>
  );
};

export const useAuth = () => {
  const ctx = useContext(Ctx);
  if (!ctx) throw new Error('Fora do Provider');
  return ctx;
};
// App.tsx: <AuthProvider><App/></AuthProvider>
// Qualquer page: const { usuario } = useAuth();

10.5 hooks/useExemplos.ts

import { useState, useEffect } from 'react';
import { exemploService } from '@/services/exemploService';
import { Exemplo } from '@/types/exemplo';

export const useExemplos = () => {
  const [items, setItems] = useState<Exemplo[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => { carregar(); }, []);

  const carregar = async () => {
    const data = await exemploService.listar();
    setItems(data); setLoading(false);
  };
  const adicionar = async (data: Partial<Exemplo>) => {
    const novo = await exemploService.criar(data);
    setItems(prev => [...prev, novo]);
//  ...prev = espalha itens anteriores. Adiciona novo no final
  };
  const remover = async (id: number) => {
    await exemploService.deletar(id);
    setItems(prev => prev.filter(i => i.id !== id));
//  filter = mantem todos MENOS o que tem esse id
  };
  return { items, loading, adicionar, remover, recarregar: carregar };
};
// Uso: const { items, loading, adicionar } = useExemplos();

10.6 types/exemplo.ts

export interface Exemplo {
  id: number;                                  // numero
  nome: string;                                 // texto
  descricao?: string;                            // ? = opcional
  status: 'ativo' | 'inativo';                  // so esses valores
  ativo: boolean;                                // true/false
  tags?: string[];                               // array de textos
  criado_em: string;                             // data como texto
}

export type CriarDTO = Omit<Exemplo, 'id' | 'criado_em'>;
// Omit = tudo do Exemplo MENOS id e criado_em

src/services/api.ts - A base de todas as chamadas

const API_URL = 'http://localhost:3737';

export async function apiFetch(endpoint: string, options: RequestInit = {}) {
  const token = localStorage.getItem('token');

  const res = await fetch(`${API_URL}${endpoint}`, {
    ...options,
    headers: {
      'Content-Type': 'application/json',
      ...(token ? { 'Authorization': `Bearer ${token}` } : {}),
//    Se tem token JWT, manda no header
      ...options.headers,
    },
  });

  if (!res.ok) {
    const err = await res.json();
    throw new Error(err.message || 'Erro');
  }
  return res.json();
}

Ordem pra criar qualquer funcionalidade

Consumir uma API é pedir dados pra um servidor e exibir na tela. Vamos usar duas APIs gratuitas que não precisam de cadastro:

12.1 fetch + await - Buscando dados

fetch é a função nativa do JavaScript pra fazer requisições HTTP. Ela é assíncrona (demora), então precisa de await.

// fetch = "buscar" - faz requisição HTTP pra uma URL
// await = "espere" - pausa até o servidor responder

const resposta = await fetch('https://viacep.com.br/ws/01001000/json/');
// 1º await: espera o servidor RESPONDER

const dados = await resposta.json();
// 2º await: espera CONVERTER a resposta pra JSON

console.log(dados.logradouro);  // "Praça da Sé"
console.log(dados.bairro);      // "Sé"
console.log(dados.localidade);  // "São Paulo"

12.2 Exemplo 1: Busca de CEP (ViaCEP)

Um input onde o usuário digita o CEP e vê o endereço. Usa: useState, fetch, await, try/catch, eventos.

import { useState } from 'react';

const BuscaCep = () => {
  const [cep, setCep] = useState('');
//     valor  função-pra-mudar    valor-inicial (vazio)

  const [endereco, setEndereco] = useState(null);
//  null = "nada ainda" (não buscou)

  const [erro, setErro] = useState('');

  // Função que busca o CEP na API
  const buscar = async () => {
//  async = "essa função vai ter await dentro"
    try {
      setErro('');
      const res = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
//    template string: `texto ${variavel}` = junta texto com variável
      const dados = await res.json();

      if (dados.erro) {
        setErro('CEP não encontrado');
        setEndereco(null);
      } else {
        setEndereco(dados);
//      Coloca os dados na "caixa" → React redesenha a tela
      }
    } catch (err) {
      setErro('Erro ao buscar CEP');
    }
  };

  return (
    <div>
      <h2>Busca de CEP</h2>

      <input
        value={cep}
{/*    value = o que aparece no input (ligado ao useState) */}
        onChange={(e) => setCep(e.target.value)}
{/*    onChange = "quando digitar algo, atualize o estado"
        e.target.value = texto que o usuário digitou */}
        placeholder="Digite o CEP"
      />

      <button onClick={buscar}>Buscar</button>
{/*    onClick = "quando clicar, execute a função buscar" */}

      {erro && <p style={{ color: 'red' }}>{erro}</p>}
{/*    && = "se erro existir, mostra o <p>" */}

      {endereco && (
        <div>
          <p><b>Rua:</b> {endereco.logradouro}</p>
          <p><b>Bairro:</b> {endereco.bairro}</p>
          <p><b>Cidade:</b> {endereco.localidade} - {endereco.uf}</p>
        </div>
      )}
    </div>
  );
};
export default BuscaCep;

12.3 Exemplo 2: Lista de Usuários (JSONPlaceholder)

Uma lista que carrega automaticamente quando a página abre. Usa: useEffect, map, props, componentes.

Passo 1: O componente filho (Card)

// UserCard.tsx - Componente que mostra UM usuário

// interface = formato dos dados (TypeScript)
interface UserCardProps {
  nome: string;
  email: string;
  cidade: string;
}
// Props = dados que o componente PAI passa pro FILHO
// É como parâmetro de função

const UserCard = ({ nome, email, cidade }: UserCardProps) => {
//                 ^^^^^^^^^^^^^^^^^^^^^^^^
//   Desestrutura as props: pega nome, email e cidade
  return (
    <div style={{ border: '1px solid #ddd', padding: '12px', borderRadius: '8px', marginBottom: '8px' }}>
      <h3>{nome}</h3>
      <p>{email}</p>
      <p>{cidade}</p>
    </div>
  );
};
export default UserCard;

Passo 2: A página pai (Lista)

// ListaUsuarios.tsx - Página que busca e mostra a lista
import { useState, useEffect } from 'react';
import UserCard from './UserCard';

// Formato dos dados que a API retorna
interface User {
  id: number;
  name: string;
  email: string;
  address: { city: string };
}

const ListaUsuarios = () => {
  const [usuarios, setUsuarios] = useState<User[]>([]);
//  User[] = array de User. Começa com [] (lista vazia)

  const [loading, setLoading] = useState(true);

  // useEffect com [] = roda UMA VEZ quando a página abre
  useEffect(() => {
    buscarUsuarios();
  }, []);
//  [] vazio = "rode só quando o componente aparecer"

  const buscarUsuarios = async () => {
    const res = await fetch('https://jsonplaceholder.typicode.com/users');
    const dados = await res.json();
    setUsuarios(dados);
//  Coloca os 10 usuários na "caixa" → tela redesenha
    setLoading(false);
  };

  if (loading) return <p>Carregando...</p>;

  return (
    <div>
      <h2>Usuários ({usuarios.length})</h2>
{/*    .length = quantidade de itens no array */}

      {usuarios.map(user => (
{/*    map = percorre CADA item do array e transforma em elemento
        user = cada usuário, um de cada vez */}
        <UserCard
          key={user.id}
{/*      key = identificador único. React usa pra saber qual mudou */}
          nome={user.name}
          email={user.email}
          cidade={user.address.city}
{/*      Passando PROPS pro componente filho */}
        />
      ))}
    </div>
  );
};
export default ListaUsuarios;

12.4 Fluxo Completo: Da API até a Tela

12.5 Resumo dos Conceitos

P1.1 Instalando o MySQL

# No Ubuntu/Debian:
$ sudo apt update
$ sudo apt install mysql-server
$ sudo mysql_secure_installation

# Entrar no MySQL:
$ sudo mysql -u root -p

P1.2 Criando o Banco e a Tabela

-- Execute no terminal do MySQL:

-- 1. Criar o banco
CREATE DATABASE meu_app;
USE meu_app;

-- 2. Criar tabela de usuários
CREATE TABLE usuarios (
  id        INT AUTO_INCREMENT PRIMARY KEY,
  nome      VARCHAR(100) NOT NULL,
  email     VARCHAR(150) NOT NULL UNIQUE,
  senha     VARCHAR(255) NOT NULL,     -- armazena hash, NUNCA texto puro
  criado_em TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- 3. Verificar se criou
DESCRIBE usuarios;

P1.3 Criando um Usuário para a Aplicação

-- Criar usuário MySQL para a app (não use root em produção!)
CREATE USER 'app_user'@'localhost' IDENTIFIED BY 'senha_segura_123';
GRANT ALL PRIVILEGES ON meu_app.* TO 'app_user'@'localhost';
FLUSH PRIVILEGES;

P2.1 Setup do Projeto Backend

$ mkdir login-app && cd login-app
$ mkdir backend && cd backend
$ npm init -y
$ npm install express mysql2 bcryptjs jsonwebtoken cors dotenv

P2.2 Arquivo .env

# backend/.env
DB_HOST=localhost
DB_USER=app_user
DB_PASS=senha_segura_123
DB_NAME=meu_app
JWT_SECRET=minha_chave_secreta_super_forte_123
PORT=3737

P2.3 Conexão com o Banco

// backend/database.js
const mysql = require('mysql2/promise');
require('dotenv').config();

const pool = mysql.createPool({
  host: process.env.DB_HOST,
  user: process.env.DB_USER,
  password: process.env.DB_PASS,
  database: process.env.DB_NAME,
});

module.exports = pool;
// pool = "piscina" de conexões. Reutiliza conexões automaticamente.

P2.4 Servidor Express

// backend/server.js — arquivo principal
const express = require('express');
const cors = require('cors');
require('dotenv').config();

const authRoutes = require('./routes/auth');

const app = express();

// Middlewares
app.use(cors());                    // Permite React acessar
app.use(express.json());             // Lê JSON do body

// Rotas
app.use('/api/auth', authRoutes);     // /api/auth/register, /api/auth/login

// Iniciar
const PORT = process.env.PORT || 3737;
app.listen(PORT, () => {
  console.log(`✅ Servidor rodando na porta ${PORT}`);
});

P2.5 Rotas de Registro e Login

Este é o arquivo mais importante do backend. Ele tem duas rotas:

// backend/routes/auth.js
const express = require('express');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const pool = require('../database');

const router = express.Router();

// ═══════════════════════════════════════
// POST /api/auth/register — Criar conta
// ═══════════════════════════════════════
router.post('/register', async (req, res) => {
  try {
    const { nome, email, senha } = req.body;

    // 1. Validar campos
    if (!nome || !email || !senha) {
      return res.status(400).json({ erro: 'Preencha todos os campos' });
    }

    // 2. Verificar se email já existe
    const [existe] = await pool.query(
      'SELECT id FROM usuarios WHERE email = ?',
      [email]
    );
    if (existe.length > 0) {
      return res.status(400).json({ erro: 'Email já cadastrado' });
    }

    // 3. Criptografar a senha
    const senhaCripto = await bcrypt.hash(senha, 10);
    //                                  ↑ 10 = "custo" do hash (mais alto = mais seguro)

    // 4. Salvar no banco
    const [result] = await pool.query(
      'INSERT INTO usuarios (nome, email, senha) VALUES (?, ?, ?)',
      [nome, email, senhaCripto]
    );

    // 5. Gerar token JWT
    const token = jwt.sign(
      { id: result.insertId, nome, email },  // dados dentro do token
      process.env.JWT_SECRET,                 // chave secreta
      { expiresIn: '7d' }                     // expira em 7 dias
    );

    res.json({ sucesso: true, token, usuario: { id: result.insertId, nome, email } });
  } catch (error) {
    console.error('Erro no registro:', error);
    res.status(500).json({ erro: 'Erro interno do servidor' });
  }
});

// ═══════════════════════════════════════
// POST /api/auth/login — Entrar
// ═══════════════════════════════════════
router.post('/login', async (req, res) => {
  try {
    const { email, senha } = req.body;

    // 1. Validar campos
    if (!email || !senha) {
      return res.status(400).json({ erro: 'Preencha email e senha' });
    }

    // 2. Buscar usuário pelo email
    const [rows] = await pool.query(
      'SELECT * FROM usuarios WHERE email = ?',
      [email]
    );

    if (rows.length === 0) {
      return res.status(401).json({ erro: 'Email ou senha incorretos' });
    }

    const usuario = rows[0];

    // 3. Comparar senha digitada com hash do banco
    const senhaCorreta = await bcrypt.compare(senha, usuario.senha);
    //                                  ↑ texto puro  ↑ hash do banco

    if (!senhaCorreta) {
      return res.status(401).json({ erro: 'Email ou senha incorretos' });
    }

    // 4. Gerar token JWT
    const token = jwt.sign(
      { id: usuario.id, nome: usuario.nome, email: usuario.email },
      process.env.JWT_SECRET,
      { expiresIn: '7d' }
    );

    res.json({
      sucesso: true,
      token,
      usuario: { id: usuario.id, nome: usuario.nome, email: usuario.email }
    });
  } catch (error) {
    console.error('Erro no login:', error);
    res.status(500).json({ erro: 'Erro interno do servidor' });
  }
});

module.exports = router;

P2.6 Testando o Backend

$ node server.js
✅ Servidor rodando na porta 3737

# Testar registro (outro terminal):
$ curl -X POST http://localhost:3737/api/auth/register \
  -H "Content-Type: application/json" \
  -d '{"nome":"João","email":"joao@test.com","senha":"123456"}'

# Resposta esperada:
{"sucesso":true,"token":"eyJhbG...","usuario":{"id":1,"nome":"João","email":"joao@test.com"}}

# Testar login:
$ curl -X POST http://localhost:3737/api/auth/login \
  -H "Content-Type: application/json" \
  -d '{"email":"joao@test.com","senha":"123456"}'

mysql> SELECT * FROM usuarios;
+----+-------+----------------+--------------------------------------------------------------+
| id | nome  | email          | senha                                                        |
+----+-------+----------------+--------------------------------------------------------------+
|  1 | João  | joao@test.com  | $2b$10$xK8qF...  ← hash bcrypt (nunca texto puro!)          |
+----+-------+----------------+--------------------------------------------------------------+

P3.1 Estrutura de Pastas

login-app/
  ├── backend/           # ← já criamos (P2)
  │   ├── .env
  │   ├── database.js
  │   ├── server.js
  │   └── routes/auth.js
  │
  └── frontend/          # ← vamos criar agora
      └── src/
          ├── App.tsx
          ├── pages/
          │   ├── Login.tsx
          │   ├── Register.tsx
          │   └── Dashboard.tsx
          └── main.tsx

$ cd login-app
$ npm create vite@latest frontend -- --template react-ts
$ cd frontend && npm install
$ npm install react-router-dom

P3.2 Página de Login — Passo a Passo

// frontend/src/pages/Login.tsx
import { useState } from 'react';
import { useNavigate, Link } from 'react-router-dom';

export default function Login() {
  // ── Estado do formulário ──
  const [email, setEmail] = useState('');          // guarda o email
  const [senha, setSenha] = useState('');          // guarda a senha
  const [erro, setErro] = useState('');            // mensagem de erro
  const [loading, setLoading] = useState(false);  // botão desabilitado

  const navigate = useNavigate();  // pra redirecionar depois do login

  // ── Função chamada ao clicar "Entrar" ──
  async function handleLogin() {
    // 1. Validação básica
    if (!email || !senha) {
      setErro('Preencha email e senha');
      return;
    }

    setLoading(true);
    setErro('');

    try {
      // 2. Enviar para o backend
      const resposta = await fetch('http://localhost:3737/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, senha }),
      });

      const dados = await resposta.json();

      // 3. Verificar resposta
      if (!dados.sucesso) {
        setErro(dados.erro || 'Erro ao fazer login');
        return;
      }

      // 4. Salvar token e redirecionar
      localStorage.setItem('token', dados.token);
      localStorage.setItem('usuario', JSON.stringify(dados.usuario));
      navigate('/dashboard');

    } catch {
      setErro('Erro de conexão com o servidor');
    } finally {
      setLoading(false);
    }
  }

  // ── Tela ──
  return (
    <div style={{ maxWidth: '400px', margin: '80px auto', padding: '32px', fontFamily: 'sans-serif' }}>
      <h1>Login</h1>

      {/* Mostra erro se existir */}
      {erro && <p style={{ color: 'red' }}>{erro}</p>}

      {/* Input de email — onChange atualiza o estado */}
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        style={{ width: '100%', padding: '10px', marginBottom: '12px', fontSize: '16px' }}
      />

      {/* Input de senha */}
      <input
        type="password"
        placeholder="Senha"
        value={senha}
        onChange={(e) => setSenha(e.target.value)}
        style={{ width: '100%', padding: '10px', marginBottom: '16px', fontSize: '16px' }}
        onKeyDown={(e) => e.key === 'Enter' && handleLogin()}
      />
      {/*  ↑ onKeyDown: se apertar Enter, faz login */}

      {/* Botão — onClick chama handleLogin */}
      <button
        onClick={handleLogin}
        disabled={loading}
        style={{ width: '100%', padding: '12px', fontSize: '16px', cursor: 'pointer' }}
      >
        {loading ? 'Entrando...' : 'Entrar'}
      </button>

      <p style={{ marginTop: '16px', textAlign: 'center' }}>
        Não tem conta? <Link to="/register">Criar conta</Link>
      </p>
    </div>
  );
}

P3.3 Página de Registro

// frontend/src/pages/Register.tsx
import { useState } from 'react';
import { useNavigate, Link } from 'react-router-dom';

export default function Register() {
  const [form, setForm] = useState({ nome: '', email: '', senha: '' });
  const [erro, setErro] = useState('');
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();

  // Uma função pra todos os inputs (truque do [name])
  function handleChange(e) {
    setForm({ ...form, [e.target.name]: e.target.value });
  }

  async function handleRegister() {
    if (!form.nome || !form.email || !form.senha) {
      setErro('Preencha todos os campos');
      return;
    }

    setLoading(true);
    setErro('');

    try {
      const resp = await fetch('http://localhost:3737/api/auth/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });

      const dados = await resp.json();

      if (!dados.sucesso) {
        setErro(dados.erro);
        return;
      }

      localStorage.setItem('token', dados.token);
      localStorage.setItem('usuario', JSON.stringify(dados.usuario));
      navigate('/dashboard');
    } catch {
      setErro('Erro de conexão');
    } finally {
      setLoading(false);
    }
  }

  return (
    <div style={{ maxWidth: '400px', margin: '80px auto', padding: '32px' }}>
      <h1>Criar Conta</h1>
      {erro && <p style={{ color: 'red' }}>{erro}</p>}
      <input name="nome"  placeholder="Nome"  value={form.nome}  onChange={handleChange} style={{ width:'100%',padding:'10px',marginBottom:'12px' }} />
      <input name="email" placeholder="Email" value={form.email} onChange={handleChange} type="email" style={{ width:'100%',padding:'10px',marginBottom:'12px' }} />
      <input name="senha" placeholder="Senha" value={form.senha} onChange={handleChange} type="password" style={{ width:'100%',padding:'10px',marginBottom:'16px' }} />
      <button onClick={handleRegister} disabled={loading} style={{ width:'100%',padding:'12px',fontSize:'16px' }}>
        {loading ? 'Criando...' : 'Criar Conta'}
      </button>
      <p style={{ marginTop:'16px', textAlign:'center' }}>
        Já tem conta? <Link to="/login">Entrar</Link>
      </p>
    </div>
  );
}

P3.4 Dashboard — Página Protegida

// frontend/src/pages/Dashboard.tsx
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';

export default function Dashboard() {
  const navigate = useNavigate();
  const [usuario, setUsuario] = useState<{nome: string, email: string} | null>(null);

  // useEffect roda DEPOIS do render — lugar certo para verificar auth
  useEffect(() => {
    const token = localStorage.getItem('token');
    if (!token) {
      navigate('/login');
      return;
    }
    const dados = JSON.parse(localStorage.getItem('usuario') || 'null');
    setUsuario(dados);
  }, [navigate]);

  function handleLogout() {
    localStorage.removeItem('token');
    localStorage.removeItem('usuario');
    navigate('/login');
  }

  if (!usuario) return <p>Carregando...</p>;

  return (
    <div style={{ maxWidth: '600px', margin: '80px auto', padding: '32px' }}>
      <h1>Dashboard</h1>
      <p>Bem-vindo, <b>{usuario.nome}</b>!</p>
      <p>Email: {usuario.email}</p>
      <button onClick={handleLogout}>Sair</button>
    </div>
  );
}

P4.1 App.tsx — Rotas

// frontend/src/App.tsx
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import Login from './pages/Login';
import Register from './pages/Register';
import Dashboard from './pages/Dashboard';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login"     element={<Login />} />
        <Route path="/register"  element={<Register />} />
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="*"          element={<Navigate to="/login" />} />
      </Routes>
    </BrowserRouter>
  );
}

P4.2 Fluxo Completo — Do Clique ao Banco

P4.3 Rodando o Projeto

# Terminal 1 — Backend:
$ cd login-app/backend
$ node server.js
✅ Servidor rodando na porta 3737

# Terminal 2 — Frontend:
$ cd login-app/frontend
$ npm run dev
  ➜ Local: http://localhost:5173

# Abrir no navegador: http://localhost:5173/register

P4.4 Checklist — Tudo Funcionando?

Autenticação é como o sistema sabe quem é você. JWT (JSON Web Token) é o padrão mais usado em APIs.

13.1 Como Funciona

O token é como um crachá digital. Você faz login, recebe o crachá, e mostra ele em cada porta que precisa passar.

13.2 Instalando Dependências

# No backend
npm install jsonwebtoken bcryptjs

13.3 Registro de Usuário

// routes/auth.js
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');

// POST /auth/register
router.post('/register', async (req, res) => {
  const { nome, email, senha } = req.body;

  // 1. Verificar se email já existe
  const [existe] = await pool.query(
    'SELECT id FROM users WHERE email = ?', [email]
  );
  if (existe.length > 0) {
    return res.status(400).json({ error: 'Email já cadastrado' });
  }

  // 2. Criptografar a senha (NUNCA salvar senha pura)
  const senhaHash = await bcrypt.hash(senha, 10);
  //                                        ↑ "força" da criptografia

  // 3. Inserir no banco
  const [result] = await pool.query(
    'INSERT INTO users (nome, email, senha_hash) VALUES (?, ?, ?)',
    [nome, email, senhaHash]
  );

  res.status(201).json({ message: 'Usuário criado!', id: result.insertId });
});

13.4 Login (Gerar Token)

// POST /auth/login
router.post('/login', async (req, res) => {
  const { email, senha } = req.body;

  // 1. Buscar usuário pelo email
  const [users] = await pool.query(
    'SELECT * FROM users WHERE email = ?', [email]
  );
  if (users.length === 0) {
    return res.status(401).json({ error: 'Email ou senha inválidos' });
  }

  const user = users[0];

  // 2. Comparar senha digitada com o hash do banco
  const senhaCorreta = await bcrypt.compare(senha, user.senha_hash);
  if (!senhaCorreta) {
    return res.status(401).json({ error: 'Email ou senha inválidos' });
  }

  // 3. Gerar o token JWT
  const token = jwt.sign(
    { id: user.id, email: user.email },  // dados dentro do token
    process.env.JWT_SECRET,               // chave secreta (do .env)
    { expiresIn: '24h' }                  // expira em 24 horas
  );

  res.json({ token, user: { id: user.id, nome: user.nome } });
});

13.5 Middleware de Proteção

O middleware verifica o token em cada requisição protegida. Se não tiver token ou for inválido, bloqueia.

// middlewares/auth.js
const jwt = require('jsonwebtoken');

function authenticateToken(req, res, next) {
  // Pega o token do header: "Bearer eyJhbGciOi..."
  const authHeader = req.headers['authorization'];
  const token = authHeader && authHeader.split(' ')[1];
  //                                    ↑ pega só o token, sem "Bearer"

  if (!token) {
    return res.status(401).json({ error: 'Token não fornecido' });
  }

  jwt.verify(token, process.env.JWT_SECRET, (err, decoded) => {
    if (err) {
      return res.status(403).json({ error: 'Token inválido' });
    }
    req.user = decoded;  // coloca os dados do user no req
    next();               // libera para a próxima função
  });
}

module.exports = { authenticateToken };

13.6 Usando o Middleware nas Rotas

const { authenticateToken } = require('./middlewares/auth');

// Rota PÚBLICA (qualquer um acessa)
router.get('/produtos', produtoController.listar);

// Rota PROTEGIDA (precisa de token)
router.post('/produtos', authenticateToken, produtoController.criar);
router.delete('/produtos/:id', authenticateToken, produtoController.deletar);

// Dentro do controller, você tem acesso ao usuário logado:
exports.criar = async (req, res) => {
  const userId = req.user.id;  // ← vem do middleware!
  // ...
};

13.7 No Frontend (React)

// services/api.ts - salvar e enviar token
import axios from 'axios';

const api = axios.create({ baseURL: 'http://localhost:3737' });

// Interceptor: adiciona token em TODA requisição automaticamente
api.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// Login: salva o token
async function login(email: string, senha: string) {
  const { data } = await api.post('/auth/login', { email, senha });
  localStorage.setItem('token', data.token);  // salva no navegador
  return data.user;
}

// Logout: remove o token
function logout() {
  localStorage.removeItem('token');
  window.location.href = '/login';
}

13.8 Variável de Ambiente

# backend/.env
JWT_SECRET=minha_chave_super_secreta_nunca_commitar_isso_123

13.9 Avançado: Roles e Permissões

No nível 6 você aprendeu login básico. Agora vamos adicionar roles — diferentes níveis de acesso (admin, user).

// Ao gerar o token, inclua o role do usuário
const token = jwt.sign(
  { id: user.id, email: user.email, role: user.role },  // ← role aqui
  process.env.JWT_SECRET,
  { expiresIn: '24h' }
);

// Middleware que verifica se é admin
function isAdmin(req, res, next) {
  if (req.user.role !== 'admin') {
    return res.status(403).json({ error: 'Acesso negado. Apenas administradores.' });
  }
  next();
}

// Uso nas rotas:
router.get('/admin/users', authenticateToken, isAdmin, adminController.listarUsuarios);
//                         ↑ verifica token      ↑ verifica se é admin

13.10 Avançado: Token Expirado no Frontend

// Interceptor de RESPOSTA: detecta token expirado e faz logout
api.interceptors.response.use(
  (response) => response,  // sucesso: retorna normal
  (error) => {
    if (error.response?.status === 401 || error.response?.status === 403) {
      // Token expirou ou é inválido
      localStorage.removeItem('token');
      localStorage.removeItem('usuario');
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

13.11 Segurança — Checklist

// Segurança básica no Express (instale: npm install helmet express-rate-limit)
const helmet = require('helmet');
const rateLimit = require('express-rate-limit');

app.use(helmet());  // headers de segurança

// Limitar tentativas de login: máximo 5 por minuto por IP
const loginLimiter = rateLimit({
  windowMs: 60 * 1000,  // 1 minuto
  max: 5,
  message: { error: 'Muitas tentativas. Tente novamente em 1 minuto.' },
});
router.post('/login', loginLimiter, authController.login);

13.5.1 Tipos de Testes

13.5.2 Ferramentas

# Instalar no BACKEND
npm install --save-dev jest supertest

# Instalar no FRONTEND (Vite)
npm install --save-dev @testing-library/react @testing-library/jest-dom jsdom vitest

13.5.3 Jest — Testes Unitários (Backend)

// backend/tests/utils.test.js

// Arquivo: testa funções puras (sem banco, sem API)
function normalizarTelefone(tel) {
  let limpo = tel.replace(/\D/g, '');
  if (!limpo.startsWith('55')) limpo = '55' + limpo;
  return limpo;
}

// describe = grupo de testes
describe('normalizarTelefone', () => {

  // it (ou test) = 1 teste
  it('deve remover caracteres não numéricos', () => {
    expect(normalizarTelefone('(21) 99999-9999')).toBe('5521999999999');
  });

  it('deve adicionar 55 se não tiver', () => {
    expect(normalizarTelefone('21999999999')).toBe('5521999999999');
  });

  it('não deve duplicar o 55', () => {
    expect(normalizarTelefone('5521999999999')).toBe('5521999999999');
  });
});

Matchers mais usados:

Configurar no package.json (backend):

{
  "scripts": {
    "test": "jest --verbose",
    "test:watch": "jest --watch"
  }
}

# Rodar testes
npm test

# Rodar em modo watch (re-roda quando muda arquivo)
npm run test:watch

13.5.4 Supertest — Testar Rotas da API

// backend/tests/auth.test.js
const request = require('supertest');
const app = require('../src/app');  // seu express app

describe('POST /auth/register', () => {

  it('deve criar usuário com dados válidos', async () => {
    const res = await request(app)
      .post('/auth/register')
      .send({ nome: 'Teste', email: 'teste@test.com', senha: '123456' });

    expect(res.status).toBe(201);
    expect(res.body.success).toBe(true);
  });

  it('deve rejeitar sem email', async () => {
    const res = await request(app)
      .post('/auth/register')
      .send({ nome: 'Teste', senha: '123456' });

    expect(res.status).toBe(400);
  });
});

describe('POST /auth/login', () => {

  it('deve retornar token com credenciais corretas', async () => {
    const res = await request(app)
      .post('/auth/login')
      .send({ email: 'teste@test.com', senha: '123456' });

    expect(res.status).toBe(200);
    expect(res.body.data.token).toBeTruthy();
  });

  it('deve rejeitar senha errada', async () => {
    const res = await request(app)
      .post('/auth/login')
      .send({ email: 'teste@test.com', senha: 'errada' });

    expect(res.status).toBe(401);
  });
});

13.5.5 React Testing Library — Testar Componentes

Configurar vitest (Vite):

// vite.config.ts
export default defineConfig({
  // ... resto da config
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './src/test/setup.ts',
  },
});

// src/test/setup.ts
import '@testing-library/jest-dom';

Testar um componente:

// src/components/__tests__/Badge.test.tsx
import { render, screen } from '@testing-library/react';
import Badge from '../Badge';

describe('Badge', () => {

  it('deve renderizar o texto', () => {
    render(<Badge texto="Ativo" cor="verde" />);
    expect(screen.getByText('Ativo')).toBeInTheDocument();
  });

  it('deve aplicar classe de cor', () => {
    render(<Badge texto="Erro" cor="vermelho" />);
    const el = screen.getByText('Erro');
    expect(el).toHaveClass('bg-red-100');
  });
});

Testar interação (clique, digitação):

// src/components/__tests__/LoginForm.test.tsx
import { render, screen, fireEvent } from '@testing-library/react';
import LoginForm from '../LoginForm';

it('deve chamar onSubmit com email e senha', () => {
  const mockSubmit = jest.fn();
  render(<LoginForm onSubmit={mockSubmit} />);

  // Preencher campos
  fireEvent.change(screen.getByPlaceholderText('Email'), {
    target: { value: 'joao@test.com' },
  });
  fireEvent.change(screen.getByPlaceholderText('Senha'), {
    target: { value: '123456' },
  });

  // Clicar no botão
  fireEvent.click(screen.getByText('Entrar'));

  // Verificar se chamou com os dados corretos
  expect(mockSubmit).toHaveBeenCalledWith({
    email: 'joao@test.com',
    senha: '123456',
  });
});

13.5.6 Queries do Testing Library

13.5.8 Testes no Frontend — Em Profundidade

A seção anterior mostrou o básico. Agora vamos cobrir os cenários reais que todo frontend precisa testar: componentes com estado, chamadas de API, hooks customizados e mocking.

Configuração completa (Vitest + React Testing Library)

// vite.config.ts
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/test/setup.ts',
    css: true,
  },
});

// src/test/setup.ts
import '@testing-library/jest-dom';

Testar componente com estado (useState)

// src/components/Counter.tsx
const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p data-testid="count">{count}</p>
      <button onClick={() => setCount(c => c + 1)}>+</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
};

// src/components/__tests__/Counter.test.tsx
import { render, screen, fireEvent } from '@testing-library/react';
import Counter from '../Counter';

describe('Counter', () => {
  it('começa em 0', () => {
    render(<Counter />);
    expect(screen.getByTestId('count')).toHaveTextContent('0');
  });

  it('incrementa ao clicar +', () => {
    render(<Counter />);
    fireEvent.click(screen.getByText('+'));
    fireEvent.click(screen.getByText('+'));
    expect(screen.getByTestId('count')).toHaveTextContent('2');
  });

  it('reseta ao clicar Reset', () => {
    render(<Counter />);
    fireEvent.click(screen.getByText('+'));
    fireEvent.click(screen.getByText('Reset'));
    expect(screen.getByTestId('count')).toHaveTextContent('0');
  });
});

Testar componente com API (mock do fetch)

// Componente que busca dados de uma API
const UserList = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/users')
      .then(r => r.json())
      .then(data => { setUsers(data); setLoading(false); });
  }, []);

  if (loading) return <p>Carregando...</p>;
  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.nome}</li>)}
    </ul>
  );
};

// __tests__/UserList.test.tsx
import { render, screen, waitFor } from '@testing-library/react';
import UserList from '../UserList';

// Mock global do fetch
const mockUsers = [
  { id: 1, nome: 'João' },
  { id: 2, nome: 'Maria' },
];

beforeEach(() => {
  global.fetch = vi.fn(() =>
    Promise.resolve({
      ok: true,
      json: () => Promise.resolve(mockUsers),
    })
  );
});

afterEach(() => { vi.restoreAllMocks(); });

describe('UserList', () => {
  it('mostra loading inicialmente', () => {
    render(<UserList />);
    expect(screen.getByText('Carregando...')).toBeInTheDocument();
  });

  it('mostra lista de usuários após carregar', async () => {
    render(<UserList />);

    // waitFor espera o componente atualizar (API retornou)
    await waitFor(() => {
      expect(screen.getByText('João')).toBeInTheDocument();
      expect(screen.getByText('Maria')).toBeInTheDocument();
    });

    // Verifica que loading sumiu
    expect(screen.queryByText('Carregando...')).not.toBeInTheDocument();
  });

  it('chamou fetch com a URL correta', async () => {
    render(<UserList />);
    await waitFor(() => {
      expect(global.fetch).toHaveBeenCalledWith('/api/users');
    });
  });
});

Testar formulário com validação

// __tests__/LoginForm.test.tsx
import { render, screen, fireEvent, waitFor } from '@testing-library/react';

const mockOnSubmit = vi.fn();

it('não envia se email estiver vazio', () => {
  render(<LoginForm onSubmit={mockOnSubmit} />);

  // Preenche só a senha, email fica vazio
  fireEvent.change(screen.getByPlaceholderText('Senha'), {
    target: { value: '123456' },
  });
  fireEvent.click(screen.getByText('Entrar'));

  // Verifica que a função NÃO foi chamada
  expect(mockOnSubmit).not.toHaveBeenCalled();

  // Verifica que mensagem de erro apareceu
  expect(screen.getByText('Email obrigatório')).toBeInTheDocument();
});

it('envia com dados corretos', () => {
  render(<LoginForm onSubmit={mockOnSubmit} />);

  fireEvent.change(screen.getByPlaceholderText('Email'), {
    target: { value: 'joao@email.com' },
  });
  fireEvent.change(screen.getByPlaceholderText('Senha'), {
    target: { value: '123456' },
  });
  fireEvent.click(screen.getByText('Entrar'));

  expect(mockOnSubmit).toHaveBeenCalledWith({
    email: 'joao@email.com',
    senha: '123456',
  });
});

Mocking de módulos (serviços)

// Quando o componente importa um service, você pode "mockar" o módulo inteiro

// O componente faz: import { getLeads } from '../services/leadService'
vi.mock('../services/leadService', () => ({
  getLeads: vi.fn(() => Promise.resolve({
    data: [
      { id: 1, nome: 'Empresa A', status: 'novo' },
      { id: 2, nome: 'Empresa B', status: 'contatado' },
    ],
  })),
}));

it('renderiza lista de leads do service', async () => {
  render(<LeadsPage />);

  await waitFor(() => {
    expect(screen.getByText('Empresa A')).toBeInTheDocument();
    expect(screen.getByText('Empresa B')).toBeInTheDocument();
  });
});

Rodar testes e ver cobertura

# Rodar todos os testes
$ npx vitest

# Rodar em modo watch (re-roda quando salva)
$ npx vitest --watch

# Ver cobertura de código (quais linhas estão testadas)
$ npx vitest --coverage

# Rodar só testes de um arquivo
$ npx vitest Counter

Checklist de Testes no Frontend

13.5.7 Checklist de Testes

1 "Cannot read properties of undefined (reading 'X')"

O erro mais comum do JavaScript. Significa que você tentou acessar uma propriedade de algo que é undefined.

// CAUSA: dados ainda não carregaram (API assíncrona)
const [user, setUser] = useState(null);
return <p>{user.nome}</p>;  // ERRO! user é null no primeiro render

// SOLUÇÃO 1: optional chaining (?.)  
return <p>{user?.nome}</p>;  // retorna undefined em vez de dar erro

// SOLUÇÃO 2: guard clause
if (!user) return <p>Carregando...</p>;
return <p>{user.nome}</p>;

2 "Module not found: Can't resolve './Componente'"

// CAUSAS:
// 1. Nome do arquivo errado (maiúscula/minúscula importa!)
import Badge from './badge';    // ERRO se o arquivo é Badge.tsx
import Badge from './Badge';    // CERTO

// 2. Caminho errado
import Badge from './components/Badge';   // verifique se a pasta existe

// 3. Pacote não instalado
// Rode: npm install nome-do-pacote

3 "EADDRINUSE: address already in use :::3737"

Outra instância do servidor já está rodando nessa porta.

# Achar e matar o processo
lsof -i :3737
kill -9 PID_AQUI

# Ou matar todos os node
pkill -f node

# Ou trocar a porta no .env
PORT=3738

4 Tela branca no React (sem erro visível)

5 "npm install" deu erro

# Limpar cache e reinstalar
rm -rf node_modules package-lock.json
npm cache clean --force
npm install

# Se persistir, verificar versão do Node
node -v    # precisa ser 18+
npm -v

6 CORS: "Access-Control-Allow-Origin"

O navegador bloqueou a requisição porque frontend e backend estão em URLs diferentes.

// SOLUÇÃO: instalar e configurar cors no backend
// npm install cors

const cors = require('cors');
app.use(cors({ origin: 'http://localhost:5173' }));
// Em produção, troque pela URL real do frontend

7 "ER_ACCESS_DENIED_ERROR" (MySQL)

# Verificar credenciais no .env
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=sua_senha_aqui
DB_NAME=nome_do_banco

# Verificar se o MySQL está rodando
systemctl status mysql

# Testar conexão manualmente
mysql -u root -p

8 "jwt malformed" ou "invalid token"

9 "Too many re-renders" (React)

// CAUSA: setState dentro do render (sem useEffect ou evento)
function App() {
  const [x, setX] = useState(0);
  setX(x + 1);  // ERRO! Chama setState toda vez que renderiza = loop infinito

  // SOLUÇÃO: coloque dentro de useEffect ou num handler
  useEffect(() => { setX(1); }, []);  // roda só 1 vez
}

10 "Unhandled Promise Rejection" / "await is only valid in async"

// CAUSA: usando await fora de função async
const dados = await fetch('/api');  // ERRO se não está em async

// SOLUÇÃO: marcar a função como async
const carregar = async () => {
  const dados = await fetch('/api');
};

11 "404 Not Found" na API

12 "ERR_CONNECTION_REFUSED"

O servidor não está rodando ou está na porta errada.

# Backend está rodando?
pm2 list            # produção
# ou verifique o terminal do npm run dev

# Verificar porta
ss -tlnp | grep node

13 Git: "merge conflict"

// O arquivo vai ter marcações assim:
<<<<<<< HEAD
const cor = 'azul';     // sua versão
=======
const cor = 'verde';    // versão do colega
>>>>>>> branch-nome

// SOLUÇÃO: escolha qual versão manter, delete as marcações e salve
const cor = 'azul';     // mantive a minha

// Depois:

git add arquivo-com-conflito.js
git commit -m "fix: resolver conflito de merge"

14 "Hydration mismatch" / Conteúdo diferente no servidor

15 Como ler um Stack Trace

// Exemplo de erro:
TypeError: Cannot read properties of undefined (reading 'map')
    at LeadTable (src/components/LeadTable.tsx:42:18)  ← AQUI está o erro
    at renderWithHooks (node_modules/react-dom/...)    ← ignore (interno do React)
    at mountIndeterminateComponent (...)                 ← ignore

Comandos do dia a dia

Checklist: Criar nova funcionalidade no Backend

• [ ] Criar controller em controllers/
• [ ] Importar { pool } de database/connection
• [ ] Escrever queries SQL dentro do try/catch
• [ ] Criar rota em routes/
• [ ] Importar controller na rota
• [ ] Conectar no app.js com app.use()
• [ ] Reiniciar servidor (pm2 restart)
• [ ] Testar com curl

Checklist: Criar nova funcionalidade no Frontend

• [ ] Criar type em types/ (formato dos dados)
• [ ] Criar service em services/ (chamada API)
• [ ] Criar component em components/ (se reutilizável)
• [ ] Criar page em pages/ (tela)
• [ ] Adicionar Route no App.tsx
• [ ] Testar no navegador

Checklist: Projeto novo do zero

• [ ] Node.js instalado
• [ ] npm create vite@latest + npm install + npm run dev
• [ ] Tailwind CSS instalado
• [ ] React Router instalado
• [ ] Atalho @/ configurado
• [ ] Pastas criadas (pages, components, services...)
• [ ] Backend: npm init -y + Express + MySQL
• [ ] .env criado (NUNCA no git!)
• [ ] server.js + app.js + connection.js
• [ ] api.ts no frontend conectando ao backend

R Tabela de Referência Rápida

Deploy é colocar seu projeto no ar para o mundo acessar. Vamos usar uma VPS (servidor Linux) com Nginx, PM2 e SSL.

16.1 Visão Geral da Arquitetura

16.2 Preparar o Backend

Arquivo .env de Produção

# backend/.env (PRODUÇÃO)
NODE_ENV=production
PORT=3737
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=SuaSenhaForte123!
DB_NAME=meu_banco
JWT_SECRET=chave_super_secreta_aleatoria_64_caracteres

Build do Frontend

# Na raiz do projeto frontend
npm run build
# Isso gera a pasta dist/ com os arquivos otimizados

16.3 PM2 - Gerenciador de Processos

PM2 mantém seu backend rodando 24/7. Se crashar, ele reinicia automaticamente.

# Instalar PM2 globalmente
npm install -g pm2

# Iniciar o backend
pm2 start backend/src/app.js --name meu-api

# Ver processos rodando
pm2 list

# Ver logs em tempo real
pm2 logs meu-api

# Reiniciar após mudanças
pm2 restart meu-api

# Salvar para iniciar junto com o servidor
pm2 save
pm2 startup

16.4 Nginx - Proxy Reverso

Nginx recebe as requisições da internet e direciona: arquivos estáticos servidos direto, requisições de API redirecionadas para o Node.js.

# /etc/nginx/sites-available/meusite
server {
    listen 80;
    server_name meusite.com.br;

    # Frontend (arquivos estáticos)
    location / {
        root /root/meu-projeto/dist;
        try_files $uri $uri/ /index.html;
        # ↑ Necessário para SPA (React Router)
    }

    # Backend (proxy para Node.js)
    location /api/ {
        proxy_pass http://localhost:3737/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

# Ativar o site
ln -s /etc/nginx/sites-available/meusite /etc/nginx/sites-enabled/

# Testar configuração
nginx -t

# Reiniciar Nginx
systemctl restart nginx

16.5 SSL (HTTPS) com Let's Encrypt

SSL é obrigatório em 2026. É gratuito com Let's Encrypt e o Certbot configura tudo automaticamente.

# Instalar Certbot
apt install certbot python3-certbot-nginx

# Gerar certificado (automático!)
certbot --nginx -d meusite.com.br

# Renovar automaticamente (já vem configurado)
certbot renew --dry-run

16.6 Checklist de Deploy

16.7 Workflow de Atualização

Quando precisar atualizar o código em produção:

# 1. No servidor, puxar as mudanças do GitHub
cd /root/meu-projeto
git pull

# 2. Instalar dependências novas (se houver)
npm install

# 3. Rebuild do frontend
npm run build

# 4. Reiniciar o backend
pm2 restart meu-api

# 5. Verificar se está tudo rodando
pm2 list

Neste módulo bônus, você vai criar um Bot de WhatsApp completo usando Node.js. O bot vai ser capaz de:

• Responder mensagens automaticamente
• Mostrar um menu interativo de opções
• Enviar imagens, documentos e mídia
• Funcionar em grupos e conversas privadas
• Integrar com APIs externas (CEP, clima, etc.)
• Rodar 24h em um servidor com PM2

W1.1 Ferramentas Disponíveis

Existem várias bibliotecas para criar bots de WhatsApp com Node.js. Cada uma tem suas vantagens:

W1.2 Como Funciona por Baixo

O whatsapp-web.js funciona simulando o WhatsApp Web no seu servidor:

W2.1 Event-Driven Programming

Node.js é baseado em eventos. Em vez de ficar perguntando "chegou mensagem? chegou mensagem?", o Node.js escuta e reage quando algo acontece:

// ❌ Abordagem errada (polling)
while (true) {
  const msg = checkNewMessage();  // Fica perguntando sem parar
  if (msg) handleMessage(msg);
}

// ✅ Abordagem correta (event-driven)
client.on('message', (msg) => {
  handleMessage(msg);  // Só executa quando chega mensagem
});

W2.2 WebSocket — Comunicação em Tempo Real

O WhatsApp usa WebSocket para enviar e receber mensagens em tempo real. Diferente do HTTP (que é "pergunta e resposta"), o WebSocket mantém uma conexão aberta:

W2.3 QR Code — Autenticação

Na primeira vez que o bot conecta, ele gera um QR Code. Você escaneia com o WhatsApp do celular (como faz no WhatsApp Web). Depois disso, a sessão fica salva e o bot reconecta automaticamente.

W2.4 Puppeteer e Chromium

O whatsapp-web.js usa o Puppeteer internamente — o mesmo Chromium que usamos para gerar PDFs! Ele abre um navegador "invisível" (headless) que simula o WhatsApp Web. Por isso o bot precisa de um ambiente com Chromium instalado.

W3.1 Inicializando o Projeto

$ mkdir whatsapp-bot
$ cd whatsapp-bot
$ npm init -y

W3.2 Instalando Dependências

$ npm install whatsapp-web.js qrcode-terminal

W3.3 Estrutura de Pastas

W3.4 Configurando o .gitignore

# .gitignore
node_modules/
.wwebjs_auth/
.wwebjs_cache/
.env

W4.1 Código Base — O "Hello World" do Bot

Este é o código mínimo para conectar ao WhatsApp e ouvir mensagens:

// index.js
const { Client, LocalAuth } = require('whatsapp-web.js');
const qrcode = require('qrcode-terminal');

// Criar o cliente com persistência de sessão
const client = new Client({
  authStrategy: new LocalAuth(),
  puppeteer: {
    headless: true,
    args: ['--no-sandbox', '--disable-setuid-sandbox']
  }
});

// Evento: QR Code gerado (escanear com celular)
client.on('qr', (qr) => {
  console.log('📱 Escaneie o QR Code abaixo:');
  qrcode.generate(qr, { small: true });
});

// Evento: Bot conectado com sucesso
client.on('ready', () => {
  console.log('✅ Bot conectado e pronto!');
});

// Evento: Mensagem recebida
client.on('message', async (msg) => {
  console.log(`Mensagem de ${msg.from}: ${msg.body}`);

  if (msg.body === '!ping') {
    await msg.reply('🏓 Pong!');
  }
});

// Iniciar o bot
client.initialize();

W4.2 Rodando pela Primeira Vez

$ node index.js
📱 Escaneie o QR Code abaixo:
▄▄▄▄▄▄▄ ▄▄ ▄ ▄▄▄▄▄▄▄
█ ▄▄▄ █ ██▀█ █ ▄▄▄ █
...
✅ Bot conectado e pronto!

W4.3 Entendendo cada Evento

W4.4 Persistência de Sessão (LocalAuth)

O LocalAuth salva a sessão em disco na pasta .wwebjs_auth/. Assim, quando você reiniciar o bot, ele reconecta automaticamente sem precisar escanear o QR Code novamente.

// SEM persistência (pede QR toda vez)
const client = new Client();

// COM persistência (salva sessão em disco)
const client = new Client({
  authStrategy: new LocalAuth()  // ← Salva em .wwebjs_auth/
});

W5.1 Anatomia de uma Mensagem

Quando o evento message dispara, você recebe um objeto com várias propriedades:

client.on('message', async (msg) => {
  console.log(msg.body);      // Texto da mensagem
  console.log(msg.from);      // Quem enviou (5511999999999@c.us)
  console.log(msg.to);        // Para quem foi
  console.log(msg.timestamp); // Quando foi enviada
  console.log(msg.hasMedia);  // true se tem imagem/vídeo/doc
  console.log(msg.isGroupMsg); // true se é mensagem de grupo

  // Responder à mensagem
  await msg.reply('Recebido!');

  // Enviar mensagem (sem ser reply)
  await client.sendMessage(msg.from, 'Olá!');
});

W5.2 Bot com Menu de Opções

Agora vamos criar um bot de atendimento completo com menu:

// index.js — Bot de atendimento
const { Client, LocalAuth } = require('whatsapp-web.js');
const qrcode = require('qrcode-terminal');

const client = new Client({
  authStrategy: new LocalAuth(),
  puppeteer: { args: ['--no-sandbox'] }
});

client.on('qr', qr => qrcode.generate(qr, { small: true }));
client.on('ready', () => console.log('✅ Bot pronto!'));

client.on('message', async (msg) => {
  const text = msg.body.toLowerCase().trim();

  // Ignorar mensagens do próprio bot
  if (msg.fromMe) return;

  switch (text) {
    case 'menu':
    case 'oi':
    case 'olá':
      await msg.reply(
        `👋 *Olá! Sou o Bot de Atendimento*\n\n` +
        `Escolha uma opção:\n\n` +
        `*1* - 📋 Nossos serviços\n` +
        `*2* - 💰 Tabela de preços\n` +
        `*3* - 📍 Localização\n` +
        `*4* - 📞 Falar com atendente\n\n` +
        `_Digite o número da opção_`
      );
      break;

    case '1':
      await msg.reply(
        `📋 *Nossos Serviços:*\n\n` +
        `✅ Desenvolvimento de Sites\n` +
        `✅ Aplicativos Mobile\n` +
        `✅ Sistemas Web\n` +
        `✅ Bots e Automação\n\n` +
        `Digite *menu* para voltar`
      );
      break;

    case '2':
      await msg.reply(
        `💰 *Tabela de Preços:*\n\n` +
        `• Site institucional: R$ 1.500\n` +
        `• Landing page: R$ 800\n` +
        `• Sistema web: sob consulta\n\n` +
        `Digite *menu* para voltar`
      );
      break;

    case '3':
      await msg.reply('📍 Estamos na Rua Exemplo, 123 - Centro');
      break;

    case '4':
      await msg.reply(
        `📞 *Atendimento Humano*\n\n` +
        `Um atendente vai responder em breve!\n` +
        `Horário: Seg-Sex, 9h às 18h`
      );
      break;
  }
});

client.initialize();

W5.3 Responder só no Privado (Ignorar Grupos)

client.on('message', async (msg) => {
  // Ignorar mensagens de grupo
  if (msg.isGroupMsg) return;

  // Ignorar mensagens do próprio bot
  if (msg.fromMe) return;

  // Só responde no privado
  await msg.reply('Olá! Digite *menu* para ver as opções.');
});

W5.4 Rate Limiting — Evitar Spam

Se alguém enviar muitas mensagens, o bot pode sobrecarregar. Adicione um controle simples:

const lastReply = new Map();  // Armazena último tempo de resposta
const COOLDOWN = 3000;         // 3 segundos entre respostas

client.on('message', async (msg) => {
  const now = Date.now();
  const last = lastReply.get(msg.from) || 0;

  if (now - last < COOLDOWN) return;  // Ignora se muito rápido

  lastReply.set(msg.from, now);
  // ... processar mensagem normalmente
});

W6.1 Enviar Imagens e Documentos

const { MessageMedia } = require('whatsapp-web.js');

// Enviar imagem de um arquivo local
const media = MessageMedia.fromFilePath('./imagem.png');
await client.sendMessage(msg.from, media, {
  caption: 'Aqui está a imagem!'
});

// Enviar imagem de uma URL
const mediaUrl = await MessageMedia.fromUrl('https://exemplo.com/foto.jpg');
await client.sendMessage(msg.from, mediaUrl);

// Enviar documento (PDF, etc.)
const doc = MessageMedia.fromFilePath('./proposta.pdf');
await client.sendMessage(msg.from, doc, {
  sendMediaAsDocument: true,
  caption: 'Segue a proposta em PDF'
});

W6.2 Integrar com API Externa

Vamos fazer o bot consultar um CEP usando a API gratuita do ViaCEP:

// Comando: !cep 01001000
if (text.startsWith('!cep')) {
  const cep = text.split(' ')[1];

  if (!cep || cep.length !== 8) {
    await msg.reply('❌ Use: *!cep 01001000*');
    return;
  }

  try {
    const res = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
    const data = await res.json();

    if (data.erro) {
      await msg.reply('❌ CEP não encontrado');
      return;
    }

    await msg.reply(
      `📍 *Resultado do CEP:*\n\n` +
      `📫 CEP: ${data.cep}\n` +
      `🏠 Rua: ${data.logradouro}\n` +
      `🏘️ Bairro: ${data.bairro}\n` +
      `🌆 Cidade: ${data.localidade}/${data.uf}`
    );
  } catch (err) {
    await msg.reply('❌ Erro ao consultar CEP');
  }
}

W6.3 Reagir a Mensagens

// Reagir com emoji
await msg.react('👍');  // Reação de like
await msg.react('✅');  // Reação de confirmação
await msg.react('❤️');   // Reação de coração

W6.4 Gerenciar Grupos

// Pegar todos os grupos do bot
const chats = await client.getChats();
const groups = chats.filter(c => c.isGroup);
console.log(`Bot está em ${groups.length} grupos`);

// Enviar mensagem para um grupo específico
const group = groups.find(g => g.name === 'Meu Grupo');
if (group) {
  await group.sendMessage('📢 Mensagem automática do bot!');
}

// Pegar info de um grupo
if (msg.isGroupMsg) {
  const chat = await msg.getChat();
  console.log(`Grupo: ${chat.name}`);
  console.log(`Membros: ${chat.participants.length}`);
}

W6.5 Agendar Envios

// Enviar mensagem após 5 segundos
setTimeout(async () => {
  await client.sendMessage('5511999999999@c.us', 'Lembrete!');
}, 5000);

// Enviar mensagem a cada hora (ex: status)
setInterval(async () => {
  const hora = new Date().toLocaleTimeString('pt-BR');
  await client.sendMessage('5511999999999@c.us', `⏰ São ${hora}`);
}, 3600000);  // 1 hora em milissegundos

W7.1 Rodando com PM2 (24h)

Para manter o bot rodando mesmo após fechar o terminal, use o PM2 (que você já aprendeu no capítulo 16):

$ npm install -g pm2
$ pm2 start index.js --name whatsapp-bot
$ pm2 logs whatsapp-bot     # Ver logs em tempo real
$ pm2 restart whatsapp-bot  # Reiniciar o bot
$ pm2 save                  # Salvar para iniciar com o servidor
$ pm2 startup               # Iniciar automaticamente no boot

W7.2 Reconexão Automática

// Tratar desconexão e reconectar
client.on('disconnected', (reason) => {
  console.log('❌ Bot desconectado:', reason);
  console.log('🔄 Reconectando em 5 segundos...');
  setTimeout(() => {
    client.initialize();
  }, 5000);
});

// Log de erros não tratados (evita crash)
process.on('unhandledRejection', (err) => {
  console.error('Erro não tratado:', err);
});

W7.3 Boas Práticas — Não Ser Banido

Simulando Digitação (Humanizar)

// Fazer parecer que o bot está "digitando" antes de responder
client.on('message', async (msg) => {
  const chat = await msg.getChat();
  await chat.sendStateTyping();           // Mostra "digitando..."
  await new Promise(r => setTimeout(r, 2000)); // Espera 2s
  await msg.reply('Resposta humanizada!');
});

W7.4 Checklist de Produção

Você acabou de clonar o repositório e abriu o projeto. Tem dezenas de arquivos, duas pastas grandes (frontend/ e backend/) e nenhuma funcionalidade implementada. É de propósito.

S1.1 Estrutura de Pastas

O projeto é dividido em duas aplicações independentes que se comunicam via HTTP:

Frontend — React + TypeScript + Tailwind (porta 5173)

Backend — Node.js + Express + MySQL (porta 3737)

S1.2 O Que Já Está Pronto (e o que falta)

S1.3 Raciocínio do Programador — Onde Começo?

Olhar um projeto inteiro e não saber por onde começar é normal. A regra é: pense nas dependências.