Formation MEAN Stack : Clone Trello en temps réel

Leçon 1 • Initialisation de la structure du projet Monorepo

Crée des dossiers distincts pour le client et le serveur à l'intérieur d'un seul dépôt. Établit les conventions de dossiers utilisées tout au long du cours.

Leçon 2 • Compréhension de l'architecture MEAN Stack

Couvre les rôles de MongoDB, Express, Angular et Node.js et la manière dont ils s'interconnectent. Fournit le modèle mental nécessaire avant d'écrire du code.

Leçon 3 • Variables d'environnement et gestion de la configuration

Présente dotenv pour les secrets et les paramètres spécifiques à l'environnement. Empêche les informations d'identification codées en dur d'entrer dans le contrôle de source.

Leçon 1 • Validation de schéma et hooks d'intergiciel

Ajoute des validateurs Mongoose et des hooks pre/post pour appliquer les règles métier au niveau du modèle. Réduit les données invalides avant qu'elles n'atteignent la base de données.

Leçon 2 • Conception des schémas Board, List et Card

Crée des schémas Mongoose pour les trois entités principales de Trello avec des champs typés. Établit les contrats de données consommés par chaque point de terminaison API.

Leçon 3 • Indexation et optimisation des requêtes

Applique des index composés et à champ unique pour prendre en charge les recherches rapides de tableaux et de cartes. Prépare la base de données pour des charges de requêtes en temps réel.

Leçon 1 • Test d'API avec Postman et Jest

Teste tous les points de terminaison manuellement dans Postman et les automatise avec Jest et Supertest. Valide l'exactitude de l'API avant l'intégration du frontend.

Leçon 2 • Points de terminaison CRUD pour les tableaux, listes et cartes

Construit des points de terminaison RESTful couvrant la création, la lecture, la mise à jour et la suppression pour les trois entités. Connecte les contrôleurs aux modèles Mongoose établis au chapitre 2.

Leçon 3 • Validation des entrées avec Express-Validator

Valide et nettoie les corps de requête entrants avant qu'ils n'atteignent la base de données. Empêche les données malformées et les tentatives d'injection à la limite de l'API.

Leçon 4 • Structure de l'application Express et routage

Organise les routes, les contrôleurs et les services en une architecture en couches. Maintient la séparation des préoccupations pour la maintenabilité à mesure que l'API se développe.

Leçon 1 • Points de terminaison d'enregistrement et de connexion

Construit les routes /auth/register et /auth/login qui renvoient des JWT signés en cas de succès. Connecte la création d'utilisateurs et la vérification des informations d'identification au cycle de vie du jeton.

Leçon 2 • Intergiciel JWT et protection des routes

Crée un intergiciel Express qui vérifie les jetons et attache l'utilisateur à la requête. Protège toutes les routes des tableaux, listes et cartes contre les accès non authentifiés.

Leçon 3 • Schéma utilisateur et hachage du mot de passe

Crée le modèle Mongoose Utilisateur et hache les mots de passe avec bcrypt avant le stockage. Établit la base d'informations d'identification sécurisées pour tous les flux d'authentification.

Leçon 1 • Gestion d'état avec NgRx

Présente le store NgRx, les actions, les réducteurs et les effets pour la gestion de l'état des tableaux et des cartes. Fournit un conteneur d'état prévisible pour les mises à jour en temps réel.

Leçon 2 • Conception des modules Angular et des modules de fonctionnalités

Organise l'application en modules core, shared et feature suivant les bonnes pratiques Angular. Réduit la taille du bundle et améliore la découvrabilité du code.

Leçon 3 • Client HTTP et intercepteurs

Configure HttpClientModule et un intercepteur qui attache les en-têtes JWT à chaque requête. Centralise l'injection de jetons d'authentification dans tous les appels API.

Leçon 4 • Gardes d'authentification et protection des routes

Implémente des gardes CanActivate qui redirigent les utilisateurs non authentifiés vers la page de connexion. Reflète la couche d'autorisation backend côté client.

Leçon 1 • Formulaires réactifs et validation

Implémente les formulaires réactifs Angular pour tous les formulaires de création et d'édition avec validation côté client. Reflète les règles de validation côté serveur pour une expérience utilisateur cohérente.

Leçon 2 • Glisser-déposer avec Angular CDK

Intègre Angular CDK DragDrop pour permettre la réorganisation des cartes au sein des listes et entre elles. Déclenche des actions de réorganisation vers NgRx et se synchronise avec le backend.

Leçon 3 • Composants du tableau de bord et de navigation

Construit le tableau de bord d'accueil listant tous les tableaux de l'utilisateur et une barre de navigation supérieure. Connecte les composants aux sélecteurs NgRx et aux appels API des tableaux.

Leçon 4 • Vue du tableau avec listes et cartes

Affiche un seul tableau avec ses listes et ses cartes dans une mise en page à défilement horizontal. Récupère et normalise les données du tableau à partir du store NgRx.

Leçon 1 • Mise à jour du store NgRx à partir des événements Socket

Déclenche des actions NgRx à partir des abonnements aux événements socket pour mettre à jour l'état du tableau en temps réel. Fusionne les flux de données REST et WebSocket en une seule source d'état.

Leçon 2 • Émission d'événements depuis les points de terminaison API

Déclenche les émissions socket depuis les contrôleurs Express après les écritures réussies dans la base de données. Maintient les couches REST et WebSocket synchronisées à chaque mutation.

Leçon 3 • Configuration du serveur Socket.IO et espaces de noms

Attache Socket.IO au serveur HTTP Express existant et définit des espaces de noms par tableau. Isole les événements en temps réel par tableau pour une diffusion efficace.

Leçon 4 • Indicateurs de présence et curseurs en direct

Montre quels utilisateurs consultent actuellement un tableau à l'aide d'événements de présence et d'indicateurs d'avatar. Ajoute une conscience collaborative sans bloquer le flux de données principal.

Leçon 1 • Journalisation, surveillance et suivi des erreurs

Intègre la journalisation structurée, la surveillance de la disponibilité et un traceur d'erreurs frontend en production. Fournit une visibilité sur les échecs avant que les utilisateurs ne les signalent.

Leçon 2 • Dockérisation de l'application MEAN Stack

Écrit des Dockerfiles pour la build Angular et le serveur Express et les compose avec MongoDB. Produit des images de conteneur reproductibles pour toute cible de déploiement.

Leçon 3 • Pipeline CI/CD avec GitHub Actions

Automatise le linting, les tests, la construction et le push des images Docker à chaque pull request. Réduit les étapes de déploiement manuelles et détecte les régressions tôt.

Leçon 4 • Déploiement dans le cloud et configuration de l'environnement

Déploie les conteneurs sur une plateforme cloud et configure les variables d'environnement de production. Rend l'application accessible publiquement avec une connexion à une base de données gérée.