# Instalar o nvm (Linux/macOS) e o Node LTS
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
nvm install --lts
node -v   # deve mostrar v20.x ou superior
npm -v

# No Windows: use o nvm-windows ou o instalador oficial do nodejs.org

// 1. const/let (nunca use var)
const nome = "Ana";      // não pode ser reatribuída
let contador = 0;       // pode ser reatribuída

// 2. Arrow functions
const dobrar = (n) => n * 2;

// 3. Template literals
const saudacao = `Olá, ${nome}! Você tem ${contador} pontos.`;

// 4. Destructuring
const usuario = { id: 1, email: "ana@ex.com", plano: "pro" };
const { email, plano } = usuario;

// 5. Spread e rest
const atualizado = { ...usuario, plano: "enterprise" };
const somar = (...nums) => nums.reduce((acc, n) => acc + n, 0);

// 6. Métodos de array (o coração do React!)
const precos = [10, 25, 40];
const comDesconto = precos.map((p) => p * 0.9);
const caros = precos.filter((p) => p > 20);
const total = precos.reduce((acc, p) => acc + p, 0);

// 7. Promises e async/await
async function buscarUsuario(id) {
  const res = await fetch(`https://api.exemplo.com/users/${id}`);
  if (!res.ok) throw new Error("Falha na requisição");
  return res.json();
}

// 8. Optional chaining e nullish coalescing
const cidade = usuario.endereco?.cidade ?? "Não informada";

// 9. Módulos ES
export function formatarMoeda(v) { return `R$ ${v.toFixed(2)}`; }
// import { formatarMoeda } from "./utils";

git init                          # inicia o repositório
git add .                         # prepara as mudanças
git commit -m "feat: cria header" # salva um ponto na história
git branch -M main
git remote add origin git@github.com:voce/projeto.git
git push -u origin main

# fluxo de trabalho em equipe (o que cai em entrevista)
git checkout -b feat/login        # cria branch de feature
git push origin feat/login        # sobe e abre Pull Request
git pull --rebase origin main     # atualiza sua branch

mkdir ts-lab && cd ts-lab
npm init -y
npm install -D typescript tsx
npx tsc --init          # cria o tsconfig.json
npx tsx arquivo.ts      # roda TypeScript direto, sem compilar manualmente

// Anotação explícita
let idade: number = 25;
let nome: string = "Ana";
let ativo: boolean = true;

// Inferência: o TS deduz o tipo sozinho — prefira isso!
let cidade = "Recife";      // tipo: string
cidade = 10;                // ❌ Erro: number não é string

// Arrays e tuplas
const notas: number[] = [8, 9.5, 7];
const coordenada: [number, number] = [-8.05, -34.9];

// União de tipos (union)
let id: string | number = "abc-123";

// Literais: o valor É o tipo
type Status = "pendente" | "pago" | "cancelado";
let statusPedido: Status = "pago";
statusPedido = "enviado";  // ❌ Erro: não faz parte da união

// interface: ideal para "formatos" de objetos, pode ser estendida
interface Usuario {
  id: string;
  nome: string;
  email: string;
  avatarUrl?: string;          // opcional
  readonly criadoEm: Date;     // não pode ser alterado
}

interface Admin extends Usuario {
  permissoes: string[];
}

// type: mais flexível — unions, tuplas, tipos calculados
type Resultado =
  | { sucesso: true; dados: Usuario }
  | { sucesso: false; erro: string };

function exibir(r: Resultado) {
  if (r.sucesso) {
    console.log(r.dados.nome);  // TS sabe que 'dados' existe aqui
  } else {
    console.log(r.erro);        // e que 'erro' existe aqui
  }
}

// Parâmetros e retorno
function calcularDesconto(preco: number, percentual: number = 10): number {
  return preco * (1 - percentual / 100);
}

// Tipando callbacks
type Comparador<T> = (a: T, b: T) => number;

const porPreco: Comparador<{ preco: number }> = (a, b) => a.preco - b.preco;

// void e never
function logar(msg: string): void { console.log(msg); }
function falhar(msg: string): never { throw new Error(msg); }

