Seção 1 - Arquitetura Frontend + Backend

Entender a arquitetura é fundamental. Quando você constrói uma aplicação moderna, está coordenando três entidades separadas que trabalham juntas mas nunca se tocam diretamente: React (Frontend), PHP (Backend) e Banco de Dados.

Conceito Chave: O frontend NUNCA acessa o banco de dados diretamente. Toda comunicação passa pelo backend, que age como um guardião protegendo seus dados.

Fluxo de Dados Completo

┌─────────────────────┐
│   REACT APP         │  ← Usuário interage aqui
│   (Frontend)        │     (localhost:5173 em dev)
│   Port: 5173        │     (https://seusite.com em prod)
└──────────┬──────────┘
           │
           │ 1. HTTP Request (fetch/axios)
           │    POST /api/login
           │    Headers: Content-Type: application/json
           │    Body: { email, password }
           │
           ▼
┌─────────────────────┐
│   PHP API           │  ← Processa requisições
│   (Backend)         │     Valida dados
│   Port: 80/443      │     Aplica regras de negócio
└──────────┬──────────┘
           │
           │ 2. Query SQL (Prepared Statement)
           │    SELECT * FROM users WHERE email = ?
           │    Bind: [$email]
           │
           ▼
┌─────────────────────┐
│   MariaDB/MySQL     │  ← Armazena dados
│   (Database)        │     NUNCA exposto à internet
│   Port: 3306        │     Apenas localhost
└─────────────────────┘

Por Que Essa Arquitetura?

Segurança em Camadas

O banco de dados fica protegido atrás do backend. Atacantes não conseguem acessar diretamente seus dados sensíveis.

Manutenibilidade

Você pode trocar React por Vue, Angular ou qualquer framework sem tocar no backend. São sistemas independentes.

Performance

Cache, CDN e otimizações podem ser aplicadas separadamente em cada camada para máxima eficiência.

Exemplo Prático: Login Request

1️⃣ Frontend (React) - Envia Requisição

// authService.js - React
import axios from 'axios';

const API_URL = process.env.VITE_API_URL || 'https://api.seusite.com';

export const login = async (email, password) => {
  try {
    const response = await axios.post(`${API_URL}/auth/login`, {
      email,
      password
    }, {
      headers: {
        'Content-Type': 'application/json'
      },
      withCredentials: true // Permite cookies (sessão)
    });
    
    // Backend retorna: { success: true, token: "jwt...", user: {...} }
    return response.data;
    
  } catch (error) {
    throw new Error(error.response?.data?.message || 'Erro ao fazer login');
  }
};

2️⃣ Backend (PHP) - Processa e Valida

// api/auth/login.php
 false, 'message' => 'Email e senha obrigatórios']);
    exit;
}

// 3. Sanitiza
$email = filter_var($data['email'], FILTER_SANITIZE_EMAIL);

// 4. Busca usuário no banco
$stmt = $pdo->prepare('SELECT id, email, password_hash FROM users WHERE email = ?');
$stmt->execute([$email]);
$user = $stmt->fetch();

// 5. Verifica senha
if (!$user || !password_verify($data['password'], $user['password_hash'])) {
    http_response_code(401);
    echo json_encode(['success' => false, 'message' => 'Credenciais inválidas']);
    exit;
}

// 6. Gera token JWT
$token = generateJWT($user['id']);

// 7. Retorna resposta
echo json_encode([
    'success' => true,
    'token' => $token,
    'user' => [
        'id' => $user['id'],
        'email' => $user['email']
    ]
]);
?>

O Que Pode Dar Errado?

❌ CORS Bloqueado
Se o backend não configurar cabeçalhos CORS corretamente, o navegador bloqueia a requisição. Solução: Configurar Access-Control-Allow-Origin

❌ Endpoints Incorretos
Frontend chama /api/login mas backend espera /auth/login. Solução: Documentar todas as rotas da API.

❌ Token Não Enviado
Rotas protegidas precisam do token JWT no header Authorization: Bearer TOKEN. Solução: Axios interceptors.

❌ Conexão Banco Falha
Credenciais erradas ou firewall bloqueando porta 3306. Solução: Verificar PDO connection string.

1. Arquitetura: Como Frontend e Backend se Comunicam

account_tree Fluxo de Dados Completo

architecture Por Que Essa Arquitetura?