MEAN Stack Project: Build a Real-Time Trello Clone Course

Lesson 1 • Initializing the Monorepo Project Structure

Scaffolds separate client and server directories inside a single repository. Establishes the folder conventions used throughout the entire course.

Lesson 2 • Understanding the MEAN Stack Architecture

Covers MongoDB, Express, Angular, and Node.js roles and how they interconnect. Provides the mental model needed before writing any code.

Lesson 3 • Environment Variables and Configuration Management

Introduces dotenv for secrets and environment-specific settings. Prevents hardcoded credentials from entering source control.

Lesson 1 • Schema Validation and Middleware Hooks

Adds Mongoose validators and pre/post hooks to enforce business rules at the model level. Reduces invalid data before it reaches the database.

Lesson 2 • Designing Board, List, and Card Schemas

Creates Mongoose schemas for the three core Trello entities with typed fields. Establishes the data contracts consumed by every API endpoint.

Lesson 3 • Indexing and Query Optimization

Applies compound and single-field indexes to support fast board and card lookups. Prepares the database for real-time query loads.

Lesson 1 • API Testing with Postman and Jest

Tests all endpoints manually in Postman and automates them with Jest and Supertest. Validates API correctness before frontend integration.

Lesson 2 • CRUD Endpoints for Boards, Lists, and Cards

Builds RESTful endpoints covering create, read, update, and delete for all three entities. Connects controllers to Mongoose models established in Chapter 2.

Lesson 3 • Input Validation with Express-Validator

Validates and sanitizes incoming request bodies before they reach the database. Prevents malformed data and injection attempts at the API boundary.

Lesson 4 • Express Application Structure and Routing

Organises routes, controllers, and services into a layered architecture. Keeps concerns separated for maintainability as the API grows.

Lesson 1 • Registration and Login Endpoints

Builds /auth/register and /auth/login routes that return signed JWTs on success. Connects user creation and credential verification to the token lifecycle.

Lesson 2 • JWT Middleware and Route Protection

Creates an Express middleware that verifies tokens and attaches the user to the request. Protects all board, list, and card routes from unauthenticated access.

Lesson 3 • User Schema and Password Hashing

Creates the User Mongoose model and hashes passwords with bcrypt before storage. Establishes the secure credential foundation for all auth flows.

Lesson 1 • State Management with NgRx

Introduces NgRx store, actions, reducers, and effects for managing board and card state. Provides a predictable state container for real-time updates.

Lesson 2 • Angular Module and Feature Module Design

Organises the app into core, shared, and feature modules following Angular best practices. Reduces bundle size and improves code discoverability.

Lesson 3 • HTTP Client and Interceptors

Sets up HttpClientModule and an interceptor that attaches JWT headers to every request. Centralizes auth token injection across all API calls.

Lesson 4 • Auth Guards and Route Protection

Implements CanActivate guards that redirect unauthenticated users to the login page. Mirrors the backend authorization layer on the client side.

Lesson 1 • Reactive Forms and Validation

Implements Angular Reactive Forms for all create and edit forms with client-side validation. Mirrors server-side validation rules for a consistent user experience.

Lesson 2 • Drag-and-Drop with Angular CDK

Integrates Angular CDK DragDrop to enable card reordering within and across lists. Dispatches reorder actions to NgRx and syncs with the backend.

Lesson 3 • Board Dashboard and Navigation Components

Builds the home dashboard listing all user boards and a top navigation bar. Connects components to NgRx selectors and board API calls.

Lesson 4 • Board View with Lists and Cards

Renders a single board with its lists and cards in a horizontal scrollable layout. Fetches and normalizes board data from the NgRx store.

Lesson 1 • Updating NgRx Store from Socket Events

Dispatches NgRx actions from socket event subscriptions to update board state in real time. Merges REST and WebSocket data flows into a single state source.

Lesson 2 • Emitting Events from API Endpoints

Triggers socket emissions from Express controllers after successful database writes. Keeps REST and WebSocket layers synchronized on every mutation.

Lesson 3 • Socket.IO Server Setup and Namespaces

Attaches Socket.IO to the existing Express HTTP server and defines board-scoped namespaces. Isolates real-time events per board for efficient broadcasting.

Lesson 4 • Presence Indicators and Live Cursors

Shows which users are currently viewing a board using presence events and avatar indicators. Adds collaborative awareness without blocking the main data flow.

Lesson 1 • Logging, Monitoring, and Error Tracking

Integrates structured logging, uptime monitoring, and a frontend error tracker in production. Provides visibility into failures before users report them.

Lesson 2 • Dockerizing the MEAN Stack Application

Writes Dockerfiles for the Angular build and Express server and composes them with MongoDB. Produces reproducible container images for any deployment target.

Lesson 3 • CI/CD Pipeline with GitHub Actions

Automates linting, testing, building, and pushing Docker images on every pull request. Reduces manual deployment steps and catches regressions early.

Lesson 4 • Cloud Deployment and Environment Configuration

Deploys containers to a cloud platform and configures production environment variables. Makes the application publicly accessible with a managed database connection.