function formatarId(id: string | number) {
  if (typeof id === "string") {
    return id.toUpperCase();   // aqui id é string
  }
  return id.toFixed(0);         // aqui id é number
}

// Discriminated union: o padrão mais importante do TS no mercado
type Evento =
  | { tipo: "click"; x: number; y: number }
  | { tipo: "tecla"; codigo: string }
  | { tipo: "scroll"; delta: number };

function tratar(e: Evento) {
  switch (e.tipo) {
    case "click":  return `(${e.x}, ${e.y})`;
    case "tecla":  return e.codigo;
    case "scroll": return e.delta;
    default: {
      // exhaustiveness check: se alguém adicionar um novo tipo
      // de Evento e esquecer de tratar, o TS acusa erro aqui
      const _nunca: never = e;
      return _nunca;
    }
  }
}

// Sem generic: perde a informação do tipo
function primeiroRuim(arr: any[]): any { return arr[0]; }

// Com generic: o tipo "atravessa" a função
function primeiro<T>(arr: T[]): T | undefined {
  return arr[0];
}
const n = primeiro([1, 2, 3]);        // n: number | undefined
const s = primeiro(["a", "b"]);      // s: string | undefined

// Constraints: limitando o que T pode ser
function pegarProp<T, K extends keyof T>(obj: T, chave: K): T[K] {
  return obj[chave];
}
const u = { id: 1, nome: "Ana" };
pegarProp(u, "nome");   // string
pegarProp(u, "email");  // ❌ Erro: "email" não existe em u

// Generic em fetch tipado — você usará isso a apostila inteira
async function api<T>(url: string): Promise<T> {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json() as Promise<T>;
}

interface Tarefa {
  id: string;
  titulo: string;
  concluida: boolean;
  autorId: string;
}

// Criar: sem id (o banco gera)
type NovaTarefa = Omit<Tarefa, "id">;

// Atualizar: qualquer subconjunto, mas nunca o id
type AtualizarTarefa = Partial<Omit<Tarefa, "id">>;

// Resposta pública da API: só o essencial
type TarefaPublica = Pick<Tarefa, "id" | "titulo" | "concluida">;

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,                    // inegociável em produção
    "noUncheckedIndexedAccess": true,  // arr[i] pode ser undefined
    "noImplicitOverride": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  }
}

type BotaoProps = {
  texto: string;
  variante?: "primario" | "secundario";
  onClick: () => void;
  children?: React.ReactNode;   // conteúdo entre as tags
};

export function Botao({ texto, variante = "primario", onClick }: BotaoProps) {
  return (
    <button
      className={variante === "primario" ? "btn-azul" : "btn-cinza"}
      onClick={onClick}
    >
      {texto}
    </button>
  );
}

// Uso:
// <Botao texto="Salvar" onClick={() => salvar()} />

"use client";  // necessário no Next.js para componentes interativos (M05)

import { useState } from "react";

type Tarefa = { id: number; titulo: string; feita: boolean };

export function ListaDeTarefas() {
  const [tarefas, setTarefas] = useState<Tarefa[]>([]);
  const [titulo, setTitulo] = useState("");

  function adicionar() {
    if (!titulo.trim()) return;
    // Estado é imutável: sempre crie um NOVO array/objeto
    setTarefas((atual) => [
      ...atual,
      { id: Date.now(), titulo, feita: false },
    ]);
    setTitulo("");
  }

  function alternar(id: number) {
    setTarefas((atual) =>
      atual.map((t) => (t.id === id ? { ...t, feita: !t.feita } : t))
    );
  }

  return (
    <div>
      <input
        value={titulo}
        onChange={(e) => setTitulo(e.target.value)}
        placeholder="Nova tarefa"
      />
      <button onClick={adicionar}>Adicionar</button>

      <ul>
        {tarefas.map((t) => (
          <li key={t.id} onClick={() => alternar(t.id)}>
            {t.feita ? "✅" : "⬜"} {t.titulo}
          </li>
        ))}
      </ul>
    </div>
  );
}

