hidden: true
TL;DR
Todo app tem 3 camadas: frontend (o que o usuário vê), backend (a lógica por trás) e banco de dados (onde os dados moram). Pense em um restaurante: o frontend é o salão, o backend é a cozinha, e o banco de dados é a despensa.
hidden: true
A analogia do restaurante
Imagine um restaurante. Você entra e vê:
- O salão — mesas bonitas, cardápio, garçons. É agradável e fácil de entender. Isso é o frontend.
- A cozinha — onde a comida é preparada. Você não vê, mas é onde a mágica acontece. Isso é o backend.
- A despensa — onde ficam os ingredientes. Sem ela, a cozinha não funciona. Isso é o banco de dados.
O cliente (usuário) interage só com o salão. Mas sem cozinha e despensa, não existe restaurante.
Frontend: o que o usuário vê e toca
O frontend é tudo que aparece no navegador ou no celular do usuário. Botões, textos, imagens, animações, formulários — tudo isso é frontend.
Tecnologias comuns:
- React / Next.js — o mais popular para apps web
- HTML + CSS — a base de tudo
- Tailwind CSS — estilização rápida
O que o frontend faz:
- Mostra informações bonitas na tela
- Captura o que o usuário digita ou clica
- Envia pedidos para o backend ("quero ver meus dados")
- Recebe respostas e atualiza a tela
O que o frontend NÃO faz:
- Guardar dados permanentemente
- Processar pagamentos de forma segura
- Verificar senhas (nunca confie só no frontend!)
Quando um vibecoder cria uma tela bonita com Cursor ou Bolt, geralmente está criando frontend. E muitas vezes para aí — porque a próxima camada é onde complica.
Backend: a lógica invisível
O backend é o cérebro do app. Ele recebe pedidos do frontend, processa a lógica, consulta o banco de dados e devolve respostas.
Tecnologias comuns:
- Node.js / Hono / Express — JavaScript no servidor
- Python / Django / FastAPI — popular em IA e dados
- Supabase / Firebase — "backend pronto" (BaaS)
O que o backend faz:
- Valida dados ("esse email é real?")
- Autentica usuários ("essa senha está correta?")
- Processa lógica de negócio ("calcule o frete")
- Conecta com serviços externos (pagamento, email, IA)
- Protege dados sensíveis
Exemplo prático:
Quando você clica "Entrar" em um app:
- O frontend manda email + senha para o backend
- O backend verifica no banco se o usuário existe e se a senha bate
- Se tudo certo, o backend cria uma sessão e avisa o frontend
- O frontend mostra a tela logada
Sem o backend, o frontend é só uma casca bonita.
Banco de dados: a memória do app
O banco de dados é onde tudo fica salvo. Usuários, posts, produtos, pedidos, configurações — tudo mora aqui.
Tecnologias comuns:
- PostgreSQL — o mais versátil e popular
- SQLite — leve, bom para projetos pequenos
- Supabase — PostgreSQL com interface amigável
- Prisma — ORM que facilita falar com o banco
O que o banco faz:
- Armazena dados de forma organizada (tabelas)
- Permite buscar, filtrar e ordenar informações
- Garante que dados não se percam quando o servidor reinicia
- Mantém relacionamentos ("este pedido pertence a este usuário")
Por que não guardar tudo no frontend?
Porque o navegador é temporário. Fechou a aba? Perdeu tudo. Limpou o cache? Perdeu tudo. Além disso, qualquer dado no frontend pode ser visto e manipulado pelo usuário. Senhas, saldos, permissões — nada disso deve ficar no frontend.
Como as 3 camadas se conectam
Usuário → Frontend → API → Backend → Banco de dados
↓
Usuário ← Frontend ← API ← Backend ← Dados
A API é a ponte entre frontend e backend. É como o garçom levando pedidos do salão para a cozinha. O frontend nunca fala diretamente com o banco de dados — sempre passa pelo backend.
O que cada camada precisa para funcionar em produção
| Camada | Localhost | Produção |
|---|---|---|
| Frontend | npm run dev |
Build estático ou servidor Node |
| Backend | node server.js |
Servidor 24/7, HTTPS, variáveis de ambiente |
| Banco | PostgreSQL local | Banco hospedado, backups, SSL |
Configurar tudo isso manualmente é trabalhoso. Por isso existem plataformas que simplificam o processo inteiro.
Com o Veloz, as 3 camadas são detectadas automaticamente. Você roda veloz deploy e o sistema identifica seu framework, configura o build, conecta o banco e coloca tudo no ar — com servidores no Brasil.
Dica para vibecoders
Você não precisa dominar as 3 camadas desde o início. Comece com:
- Frontend com Next.js (Cursor/Bolt te ajudam muito aqui)
- Backend com Supabase (quase zero configuração)
- Deploy com Veloz (um comando)
Conforme você ganha confiança, pode ir aprofundando em cada camada. O importante é não travar no deploy. Coloque no ar primeiro, melhore depois.
hidden: true
FAQ
Preciso saber programar backend para criar um app?
Não necessariamente. Ferramentas como Supabase e Firebase oferecem backend pronto. E com IA, você pode gerar código de backend sem ser especialista. Mas entender o conceito ajuda a tomar melhores decisões.
Posso usar só frontend sem backend?
Sim, para sites estáticos como portfólios e landing pages. Mas se seu app precisa de login, salvar dados ou processar pagamentos, você vai precisar de backend e banco de dados.
O que é uma API?
API é o cardápio entre o frontend e o backend. É um conjunto de endpoints (URLs) que o frontend chama para pedir ou enviar dados. Por exemplo: GET /api/users retorna a lista de usuários.