Build Fullstack Trello clone: WebSocket, Socket IO
Course description
In this course we will build a Trello clone API using 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.
Read more about the course
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 this (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.
Watch Online
All Course Lessons (47)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | What technologies do we use? Demo | 03:34 | |
| 2 | Downloadable resources | 00:41 | |
| 3 | Installing Node & Angular | 08:10 | |
| 4 | Configuring server | 05:06 | |
| 5 | Installing database | 07:28 | |
| 6 | Do you use a good editor? | 02:20 | |
| 7 | Setting up socket with Express | 11:54 | |
| 8 | Creating Mongoose user model | 22:21 | |
| 9 | Adding registration | 20:11 | |
| 10 | Implementing login | 11:05 | |
| 11 | Creating auth middleware | 15:41 | |
| 12 | Creating auth module | 19:00 | |
| 13 | Register page - Markup + Form | 12:56 | |
| 14 | Register page - service + validation | 11:07 | |
| 15 | Login page | 10:01 | |
| 16 | Home page | 08:14 | |
| 17 | Auth interceptor | 08:06 | |
| 18 | Auth guard | 13:53 | |
| 19 | Gettings boards | 14:16 | |
| 20 | Frontend for gettings boards | 10:01 | |
| 21 | Inline form | 15:29 | |
| 22 | Implementing creating a board | 19:20 | |
| 23 | Adding Top bar and logout | 07:39 | |
| 24 | Creating board module | 08:59 | |
| 25 | Getting a single board | 02:48 | |
| 26 | Adding board stream | 06:27 | |
| 27 | Creating socket service | 09:56 | |
| 28 | Joining and leaving board | 17:20 | |
| 29 | Authentication in socket.io | 11:28 | |
| 30 | Getting columns | 09:15 | |
| 31 | Create column with websockets | 12:15 | |
| 32 | Getting columns | 11:38 | |
| 33 | Create column form | 15:58 | |
| 34 | Creating a basic task | 09:36 | |
| 35 | Getting tasks | 11:43 | |
| 36 | Create task form | 08:25 | |
| 37 | Update board name | 15:28 | |
| 38 | Delete board | 08:19 | |
| 39 | Delete column | 10:10 | |
| 40 | Update column | 08:55 | |
| 41 | Unsubscribe | 06:55 | |
| 42 | Task module and basic component | 15:55 | |
| 43 | Get task and columns | 13:58 | |
| 44 | Update task | 14:43 | |
| 45 | Delete task | 07:31 | |
| 46 | Deployment | 31:30 | |
| 47 | Homework | 02:03 |
Unlock unlimited learning
Get instant access to all 46 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
Angular - The Complete Guide (2023 Edition)
Advanced Angular Forms
React, Angular, Node In-Depth Guide: Beginner to Pro
Complete Angular Developer in 2025 Zero to Mastery