import { useEffect, useState } from "react";

export function Relogio() {
  const [hora, setHora] = useState(new Date());

  useEffect(() => {
    const id = setInterval(() => setHora(new Date()), 1000);
    return () => clearInterval(id);  // cleanup: SEMPRE limpe
  }, []);                              // [] = roda só ao montar

  return <p>{hora.toLocaleTimeString()}</p>;
}

// Em vez de um componente com 15 props booleanas...
// ...componha peças pequenas com children:

export function Card({ children }: { children: React.ReactNode }) {
  return <div className="card">{children}</div>;
}
Card.Header = function Header({ children }: { children: React.ReactNode }) {
  return <header className="card-header">{children}</header>;
};
Card.Body = function Body({ children }: { children: React.ReactNode }) {
  return <div className="card-body">{children}</div>;
};

// Uso flexível:
// <Card>
//   <Card.Header>Título</Card.Header>
//   <Card.Body>Qualquer conteúdo aqui</Card.Body>
// </Card>

npx create-next-app@latest devboard
# Responda:
# ✔ TypeScript? ........ Yes
# ✔ ESLint? ............ Yes
# ✔ Tailwind CSS? ...... Yes
# ✔ src/ directory? .... Yes
# ✔ App Router? ........ Yes  ← fundamental
# ✔ Import alias @/* ... Yes

cd devboard && npm run dev   # http://localhost:3000

src/app/
├── layout.tsx          # layout raiz (html, body) — obrigatório
├── page.tsx            # rota /
├── globals.css
├── dashboard/
│   ├── layout.tsx      # layout compartilhado do dashboard
│   ├── page.tsx        # rota /dashboard
│   ├── loading.tsx     # UI de carregamento automática (Suspense)
│   ├── error.tsx       # captura erros dessa subárvore
│   └── projetos/
│       ├── page.tsx            # /dashboard/projetos
│       └── [id]/
│           └── page.tsx        # /dashboard/projetos/42 (dinâmica)
├── (marketing)/        # route group: organiza sem afetar a URL
│   ├── sobre/page.tsx          # /sobre
│   └── precos/page.tsx         # /precos
└── api/                # Route Handlers (M07)
    └── tarefas/route.ts        # /api/tarefas

import Link from "next/link";

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="flex min-h-screen">
      <aside className="w-64 border-r p-4">
        <nav className="flex flex-col gap-2">
          <Link href="/dashboard">Visão geral</Link>
          <Link href="/dashboard/projetos">Projetos</Link>
        </nav>
      </aside>
      <main className="flex-1 p-6">{children}</main>
    </div>
  );
}

import { notFound } from "next/navigation";

// Em Next 15, params é uma Promise — sempre use await
type Props = { params: Promise<{ id: string }> };

export default async function ProjetoPage({ params }: Props) {
  const { id } = await params;
  const projeto = await buscarProjeto(id);   // função sua (M06)

  if (!projeto) notFound();   // renderiza o not-found.tsx

  return <h1 className="text-2xl font-bold">{projeto.nome}</h1>;
}

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Preços | DevBoard",
  description: "Planos flexíveis para times de todos os tamanhos.",
  openGraph: { title: "DevBoard", images: ["/og.png"] },
};

// Metadados dinâmicos:
// export async function generateMetadata({ params }): Promise<Metadata> { ... }

import { db } from "@/lib/db";
import { FiltroProjetos } from "./filtro";

// Server Component: async, busca dados direto, zero JS no cliente
export default async function ProjetosPage() {
  const projetos = await db.projeto.findMany();

  return (
    <section>
      <h1>Projetos</h1>
      {/* passa dados do servidor para o componente interativo */}
      <FiltroProjetos projetos={projetos} />
    </section>
  );
}

"use client";

import { useState } from "react";
import type { Projeto } from "@prisma/client";

export function FiltroProjetos({ projetos }: { projetos: Projeto[] }) {
  const [busca, setBusca] = useState("");

  const filtrados = projetos.filter((p) =>
    p.nome.toLowerCase().includes(busca.toLowerCase())
  );

  return (
    <>
      <input value={busca} onChange={(e) => setBusca(e.target.value)} />
      <ul>{filtrados.map((p) => <li key={p.id}>{p.nome}</li>)}</ul>
    </>
  );
}

