Arquitetura Frontend · Angular 21 · PT-BR

Você não precisa de mais um tutorial. Precisa construir.

Arquitetura frontend que se aprende construindo, não assistindo. 64 exercícios "constrói isto" + 11 projetos reais, cada um com solução Angular 21/TS de referência e rubrica de arquiteto sênior. Aqui o output é obrigatório.

Fazer a primeira lição de graça ver a oferta →
64 lições · 11 capstones · exercício + solução + rubrica em cada uma

O problema

Você já assistiu curso de Angular suficiente pra dar aula. Sabe signals, manja de RxJS, entrega feature no sprint. Mas quando cai um requisito novo e você abre o arquivo em branco, trava — não na sintaxe, na decisão. Qual a fronteira desse componente? Onde mora esse estado? Isso aguenta um time e dois anos, ou vira espaguete em três meses?

Aí você faz o que sempre "funcionou": procura um tutorial. Assiste no 2x, sente que aprendeu, fecha a aba. Três meses depois não lembra de nada — porque você nunca construiu nada com aquilo. Esse é o ciclo, e ele tem nome: tutorial hell.

E o problema nunca foi falta de conteúdo. Tem curso de graça sobrando no YouTube e na Udemy. O problema é mais simples e mais chato de encarar: assistir não vira músculo. Você não fica mais forte olhando alguém levantar peso.

Eu sei porque vivi isso. Uns dez anos de Angular e TypeScript, e ainda me pegava consumindo em vez de construir. Sem pose de guru: este produto é a saída que eu tive que montar pra mim mesmo.

A virada

Aqui a mecânica é invertida na raiz. Cada um dos 64 tópicos começa com o modelo mental — e depois você constrói. Só então você compara com a solução Angular 21/TS de referência e estuda as armadilhas comentadas. Não tem vídeo pra assistir de forma passiva. Tem um exercício "constrói isto" com um teste que já vem falhando, esperando você fazer passar.

Esse teste que falha é a rubrica virada código executável. Você não "acha" que acertou — o verde na sua máquina prova. E construir é a única forma de avançar: a skill-tree só acende o próximo nó quando o anterior fica verde. É o antídoto ao tutorial hell transformado em mecânica, não em promessa.

Não para no exercício isolado. Cada categoria fecha destravando o seu capstone — um projeto integrador de fim de semana, avaliado pela mesma rubrica que um staff usaria pra te avaliar numa entrevista sênior. No fim você não sai "sabendo mais Angular". Sai com 11 apps reais construídos por você e com a única coisa que nenhum vídeo transfere por osmose: o julgamento pra decidir arquitetura — o que sobrevive à próxima versão do framework.

Pra quem é (e pra quem não é)

É pra você se:

  • Você é dev frontend pleno→sênior, manda bem em Angular/TS, mas congela quando a pergunta muda de "como faço isso" pra "qual a arquitetura disto".
  • Você já acumulou curso demais assistido e sente, no fundo, que copia solução de tutorial em vez de decidir a sua.
  • Você quer um corpo de trabalho que prova senioridade — não mais um certificado pra enfeitar o LinkedIn.
  • Você aceita que vai ter que construir. Aqui o output é obrigatório, não opcional.

Não é pra você se:

  • Você ainda está aprendendo a sintaxe do JavaScript. Aqui eu já assumo base — isto é sobre arquitetura, não sobre o começo.
  • Você quer assistir vídeo no 2x e sentir que "estudou". Isso é exatamente o que te trouxe até aqui.
  • Você procura "os 10 truques do Angular". Angular aqui é a bancada, não o assunto — o assunto é a decisão que fica quando o framework troca de versão.
  • Você quer diploma sem escrever uma linha de código. Este curso produz prova de competência, não certificado de participação.

O que você leva

Módulo 1 — Núcleo: Tipos & Reatividade (pré-requisito)

Parar de usar TS e signals no chute. Modelar estado que não mente, não vaza e não te surpreende em produção — a fundação sobre a qual todo o resto se apoia.

Lições das categorias Fundamentos JS/TS e Reatividade & estado (signals/RxJS). Cada lição: modelo mental + exercício 'constrói isto' com teste que falha + solução de referência Angular 21/TS + armadilhas comentadas. Branch starter e solution no repo. Categoria trava até você fechar o capstone dela.

Módulo 2 — Composição: Componentes & Arquitetura de App

Desenhar fronteiras. Componentes que não sabem demais e apps que escalam sem virar espaguete — a diferença entre 'funciona' e 'aguenta um time e dois anos'.

Lições de Arquitetura de componentes + Padrões de aplicação (Nx/DDD). Modelo mental de boundaries, smart/dumb, feature/lib boundaries no Nx, DDD aplicado ao frontend. Exercícios executáveis + soluções + armadilhas de acoplamento. Capstone da categoria ao fim.

