MEAN Fullstack Trello clone: WebSocket, Socket IO

Name: MEAN Fullstack Trello clone: WebSocket, Socket IO
Rating: 4.4 (151 reviews)

Learn MEAN Stack, WebSocket, Socket IO, Angular, Typescript, NodeJS, Express, Mongodb and Deployment

Created byOleksandr Kocherhin

Last updated 2/2026

English

What you'll learn

MEAN fullstack project with Angular, Express, Node, Typescript, Socket io, MongoDB
Write high quality code
Create reusable modules and services
Write perfect architecture and dry code

Course content

8 sections • 52 lectures • 8h 49m total length

What is this section about?0:05
MEAN Stack. What technologies do we use?3:33
Downloadable resources0:40
Access the attached archive under the video for each lecture’s source code. Post questions in the video comments to get help with compiling or code issues.
Installing Node & Angular8:09
Install node and Angular CLI, set up a two-folder mean project with client and server, generate an Angular app in the client folder, and run ng serve on localhost:4200.
Configuring NodeJS server5:05
Installing Mongodb Database7:27
Do you use a good editor? VsCode is what I recommend2:19
VS Code is recommended for MEAN development, offering built-in TypeScript support and auto inputs and autocomplete to write Angular components efficiently.

What is this section about?0:07
Setting up Web Sockets in NodeJS11:53
Install express, mongoose, and socket IO, configure an http server with express and socket IO, and ensure MongoDB connects before starting the API on port 4001 for production ready application.
Creating Mongoose user model22:20
Create mongoose user model with TypeScript interface and document, hash passwords before save with bcrypt, enforce email and username validations, and add a password validation method for login.
Adding registration in NodeJS20:10
Implementing login in NodeJS11:04
Creating auth middleware in NodeJS15:40
Creating auth module in Angular18:59
Register page in Angular - Markup + Form12:55
Register page in Angular - service + validation11:06
Login page in Angular10:00
Home page in Angular8:13
Create a dedicated home page module in Angular for anonymous users, focusing on markup only, with header, hero, and content blocks including images and login or register links.
Auth interceptor in Angular8:05
Implement a global Angular http interceptor that reads the token from local storage, clones requests, and appends an authorization header to all calls; fix bearer formatting to authenticate the user.
Auth guard in Angular13:52

What is this section about?0:05
Creating board module8:58
Getting a single board2:47
Adding board stream6:26
Create a board service with a board stream that shares boards, columns, and tasks across components using a BehaviorSubject and a setBoard method.
Creating socket service9:55
Joining and leaving board17:19
Authentication in socket.io11:27
Getting columns9:14
Create column with websockets12:14
Create a column via websockets with socket.io, using start, success, and failure events, and broadcast the saved column to all clients in the board room.
Getting columns on the client11:37
Create column form15:57
Creating a basic task9:35
Getting tasks11:42
Create task form8:24

Requirements

A computer on which you can install software (Windows, MacOS, or Linux)
Javascript knowledge is required

Description

In this course we will build a Trello clone API using MEAN Stack: Angular, Typescript, NodeJS, Express, MongoDB and Socket IO . This course is fully focused on fast and deep dive into creation of fullstack application with this tools. We will start from scratch and step by step you will get close to finished real application. You will deeply understand how to structure your application, build reusable and understandable modules and services and split code into smaller chunks of code. We will write code together in efficient way to make it pure and avoid data complexity. We will do real time communication by implementing WebSocket with Socket IO.

Our code will be written with Typescript on the backend and on the client.

We will deploy our application to the real production server at the end of the course.

For each lesson you'll get source code of the lesson, so it's easy to see the progress and get a working app on any lesson you want.

What you will learn in this course:

Structure and configure project
Write high quality code with Typescript on real project
Create reusable modules, controllers and services
Implementing authentication both in http and in websockets
Deeply understand Angular & Express design patterns

No prior knowledge except of Javascript is needed (because I will teach you everything from basics) but if you have experience with any of Mean stack (Angular/Express/Typescript/MongoDB/Socket io) it will be easier for you to go through this course.

If you are feeling like you learned web but you still still missing knowledge of how to build your own real application this course is what you need.

Who this course is for:

This course is for you if you want to develop a real fullstack project from beginning to the end
This course is for everyone who is interested in learning development with Angular, Typescript, Socket IO
This course is for you if you want to improve you knowledge of web development

MEAN Fullstack Trello clone: WebSocket, Socket IO

What you'll learn

Explore related topics

Course content

Preparing tools7 lectures • 27min

Authentication13 lectures • 2hr 44min

Boards page6 lectures • 1hr 7min

Board page14 lectures • 2hr 16min

Board Improvements5 lectures • 50min

Task Modal4 lectures • 52min

Deployment1 lecture • 31min

What's next?2 lectures • 2min

Requirements

Description

Who this course is for: