Início do módulo
Frontend — Tailwind & Next.js
Do utility-first do Tailwind até App Router, data fetching e formulários no Next.js.
20 lições328 min no total0% concluído
Começar trilha →
Fundamentos
O suficiente pra usar na prática sem se machucar.
10 lições · 161 min- 1Por que TailwindUtility-first na prática, comparado com CSS tradicional.12 min
- 2Classes fundamentaisEspaçamento, cor, tipografia e o par flex/grid — o vocabulário que resolve 90% das telas.16 min
- 3Responsividade e variantesPrefixos de estado (hover, focus) e de breakpoint (sm, md, lg) — a mesma sintaxe pros dois casos.14 min
- 4Componentizando com TailwindO que fazer quando a mesma pilha de classes se repete em vários lugares — cva e clsx na prática.16 min
- 5Next.js: o que é, App Router na práticaDe 'React com mais passos' pra um framework com roteamento, servidor e build embutidos.15 min
- 6Rotas, layouts e pastas privadas/públicaslayout.tsx, grupos de rota (auth)/(dashboard), e como separar telas públicas de autenticadas.15 min
- 7Componentes de servidor vs. clientePor padrão tudo roda no servidor — "use client" é a exceção, não a regra.14 min
- 8Data fetching e cacheBuscar dado direto no componente de servidor, e por que TanStack Query entra no client depois disso.16 min
- 9Formulários com React Hook Form + ZodUm formulário de verdade tem validação, mensagem de erro e estado de envio — não só um onSubmit.18 min
- 10Projeto guiado: tela CRUD do zeroJunta as 9 lições anteriores numa única tela: listar, criar e validar tarefas.25 min
Intermediário
O que fundamentos deixou em aberto — produção, performance, casos reais.
10 lições · 167 min- 1Estado global: Context API vs. ZustandProp drilling incomoda, mas a resposta nem sempre é Context — às vezes é uma lib pequena que não re-renderiza a árvore inteira.16 min
- 2useMemo, useCallback e useRef"Usa sempre que puder" é o conselho errado — cada um resolve um problema bem específico, e usar sem necessidade também tem custo.15 min
- 3Acessibilidade na práticaNão é 'polimento pra depois' — é o que decide se quem usa teclado ou leitor de tela consegue usar a tela.14 min
- 4Performance: code-splitting, lazy loading e Core Web Vitals"Carregou rápido no meu Wi-Fi" não é métrica — Core Web Vitals é o que o navegador de verdade mede.17 min
- 5Server Actions: mutação sem API routeAntes, toda mutação exigia criar uma API route e chamar fetch nela. Agora um form pode chamar uma função de servidor direto.15 min
- 6Middleware e proteção de rotasUm grupo (dashboard) organiza o layout de rotas autenticadas — mas nada nele impede alguém de acessar a URL direto sem sessão.15 min
- 7Testando componentes com Testing LibraryTestar 'como o componente foi implementado' quebra a cada refatoração; testar o que o usuário vê e faz não.16 min
- 8Upload de arquivos e imagensUm <input type="file"> sozinho não diz se o usuário selecionou o arquivo certo — preview e feedback fazem parte do upload.15 min
- 9Tabelas de dados: paginação, ordenação e filtroBuscar tudo com um fetch (lição 8) funciona com 20 linhas. Com 5 mil, a lista inteira em memória vira o problema.18 min
- 10Projeto guiado: dashboard com tabela, filtro e uploadJunta middleware, tabela paginada, filtro debounced e upload numa única tela: um dashboard de pedidos protegido.26 min