Módulo 3 — Velocidade: Performance, Rendering & Dados

Provar performance com métricas, não com fé. Renderizar listas gigantes a 60fps e buscar/cachear dados sem race conditions nem waterfalls — o que separa 'rápido no meu PC' de rápido de verdade.

Lições de Performance & rendering + Data fetching & caching. Change detection zoneless, virtual scroll, Web Worker, medição real (HUD de perf); estratégias de cache, revalidação, cancelamento. Exercícios cronometrados por métrica + soluções + armadilhas. Ponte direta pro capstone Ticker.

Módulo 4 — Blindagem: Testes, Build & Segurança/Observabilidade

Código em que você confia às 3 da manhã. Testes que pegam regressão de verdade, build que não te trai e um app que você enxerga rodando em produção.

Lições de Testes + Build & tooling + Segurança & observabilidade. Testes de arquitetura, jest zoneless/fake timers, tooling Nx/CI, XSS/CSP, logging e telemetria. Exercícios 'quebra e conserta' + soluções + armadilhas reais de produção.

Módulo 5 — Acabamento: Design Systems, CSS & Acessibilidade

A camada que separa júnior de sênior e quase ninguém domina: interface consistente, tema-aware e usável por todos — CSS que escala e a11y que não é checkbox.

Lições de Design systems & CSS + Acessibilidade. Tokens, temas claro/escuro, arquitetura de CSS, WAI-ARIA, foco/teclado, contraste AA. Exercícios com critério objetivo de aprovação + soluções + armadilhas de a11y invisíveis.

Módulo 6 — A Arena: 11 Capstones integradores

Montar coisas reais, fim-a-fim, com rubrica de arquiteto sênior. Sair com 11 apps construídos por você — incluindo o Ticker de 100k instrumentos provado por métricas — que viram portfolio público, não certificado de participação.

Os 11 projetos capstone (1 por categoria), do menor ao Ticker. Cada um: enunciado de projeto de fim de semana, rubrica de arquitetura sênior para auto-avaliação, repo starter e solução de referência. Destravados um a um ao fechar cada categoria — o fecho da trilha.

Módulo 1 — Núcleo: Tipos & Reatividade

O pré-requisito travado. Parar de usar TS e signals no chute e modelar estado que não mente, não vaza e não te surpreende em produção. Fundamentos JS/TS + Reatividade & estado (signals/RxJS), com exercício, teste que falha, solução de referência e armadilhas. Sem essa fundação, o resto desaba.

Módulo 2 — Composição: Componentes & Arquitetura de App

Desenhar fronteiras. Componentes que não sabem demais e apps que escalam sem virar espaguete. Boundaries, smart/dumb, feature/lib no Nx e DDD aplicado ao frontend — a diferença entre 'funciona' e 'aguenta um time e dois anos'.

Módulo 3 — Velocidade: Performance, Rendering & Dados

Provar performance com métrica, não com fé. Change detection zoneless, virtual scroll, Web Worker e HUD de perf; caching, revalidação e cancelamento sem race conditions nem waterfalls. Ponte direta pro capstone Ticker.

Módulo 4 — Blindagem: Testes, Build & Segurança/Observabilidade

Código em que você confia às 3 da manhã. Testes de arquitetura, jest zoneless/fake timers, tooling Nx/CI, XSS/CSP, logging e telemetria. Exercícios de 'quebra e conserta' com armadilhas reais de produção.

Módulo 5 — Acabamento: Design Systems, CSS & Acessibilidade

A camada que separa júnior de sênior e quase ninguém domina. Tokens, temas claro/escuro, arquitetura de CSS que escala, WAI-ARIA, foco/teclado e contraste AA — com critério objetivo de aprovação, não achismo.

Módulo 6 — A Arena: 11 Capstones integradores

Montar coisas reais, fim a fim, com rubrica de arquiteto sênior. Do menor ao Ticker de 100 mil instrumentos provado por métricas. Você sai com 11 apps construídos por você que viram portfolio público.

O repositório Nx companheiro

Cada lição tem uma branch starter (esqueleto + teste que falha) e uma branch solution de referência. Você clona, roda e só 'passa' quando o teste fica verde na sua máquina. Construir é a única forma de avançar.

Rubrica de Arquiteto Sênior + Catálogo de Armadilhas

O mesmo checklist que avalia os capstones, pra você usar em code review e entrevista — vira ferramenta de trabalho. Mais as armadilhas das 64 lições compiladas num anti-pattern catalog pesquisável pra consulta rápida.

Por que confiar no conteúdo

Eu não vou te pedir pra confiar na minha palavra. O corpo de trabalho está no ar pra você conferir antes de pagar:

