Corso MEAN Stack con Progetto Clone Trello Real-Time

Lezione 1 • Inizializzazione della Struttura del Progetto Monorepo

Genera directory client e server separate all'interno di un unico repository. Stabilisce le convenzioni di cartella utilizzate durante l'intero corso.

Lezione 2 • Comprendere l'Architettura dello Stack MEAN

Tratta i ruoli di MongoDB, Express, Angular e Node.js e come si interconnettono. Fornisce il modello mentale necessario prima di scrivere qualsiasi codice.

Lezione 3 • Variabili d'Ambiente e Gestione della Configurazione

Introduce dotenv per i segreti e le impostazioni specifiche dell'ambiente. Impedisce che credenziali hardcoded entrino nel controllo del codice sorgente.

Lezione 1 • Convalida dello Schema e Hook Middleware

Aggiunge validatori Mongoose e hook pre/post per applicare le regole di business a livello di modello. Riduce i dati non validi prima che raggiungano il database.

Lezione 2 • Progettare gli Schemi Board, List e Card

Crea schemi Mongoose per le tre entità Trello principali con campi tipizzati. Stabilisce i contratti di dati consumati da ogni endpoint API.

Lezione 3 • Indicizzazione e Ottimizzazione delle Query

Applica indici composti e a singolo campo per supportare ricerche rapide su board e card. Prepara il database per carichi di query in tempo reale.

Lezione 1 • Test delle API con Postman e Jest

Testa tutti gli endpoint manualmente in Postman e li automatizza con Jest e Supertest. Convalida la correttezza dell'API prima dell'integrazione con il frontend.

Lezione 2 • Endpoint CRUD per Board, List e Card

Costruisce endpoint RESTful che coprono la creazione, lettura, aggiornamento ed eliminazione per tutte e tre le entità. Collega i controller ai modelli Mongoose stabiliti nel Capitolo 2.

Lezione 3 • Convalida dell'Input con Express-Validator

Convalida e sanifica i corpi delle richieste in arrivo prima che raggiungano il database. Previene dati malformati e tentativi di injection al confine dell'API.

Lezione 4 • Struttura dell'Applicazione Express e Routing

Organizza route, controller e servizi in un'architettura a livelli. Mantiene le preoccupazioni separate per la manutenibilità man mano che l'API cresce.

Lezione 1 • Endpoint di Registrazione e Login

Costruisce le route /auth/register e /auth/login che restituiscono JWT firmati in caso di successo. Collega la creazione dell'utente e la verifica delle credenziali al ciclo di vita del token.

Lezione 2 • Middleware JWT e Protezione delle Route

Crea un middleware Express che verifica i token e allega l'utente alla richiesta. Protegge tutte le route di board, list e card dall'accesso non autenticato.

Lezione 3 • Schema Utente e Hashing delle Password

Crea il modello Mongoose User ed esegue l'hashing delle password con bcrypt prima dell'archiviazione. Stabilisce la base sicura delle credenziali per tutti i flussi di autenticazione.

Lezione 1 • Gestione dello Stato con NgRx

Introduce lo store, le azioni, i reducer e gli effetti NgRx per gestire lo stato delle board e delle card. Fornisce un contenitore di stato prevedibile per aggiornamenti in tempo reale.

Lezione 2 • Progettazione dei Moduli e dei Feature Module di Angular

Organizza l'app in moduli core, condivisi e feature secondo le best practice Angular. Riduce le dimensioni del bundle e migliora la reperibilità del codice.

Lezione 3 • Client HTTP e Interceptor

Imposta HttpClientModule e un interceptor che allega gli header JWT a ogni richiesta. Centralizza l'iniezione del token di autenticazione in tutte le chiamate API.

Lezione 4 • Guard di Autenticazione e Protezione delle Route

Implementa guard CanActivate che reindirizzano gli utenti non autenticati alla pagina di login. Rispecchia il livello di autorizzazione del backend sul lato client.

Lezione 1 • Form Reattivi e Convalida

Implementa i Reactive Form di Angular per tutti i form di creazione e modifica con convalida lato client. Rispecchia le regole di convalida lato server per un'esperienza utente coerente.

Lezione 2 • Drag-and-Drop con Angular CDK

Integra Angular CDK DragDrop per abilitare il riordino delle card all'interno e tra le liste. Invia azioni di riordino a NgRx e sincronizza con il backend.

Lezione 3 • Componenti Dashboard della Bacheca e Navigazione

Costruisce la dashboard home che elenca tutte le board dell'utente e una barra di navigazione superiore. Collega i componenti ai selettori NgRx e alle chiamate API delle board.

Lezione 4 • Vista Board con Liste e Card

Visualizza una singola board con le sue liste e card in un layout orizzontale scrollabile. Recupera e normalizza i dati della board dallo store NgRx.

Lezione 1 • Aggiornamento dello Store NgRx da Eventi Socket

Invia azioni NgRx dalle sottoscrizioni agli eventi socket per aggiornare lo stato della board in tempo reale. Unisce i flussi di dati REST e WebSocket in un'unica fonte di stato.

Lezione 2 • Emissione di Eventi dagli Endpoint API

Attiva le emissioni socket dai controller Express dopo scritture di successo sul database. Mantiene i livelli REST e WebSocket sincronizzati su ogni mutazione.

Lezione 3 • Setup del Server Socket.IO e Namespace

Collega Socket.IO al server HTTP Express esistente e definisce namespace con ambito board. Isola gli eventi in tempo reale per board per una trasmissione efficiente.

Lezione 4 • Indicatori di Presenza e Cursori Live

Mostra quali utenti stanno attualmente visualizzando una board utilizzando eventi di presenza e indicatori avatar. Aggiunge consapevolezza collaborativa senza bloccare il flusso di dati principale.

Lezione 1 • Logging, Monitoraggio e Tracciamento degli Errori

Integra logging strutturato, monitoraggio dell'uptime e un tracciatore di errori frontend in produzione. Fornisce visibilità sui guasti prima che vengano segnalati dagli utenti.

Lezione 2 • Dockerizzare l'Applicazione MEAN Stack

Scrive Dockerfile per la build Angular e il server Express e li compone con MongoDB. Produce immagini container riproducibili per qualsiasi target di distribuzione.

Lezione 3 • Pipeline CI/CD con GitHub Actions

Automatizza linting, test, build e push delle immagini Docker su ogni pull request. Riduce i passaggi di distribuzione manuale e rileva precocemente le regressioni.

Lezione 4 • Distribuzione Cloud e Configurazione dell'Ambiente

Distribuisce i container su una piattaforma cloud e configura le variabili d'ambiente di produzione. Rende l'applicazione accessibile pubblicamente con una connessione al database gestita.