// ✅ Client Component que "abraça" conteúdo de servidor
"use client";
export function Accordion({ children }: { children: React.ReactNode }) {
  const [aberto, setAberto] = useState(false);
  return (
    <div>
      <button onClick={() => setAberto(!aberto)}>Detalhes</button>
      {aberto && children}   {/* children veio pronto do servidor */}
    </div>
  );
}

// Com fetch (APIs externas)
export default async function Page() {
  const res = await fetch("https://api.exemplo.com/posts", {
    next: { revalidate: 60 },        // ISR: revalida a cada 60s
    // cache: "force-cache"  → estático
    // cache: "no-store"     → sempre dinâmico (SSR puro)
  });
  const posts: Post[] = await res.json();
  return <Lista posts={posts} />;
}

// Direto no banco (sem fetch) — cache controlado na rota:
export const revalidate = 60;          // ISR para a página inteira
// export const dynamic = "force-dynamic";  // SSR sempre

import { Suspense } from "react";

export default function Dashboard() {
  return (
    <>
      <h1>Dashboard</h1>                        {/* aparece na hora */}
      <Suspense fallback={<SkeletonCards />}>
        <MetricasLentas />                       {/* streama quando pronto */}
      </Suspense>
      <Suspense fallback={<SkeletonLista />}>
        <AtividadesRecentes />
      </Suspense>
    </>
  );
}

"use server";

import { z } from "zod";
import { db } from "@/lib/db";
import { revalidatePath } from "next/cache";

const schema = z.object({
  titulo: z.string().min(3, "Título muito curto"),
  projetoId: z.string().cuid(),
});

export type ActionState = { ok: boolean; message: string };

export async function criarTarefa(
  _prev: ActionState,
  formData: FormData
): Promise<ActionState> {
  // 1. NUNCA confie no cliente: valide sempre no servidor
  const parsed = schema.safeParse(Object.fromEntries(formData));
  if (!parsed.success) {
    return { ok: false, message: parsed.error.issues[0].message };
  }

  // 2. (M09) Verifique autenticação/autorização aqui!

  await db.tarefa.create({ data: parsed.data });

  // 3. Invalida o cache da página para refletir o novo dado
  revalidatePath("/dashboard/tarefas");
  return { ok: true, message: "Tarefa criada!" };
}

"use client";

import { useActionState } from "react";
import { criarTarefa, type ActionState } from "./actions";

const inicial: ActionState = { ok: true, message: "" };

export function NovaTarefaForm({ projetoId }: { projetoId: string }) {
  const [state, action, pending] = useActionState(criarTarefa, inicial);

  return (
    <form action={action} className="flex gap-2">
      <input name="titulo" placeholder="Nova tarefa" required />
      <input type="hidden" name="projetoId" value={projetoId} />
      <button disabled={pending}>
        {pending ? "Salvando..." : "Criar"}
      </button>
      {!state.ok && <p className="text-red-600">{state.message}</p>}
    </form>
  );
}

import { NextRequest, NextResponse } from "next/server";
import { z } from "zod";
import { db } from "@/lib/db";

// GET /api/tarefas?status=pendente&page=1
export async function GET(req: NextRequest) {
  const status = req.nextUrl.searchParams.get("status");
  const page = Number(req.nextUrl.searchParams.get("page") ?? 1);

  const tarefas = await db.tarefa.findMany({
    where: status ? { status } : undefined,
    take: 20,
    skip: (page - 1) * 20,
    orderBy: { criadoEm: "desc" },
  });

  return NextResponse.json({ data: tarefas, page });
}

const criarSchema = z.object({
  titulo: z.string().min(3).max(120),
  projetoId: z.string().cuid(),
});

// POST /api/tarefas
export async function POST(req: NextRequest) {
  const body = await req.json().catch(() => null);
  const parsed = criarSchema.safeParse(body);

  if (!parsed.success) {
    return NextResponse.json(
      { error: "Dados inválidos", issues: parsed.error.flatten() },
      { status: 422 }
    );
  }

  const tarefa = await db.tarefa.create({ data: parsed.data });
  return NextResponse.json(tarefa, { status: 201 });
}

import { z } from "zod";

export const usuarioSchema = z.object({
  nome: z.string().min(2),
  email: z.string().email(),
  idade: z.coerce.number().int().min(18).optional(),
  papel: z.enum(["admin", "membro"]).default("membro"),
});

// Um schema, um tipo: fonte única de verdade
export type Usuario = z.infer<typeof usuarioSchema>;
// { nome: string; email: string; idade?: number; papel: "admin" | "membro" }

// Também valide variáveis de ambiente na inicialização:
export const env = z.object({
  DATABASE_URL: z.string().url(),
  AUTH_SECRET: z.string().min(32),
}).parse(process.env);

npm install prisma -D
npm install @prisma/client
npx prisma init --datasource-provider postgresql

# Postgres local rápido com Docker:
docker run --name pg-devboard -e POSTGRES_PASSWORD=dev \
  -e POSTGRES_DB=devboard -p 5432:5432 -d postgres:16

# .env
# DATABASE_URL="postgresql://postgres:dev@localhost:5432/devboard"

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  nome      String
  senhaHash String?
  papel     Papel    @default(MEMBRO)
  projetos  Projeto[]
  tarefas   Tarefa[]
  criadoEm  DateTime @default(now())
}

model Projeto {
  id       String  @id @default(cuid())
  nome     String
  dono     User    @relation(fields: [donoId], references: [id])
  donoId   String
  tarefas  Tarefa[]

  @@index([donoId])
}

model Tarefa {
  id          String   @id @default(cuid())
  titulo      String
  status      Status   @default(PENDENTE)
  projeto     Projeto  @relation(fields: [projetoId], references: [id], onDelete: Cascade)
  projetoId   String
  responsavel User?    @relation(fields: [userId], references: [id])
  userId      String?
  criadoEm    DateTime @default(now())

  @@index([projetoId, status])
}

enum Papel  { ADMIN MEMBRO }
enum Status { PENDENTE EM_ANDAMENTO CONCLUIDA }

npx prisma migrate dev --name init   # gera e aplica a migração SQL
npx prisma studio                    # GUI para inspecionar os dados

import { PrismaClient } from "@prisma/client";

// Em dev, o hot reload recriaria clientes infinitamente
// e esgotaria as conexões do banco. Este padrão evita isso.
const globalForPrisma = globalThis as unknown as { prisma?: PrismaClient };

export const db = globalForPrisma.prisma ?? new PrismaClient();

if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = db;

// Relacionamentos: include vs select
const projeto = await db.projeto.findUnique({
  where: { id },
  select: {
    id: true, nome: true,
    tarefas: { where: { status: "PENDENTE" }, orderBy: { criadoEm: "desc" } },
    _count: { select: { tarefas: true } },
  },
});
// O tipo de retorno reflete EXATAMENTE o select — autocomplete total.

// Agregações
const porStatus = await db.tarefa.groupBy({
  by: ["status"],
  _count: { _all: true },
  where: { projetoId },
});

// Transações: tudo ou nada
await db.$transaction(async (tx) => {
  const p = await tx.projeto.create({ data: { nome, donoId } });
  await tx.tarefa.createMany({
    data: modelos.map((t) => ({ ...t, projetoId: p.id })),
  });
});

// Upsert: cria ou atualiza
await db.user.upsert({
  where: { email },
  update: { nome },
  create: { email, nome },
});

npm install next-auth@beta @auth/prisma-adapter bcryptjs
npx auth secret   # gera AUTH_SECRET no .env.local

import NextAuth from "next-auth";
import GitHub from "next-auth/providers/github";
import Credentials from "next-auth/providers/credentials";
import { PrismaAdapter } from "@auth/prisma-adapter";
import { compare } from "bcryptjs";
import { db } from "@/lib/db";
import { z } from "zod";

const loginSchema = z.object({
  email: z.string().email(),
  senha: z.string().min(8),
});

export const { handlers, auth, signIn, signOut } = NextAuth({
  adapter: PrismaAdapter(db),
  session: { strategy: "jwt" },
  providers: [
    GitHub,   // AUTH_GITHUB_ID e AUTH_GITHUB_SECRET no .env
    Credentials({
      credentials: { email: {}, senha: {} },
      async authorize(creds) {
        const parsed = loginSchema.safeParse(creds);
        if (!parsed.success) return null;

        const user = await db.user.findUnique({
          where: { email: parsed.data.email },
        });
        if (!user?.senhaHash) return null;

        const ok = await compare(parsed.data.senha, user.senhaHash);
        return ok ? { id: user.id, email: user.email, name: user.nome } : null;
      },
    }),
  ],
  callbacks: {
    jwt({ token, user }) {
      if (user) token.id = user.id;   // enriquece o token no login
      return token;
    },
    session({ session, token }) {
      session.user.id = token.id as string;
      return session;
    },
  },
});

import { handlers } from "@/auth";
export const { GET, POST } = handlers;

// 1) Página (Server Component)
import { auth } from "@/auth";
import { redirect } from "next/navigation";

export default async function DashboardPage() {
  const session = await auth();
  if (!session?.user) redirect("/login");
  return <h1>Olá, {session.user.name}</h1>;
}

// 2) Server Action — verifique DE NOVO (defesa em profundidade)
"use server";
export async function excluirTarefa(id: string) {
  const session = await auth();
  if (!session?.user) throw new Error("Não autenticado");

  // Autorização: o recurso pertence ao usuário?
  const tarefa = await db.tarefa.findUnique({
    where: { id },
    select: { projeto: { select: { donoId: true } } },
  });
  if (tarefa?.projeto.donoId !== session.user.id) {
    throw new Error("Sem permissão");   // evita IDOR
  }
  await db.tarefa.delete({ where: { id } });
}

// 3) Middleware — proteção de rota em larga escala
// middleware.ts na raiz: redireciona /dashboard/* sem sessão.
// Importante: middleware é UX, não segurança final —
// a checagem de verdade fica na página/action/handler.

const config = {
  api: { url: "https://api.dev", timeout: 5000 },
  tema: { primario: "#3178C6" },
} as const;   // congela: tipos viram literais readonly

type Config = typeof config;            // tipo a partir do valor
type Secao = keyof Config;              // "api" | "tema"
type Timeout = Config["api"]["timeout"]; // 5000 (literal!)

// Padrão de mercado: derivar unions de arrays com as const
const STATUS = ["pendente", "em_andamento", "concluida"] as const;
type Status = (typeof STATUS)[number];  // "pendente" | "em_andamento" | "concluida"

// Sintaxe: A extends B ? X : Y  — um if/else de tipos
type EhString<T> = T extends string ? true : false;

// infer: captura um tipo "de dentro" de outro
type ElementoDe<T> = T extends (infer U)[] ? U : never;
type A = ElementoDe<string[]>;        // string

// Reimplementando utilities nativas (clássico de entrevista):
type MeuReturnType<T> =
  T extends (...args: any[]) => infer R ? R : never;

type MeuAwaited<T> =
  T extends Promise<infer U> ? MeuAwaited<U> : T;  // recursivo!

// Distribuição sobre unions: acontece automaticamente
type SemNulos<T> = T extends null | undefined ? never : T;
type B = SemNulos<string | null | number>;   // string | number

// Mapped type: transforma cada propriedade de um tipo
type Opcional<T> = { [K in keyof T]?: T[K] };          // = Partial
type SomenteLeitura<T> = { readonly [K in keyof T]: T[K] };

// Template literals: strings com estrutura tipada
type Rota = `/api/${string}`;
const ok: Rota = "/api/tarefas";   // ✅
const ruim: Rota = "/tarefas";     // ❌

// Combinando os dois: gerar getters automaticamente
type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};
type UserGetters = Getters<{ nome: string; idade: number }>;
// { getNome: () => string; getIdade: () => number }

