Aula 14 – Integração com Backend: Firebase e Supabase ☁️

Muitas vezes não queremos criar um servidor do zero. Hoje vamos conhecer o BaaS (Backend as a Service) e como eles facilitam a vida do desenvolvedor frontend.

---

🔥 O que é Firebase?

O Firebase (do Google) oferece: - Authentication: Login fácil (Google, GitHub, E-mail). - Firestore: Banco de dados NoSQL em tempo real. - Storage: Armazenamento de imagens e vídeos.

---

⚡ O que é Supabase?

O Supabase é a alternativa de código aberto ao Firebase, baseada em PostgreSQL. Ele permite usar SQL real no seu banco de dados na nuvem.

---

🔐 Configurando o Firebase

Normalmente colocamos as credenciais em um arquivo .env para segurança:

// firebase.config.js
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: import.meta.env.VITE_API_KEY,
  authDomain: "...firebaseapp.com",
  projectId: "...",
  // ...
};

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

---

🚀 Prática da Aula

Vamos criar um "Caderno de Notas" online.

1. Crie um projeto no console do Firebase.
2. Configure o Firestore (Database).
3. No React, crie um formulário que salva uma nota no banco.
4. Use o onSnapshot (Firebase) para ver a nota aparecer na sua lista segundos após ser criada em outro dispositivo!

---

📊 Comparativo

Recurso	Firebase	Supabase
Banco de Dados	NoSQL (Documentos)	SQL (Tabelas)
Facilidade	Muito Alta	Alta
Preço	Grátis até certo ponto	Grátis até certo ponto

Segurança

Nunca suba suas chaves de API (apiKey) para o GitHub público! Use sempre o arquivo .gitignore para esconder seu .env.