Rocketseat
Rocketseat
/

Testes e Arquitetura no Frontend

Aplique a pirâmide completa de testes e arquitetura básica nos seus projetos frontend

Icone da tag FrontendFrontendIcone da tag BackendBackendIcone da tag IntermediárioIntermediário
ReactJestReact Testing LibraryPlaywright
Testes e Arquitetura no Frontend icon
Visão geralConteúdos
Nível 1

Projeto Prompt Manager

74 Aulas

Setup Inicial e Ferramentas

Módulo7 aulas
48min
Novo

Neste módulo, vamos configurar o ambiente Next.js com TypeScript, Prisma e PostgreSQL via Docker Compose, implementar ESLint, Prettier e LeftHook para qualidade de código e automação de Git Hooks, configuração de estilização com Tailwind e Shadcn/UI e estabelecer o setup de testes com Jest e React Testing Library para preparar a base da aplicação seguindo Clean Architecture e SOLID.

Core, Home e Arquitetura Limpa

Módulo23 aulas
5h 14min
Novo

Neste módulo, vamos construir a home page e sidebar aplicando Clean Architecture e TDD, implementar busca com Server Actions, criar testes unitários, aplicar inversão de dependência através de repositórios e useCase desacoplados do Prisma, e validar a arquitetura em múltiplas camadas utilizando fakes e mocks.

Criação de Prompts e Feedback do Usuário

Módulo14 aulas
2h 54min
Novo

Neste módulo, vamos implementar a criação de prompts com validação usando React Hook Form e Zod, criar Server Actions testadas com casos de erro e validação, integrar feedback visual via toasts, aplicar padrão de repositório, e desenvolver testes unitários e de integração para formulários, use cases e componentes utilizando mocks e spies.

Testes E2E, Edição, Deleção e Responsividade

Módulo25 aulas
5h 20min
Novo

Neste módulo, vamos implementar testes E2E com Playwright, gravação e execução paralela, aplicar TDD para funcionalidades de edição e deleção com Server Actions, criar AlertDialog para confirmação com feedback visual, desenvolver responsividade com testes para diferentes viewports, adicionar animações com Motion, e integrar Nuqs para gerenciamento de query parameters.

Otimização e Deploy

Módulo5 aulas
52min
Novo

Neste módulo, vamos implementar `revalidatePath` para atualizar cache de rotas estáticas no Next.js após mutações, ajustar testes para reconhecer invalidação de cache, configurar scripts de build com Prisma `generate` para ambiente de produção, corrigir vulnerabilidades críticas do React Server Components, e realizar deploy na Vercel.

Quiz avaliativo

Quiz avaliativoobrigatório
34 Questões
Novo

Quiz avaliativo do curso Testes e Arquitetura no Frontend.

Nível 2

Certificado final

Certificado em Testes e Arquitetura no Frontend

Certificado em Testes e Arquitetura no Frontend

Certificado
Requisitos

Você chegou ao final da formação!

Quer continuar estudando conteúdos similares?
Explore nosso catálogo e acesse aulas, cursos e mais!

Inicie sua jornada na programação

Inicie sua jornada na programação com um curso gratuito.