Curso de MEAN Stack: Clone do Trello em Tempo Real

Aula 1 • Inicializando a Estrutura do Projeto Monorepo

Cria diretórios separados de cliente e servidor dentro de um único repositório. Estabelece as convenções de pastas usadas em todo o curso.

Aula 2 • Entendendo a Arquitetura do MEAN Stack

Abrange as funções do MongoDB, Express, Angular e Node.js e como eles se interconectam. Fornece o modelo mental necessário antes de escrever qualquer código.

Aula 3 • Variáveis de Ambiente e Gerenciamento de Configuração

Apresenta o dotenv para segredos e configurações específicas do ambiente. Impede que credenciais codificadas entrem no controle de versão.

Aula 1 • Validação de Schema e Hooks de Middleware

Adiciona validadores Mongoose e hooks pre/post para aplicar regras de negócio no nível do modelo. Reduz dados inválidos antes que cheguem ao banco de dados.

Aula 2 • Projetando Schemas de Quadro, Lista e Cartão

Cria schemas Mongoose para as três entidades principais do Trello com campos tipados. Estabelece os contratos de dados consumidos por cada endpoint de API.

Aula 3 • Indexação e Otimização de Consultas

Aplica índices compostos e de campo único para suportar buscas rápidas de quadros e cartões. Prepara o banco de dados para cargas de consulta em tempo real.

Aula 1 • Teste de API com Postman e Jest

Testa todos os endpoints manualmente no Postman e os automatiza com Jest e Supertest. Valida a correção da API antes da integração com o frontend.

Aula 2 • Endpoints CRUD para Quadros, Listas e Cartões

Constrói endpoints RESTful cobrindo criar, ler, atualizar e deletar para todas as três entidades. Conecta controllers aos modelos Mongoose estabelecidos no Capítulo 2.

Aula 3 • Validação de Entrada com Express-Validator

Valida e sanitiza os corpos das requisições recebidas antes que cheguem ao banco de dados. Previne dados malformados e tentativas de injeção no limite da API.

Aula 4 • Estrutura e Roteamento da Aplicação Express

Organiza rotas, controllers e serviços em uma arquitetura em camadas. Mantém as preocupações separadas para a manutenibilidade à medida que a API cresce.

Aula 1 • Endpoints de Registro e Login

Constrói as rotas /auth/register e /auth/login que retornam JWTs assinados em caso de sucesso. Conecta a criação de usuário e a verificação de credenciais ao ciclo de vida do token.

Aula 2 • Middleware JWT e Proteção de Rotas

Cria um middleware Express que verifica tokens e anexa o usuário à requisição. Protege todas as rotas de quadro, lista e cartão contra acesso não autenticado.

Aula 3 • Schema de Usuário e Hash de Senha

Cria o modelo Mongoose de Usuário e faz o hash das senhas com bcrypt antes do armazenamento. Estabelece a base segura de credenciais para todos os fluxos de autenticação.

Aula 1 • Gerenciamento de Estado com NgRx

Apresenta a store, actions, reducers e effects do NgRx para gerenciar o estado de quadros e cartões. Fornece um contêiner de estado previsível para atualizações em tempo real.

Aula 2 • Design de Módulo Angular e Módulo de Funcionalidade

Organiza a aplicação em módulos core, shared e feature seguindo as melhores práticas do Angular. Reduz o tamanho do bundle e melhora a localização do código.

Aula 3 • Cliente HTTP e Interceptors

Configura o HttpClientModule e um interceptor que anexa cabeçalhos JWT a cada requisição. Centraliza a injeção do token de autenticação em todas as chamadas de API.

Aula 4 • Guards de Autenticação e Proteção de Rotas

Implementa guards CanActivate que redirecionam usuários não autenticados para a página de login. Espelha a camada de autorização do backend no lado do cliente.

Aula 1 • Formulários Reativos e Validação

Implementa Formulários Reativos do Angular para todos os formulários de criação e edição com validação no lado do cliente. Espelha as regras de validação do lado do servidor para uma experiência de usuário consistente.

Aula 2 • Arrastar e Soltar com Angular CDK

Integra o DragDrop do Angular CDK para permitir a reordenação de cartões dentro e entre listas. Despacha ações de reordenação para o NgRx e sincroniza com o backend.

Aula 3 • Componentes de Dashboard do Quadro e Navegação

Constrói o dashboard inicial listando todos os quadros do usuário e uma barra de navegação superior. Conecta componentes a selectors do NgRx e chamadas de API de quadros.

Aula 4 • Visualização do Quadro com Listas e Cartões

Renderiza um único quadro com suas listas e cartões em um layout horizontal rolável. Busca e normaliza os dados do quadro da store do NgRx.

Aula 1 • Atualizando a Store do NgRx a partir de Eventos Socket

Despacha ações do NgRx a partir de assinaturas de eventos socket para atualizar o estado do quadro em tempo real. Mescla fluxos de dados REST e WebSocket em uma única fonte de estado.

Aula 2 • Emitindo Eventos a partir de Endpoints de API

Dispara emissões socket a partir de controllers Express após gravações bem-sucedidas no banco de dados. Mantém as camadas REST e WebSocket sincronizadas em cada mutação.

Aula 3 • Configuração do Servidor Socket.IO e Namespaces

Anexa o Socket.IO ao servidor HTTP Express existente e define namespaces com escopo de quadro. Isola eventos em tempo real por quadro para uma transmissão eficiente.

Aula 4 • Indicadores de Presença e Cursores ao Vivo

Mostra quais usuários estão visualizando atualmente um quadro usando eventos de presença e indicadores de avatar. Adiciona consciência colaborativa sem bloquear o fluxo de dados principal.

Aula 1 • Logging, Monitoramento e Rastreamento de Erros

Integra logging estruturado, monitoramento de uptime e um rastreador de erros do frontend em produção. Fornece visibilidade sobre falhas antes que os usuários as relatem.

Aula 2 • Dockerizando a Aplicação MEAN Stack

Escreve Dockerfiles para a build do Angular e do servidor Express e os compõe com o MongoDB. Produz imagens de contêiner reproduzíveis para qualquer destino de implantação.

Aula 3 • Pipeline CI/CD com GitHub Actions

Automatiza linting, testes, build e push de imagens Docker em cada pull request. Reduz etapas manuais de implantação e detecta regressões precocemente.

Aula 4 • Implantação em Nuvem e Configuração de Ambiente

Implanta contêineres em uma plataforma de nuvem e configura variáveis de ambiente de produção. Torna a aplicação publicamente acessível com uma conexão de banco de dados gerenciada.