// Extraindo params de rota — como o Next.js tipa rotas dinâmicas
type Params<T extends string> =
  T extends `${string}/[${infer P}]/${infer Resto}`
    ? { [K in P]: string } & Params<`/${Resto}`>
    : T extends `${string}/[${infer P}]`
      ? { [K in P]: string }
      : {};
type R = Params<"/projetos/[id]/tarefas/[tarefaId]">;
// { id: string } & { tarefaId: string }

// Type guard customizado: função que ensina o compilador
function ehUsuario(v: unknown): v is { id: string; email: string } {
  return (
    typeof v === "object" && v !== null &&
    "id" in v && "email" in v
  );
}

// satisfies: valida o formato SEM alargar o tipo
const paleta = {
  primario: "#3178C6",
  erro: [180, 35, 24],
} satisfies Record<string, string | number[]>;

paleta.primario.toUpperCase();  // ✅ TS sabe que é string
paleta.erro.map((n) => n);      // ✅ TS sabe que é number[]
// Com ": Record<...>" em vez de satisfies, os dois virariam
// "string | number[]" e você perderia os métodos. Pegadinha clássica!

// Branded types: IDs que não se misturam
type UserId = string & { readonly __brand: "UserId" };
type ProjetoId = string & { readonly __brand: "ProjetoId" };

function buscarUsuario(id: UserId) { /* ... */ }
declare const projetoId: ProjetoId;
buscarUsuario(projetoId);   // ❌ Erro: brands diferentes!
// Em runtime são strings normais; a proteção existe só em compile time.

export type Result<T, E = string> =
  | { ok: true; value: T }
  | { ok: false; error: E };

export const Ok = <T>(value: T): Result<T, never> => ({ ok: true, value });
export const Err = <E>(error: E): Result<never, E> => ({ ok: false, error });

// Uso: quem chama é OBRIGADO a tratar o erro
async function cobrar(valor: number): Promise<Result<{ id: string }, "saldo" | "rede">> {
  if (valor > 1000) return Err("saldo");
  return Ok({ id: "tx_123" });
}

const r = await cobrar(500);
if (!r.ok) {
  // r.error é "saldo" | "rede" — trate cada caso
} else {
  r.value.id;   // seguro
}

npm install -D vitest @testing-library/react @testing-library/user-event \
  @testing-library/jest-dom jsdom @vitejs/plugin-react

import { describe, it, expect } from "vitest";
import { calcularDesconto } from "./preco";

describe("calcularDesconto", () => {
  it("aplica o percentual sobre o preço", () => {
    expect(calcularDesconto(100, 10)).toBe(90);
  });

  it("lança erro para percentual inválido", () => {
    expect(() => calcularDesconto(100, 150)).toThrow();
  });

  // it.each: tabela de casos — impressiona em code review
  it.each([
    [200, 0, 200],
    [200, 50, 100],
    [200, 100, 0],
  ])("preço %i com %i%% => %i", (preco, pct, esperado) => {
    expect(calcularDesconto(preco, pct)).toBe(esperado);
  });
});

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, it, expect, vi } from "vitest";
import { NovaTarefaForm } from "./form";

describe("NovaTarefaForm", () => {
  it("envia o título digitado", async () => {
    const onSubmit = vi.fn();
    render(<NovaTarefaForm onSubmit={onSubmit} />);

    // Busque como o USUÁRIO enxerga: por papel e rótulo acessível
    await userEvent.type(
      screen.getByRole("textbox", { name: /título/i }),
      "Estudar Playwright"
    );
    await userEvent.click(screen.getByRole("button", { name: /criar/i }));

    expect(onSubmit).toHaveBeenCalledWith("Estudar Playwright");
  });

  it("mostra erro para título curto", async () => {
    render(<NovaTarefaForm onSubmit={vi.fn()} />);
    await userEvent.click(screen.getByRole("button", { name: /criar/i }));
    expect(await screen.findByText(/muito curto/i)).toBeInTheDocument();
  });
});

import { test, expect } from "@playwright/test";

