Cours MEAN Stack : Créer un clone de Trello

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

Crée des répertoires séparés pour le client et le serveur au sein d'un même dépôt. Établit les conventions de dossiers utilisées tout au long du cours.

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

Couvre les rôles de MongoDB, Express, Angular et Node.js ainsi que leur interconnexion. Fournit le modèle mental nécessaire avant d'écrire du code.

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

Présentation de dotenv pour les secrets et les paramètres spécifiques à l'environnement. Empêche que des identifiants codés en dur n'entrent dans le contrôle de source.

Leçon 1 • Validation des schémas 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 de tableau, liste et carte

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 d'accès API.

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

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

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

Teste tous les points d'accès 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 d'accès CRUD pour les tableaux, listes et cartes

Construit des points d'accès 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 assainit 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 dans une architecture en couches. Maintient la séparation des préoccupations pour la maintenabilité à mesure que l'API grandit.

Leçon 1 • Points d'accès 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 identifiants 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 de tableaux, listes et cartes contre l'accès non authentifié.

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

Crée le modèle Mongoose User et hache les mots de passe avec bcrypt avant le stockage. Établit la base d'identifiants sécurisée 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 gérer 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é

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 du jeton 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 le réordonnancement des cartes au sein et entre les listes. 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 du tableau

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 du tableau.

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

Affiche un seul tableau avec ses listes et cartes dans une disposition horizontale défilable. Récupère et normalise les données du tableau depuis le 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 d'accès API

Déclenche les émissions socket depuis les contrôleurs Express après des écritures réussies en 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 une journalisation structurée, une surveillance de la disponibilité et un traceur d'erreurs frontend en production. Fournit une visibilité sur les pannes avant que les utilisateurs ne les signalent.

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

Écrit des Dockerfiles pour la construction 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 IC/DC avec GitHub Actions

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

Leçon 4 • Déploiement 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 de base de données gérée.