53/64
lições onde um revisor cético achou e corrigiu erro técnico antes de publicar
100%
dos tópicos com exercício "constrói isto" executável — output obrigatório
60fps
o capstone Ticker, provado: 100k instrumentos, ~25 nós no DOM, 15k updates/s
Angular 21
signals, zoneless, control flow — solução de referência que compila

A oferta

🚀 Preço de lançamento · 5–7 dias
de R$ 597
R$ 397 à vista
ou €89 (Portugal/EU) · tier único, sem pegadinha

O que você leva:

  • As 64 lições completas nas 11 categorias — modelo mental + exercício "constrói isto" + solução Angular 21/TS de referência + armadilhas comentadas.
  • Os 11 capstones integradores com rubrica de arquiteto sênior, do menor ao Ticker.
  • O repositório Nx companheiro: branches starter e solution de cada lição.
  • A skill-tree com progresso rastreado, streak diário ("construiu algo hoje?") e a árvore acendendo conforme os testes ficam verdes.
  • Bônus: Rubrica de Arquiteto Sênior, Catálogo de Armadilhas e o monorepo starter com lint de boundaries pronto pra começar qualquer projeto real.
  • Acesso vitalício. Pagamento único — sem mais uma assinatura culpada esquecida no cartão.

Preço de lançamento: R$ 397 R$ 597 no Brasil · €89 €129 em Portugal. Janela de 5 a 7 dias.

Order bump opcional no checkout: a Rubrica de Arquiteto Sênior (PDF + versão executável em teste) por +R$ 47 / €12 — o checklist que você leva pro trabalho de verdade.

Pagamento pela Hotmart, com o que decide conversão em cada lado: Pix, boleto e cartão no Brasil; MB WAY e cartão em Portugal.

Garantia de 7 dias. Faz a primeira categoria inteira, constrói de verdade. Se não virou músculo, você pede reembolso — e leva o que construiu com você.

Entrar na lista de espera
➕ Order bump: Rubrica de Arquiteto Sênior (PDF + versão executável) por +R$ 47 — o checklist que você usa em code review e entrevista.

Rascunho de página · venda pela Hotmart (Pix + MB WAY) ainda não ativa — a lista de espera é o próximo passo.

Perguntas honestas

Tem curso de Angular de graça no YouTube e na Udemy. Por que pagar por isto?
Tem, e é exatamente por isso que você ainda está no tutorial hell. O gargalo nunca foi acesso a conteúdo — é que assistir não vira músculo. Aqui você não assiste: constrói, roda o teste e se mede por rubrica sênior. Você não está comprando mais aula. Está comprando o método de execução que te força a fazer a rep que você não faz sozinho.
A IA/Copilot já escreve o código pra mim. Pra que treinar isso?
A IA escreve o código; ela não decide a arquitetura por você nem sabe se a decisão foi a certa pro seu contexto. Quem só cola o que a IA cospe é júnior com output rápido — e é o primeiro da fila pra ser substituído. Isto treina o julgamento que faz você revisar a IA em vez de obedecer ela.
Angular 21 vai desatualizar. O conteúdo não vence junto?
Reatividade, boundaries de componente, rendering, performance, caching — os modelos mentais não desatualizam. Angular é só a bancada onde você pratica. Você sai decidindo arquitetura, não decorando a API de uma versão. É justamente o que sobra quando o framework troca.
Não tenho tempo pra mais um curso.
Ótimo, porque isto não é bootcamp de 6 meses. Cada tópico é um exercício de fim de tarde — o 'constrói isto' cabe numa janela de 30 a 60 minutos. Reps pequenas ganham da maratona. Foi desenhado pra caber na vida de quem trabalha, não pra virar mais uma assinatura esquecida com culpa.
É caro. Não dá pra aprender sozinho de graça?
O custo caro não é o preço; são os meses parado consumindo sem executar. Você já provou pra si mesmo que sozinho adia — todo mundo adia, é o design do tutorial. Isto existe pra forçar a rep que você não faz sozinho, e o preço de lançamento é de compra por impulso perto do que esses meses parados já te custaram.
Quem é o Israel pra ensinar isso?
Uns dez anos de Angular e TypeScript, sênior, dev de verdade — não palestrante. E, sem pose de guru: alguém que viveu o próprio tutorial hell e construiu o método pra sair. Não vendo palco. Vendo a saída que eu mesmo precisei montar — e o corpo de trabalho (64 lições + 11 capstones, revisados por um avaliador cético) está no ar pra você conferir antes de confiar.

Israel Lucena · dev frontend sênior (~10 anos, Angular/TS) · construído com o fio de evolução 🌀

← hub · skill tree · lição grátis