test("usuário faz login e cria uma tarefa", async ({ page }) => {
  await page.goto("/login");
  await page.getByLabel("E-mail").fill("ana@teste.com");
  await page.getByLabel("Senha").fill("senha-segura-123");
  await page.getByRole("button", { name: "Entrar" }).click();

  await expect(page).toHaveURL("/dashboard");

  await page.getByPlaceholder("Nova tarefa").fill("Revisar PR");
  await page.getByRole("button", { name: "Criar" }).click();

  await expect(page.getByText("Revisar PR")).toBeVisible();
});

src/
├── app/                    # SÓ roteamento: pages, layouts, handlers finos
├── features/               # o coração do app, por domínio
│   ├── tarefas/
│   │   ├── components/     # UI específica de tarefas
│   │   ├── actions.ts      # Server Actions (camada fina)
│   │   ├── service.ts      # regras de negócio (funções puras quando possível)
│   │   ├── repository.ts   # acesso a dados (Prisma isolado aqui)
│   │   └── schemas.ts      # Zod + tipos do domínio
│   ├── auth/
│   └── projetos/
├── components/ui/          # design system compartilhado (Button, Card...)
└── lib/                    # infra transversal: db, env, utils

import { tarefaRepo } from "./repository";
import { Result, Ok, Err } from "@/lib/result";

type ErroConcluir = "nao_encontrada" | "sem_permissao" | "ja_concluida";

export async function concluirTarefa(
  tarefaId: string,
  usuarioId: string
): Promise<Result<void, ErroConcluir>> {
  const tarefa = await tarefaRepo.buscarComDono(tarefaId);

  if (!tarefa) return Err("nao_encontrada");
  if (tarefa.donoId !== usuarioId) return Err("sem_permissao");
  if (tarefa.status === "CONCLUIDA") return Err("ja_concluida");

  await tarefaRepo.atualizarStatus(tarefaId, "CONCLUIDA");
  return Ok(undefined);
}
// Regra de negócio testável SEM Next.js, SEM HTTP, SEM mock de framework.

// 1. Imagens: redimensiona, converte p/ WebP/AVIF, lazy load, evita CLS
import Image from "next/image";
<Image src="/capa.jpg" alt="Capa" width={1200} height={630} priority />
// priority: use na imagem do LCP (acima da dobra)

// 2. Fontes: self-host automático, sem flash de fonte errada
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });

// 3. Code splitting: cada rota já é um bundle separado.
//    Componentes pesados só quando necessários:
import dynamic from "next/dynamic";
const Grafico = dynamic(() => import("./grafico"), {
  loading: () => <Skeleton />,
});

// ❌ Cascata: 300ms + 300ms + 300ms = 900ms
const user = await buscarUser();
const projetos = await buscarProjetos();
const avisos = await buscarAvisos();

// ✅ Paralelo: ~300ms total
const [user2, projetos2, avisos2] = await Promise.all([
  buscarUser(), buscarProjetos(), buscarAvisos(),
]);

import { memo, useMemo, useCallback } from "react";

// useMemo: cachear CÁLCULO caro entre renders
const ordenados = useMemo(
  () => [...itens].sort((a, b) => b.pontos - a.pontos),
  [itens]
);

// useCallback + memo: evitar re-render de filho pesado
const aoSelecionar = useCallback((id: string) => setSel(id), []);
const LinhaMemo = memo(Linha);

# Etapa 1: dependências
FROM node:20-alpine AS deps
WORKDIR /app
COPY package*.json ./
RUN npm ci

# Etapa 2: build
FROM node:20-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npx prisma generate && npm run build

# Etapa 3: imagem final enxuta (~150MB)
FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/public ./public
EXPOSE 3000
CMD ["node", "server.js"]

name: CI
on:
  pull_request:
  push: { branches: [main] }

jobs:
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20, cache: npm }
      - run: npm ci
      - run: npm run lint          # ESLint
      - run: npx tsc --noEmit      # checagem de tipos
      - run: npm test -- --run     # Vitest
      - run: npm run build         # o build precisa passar