Skip to main content

Build Fullstack Trello clone: WebSocket, Socket IO

8h 49m 48s
English
Paid

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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 47 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: What technologies do we use?

All Course Lessons (47)

#Lesson TitleDurationAccess
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 subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Discord Clone - Learn MERN Stack with WebRTC and SocketIO

Discord Clone - Learn MERN Stack with WebRTC and SocketIO

Sources: udemy
Learn how to connect MERN Stack with WebRTC and SocketIO. We will go through all of the steps to create application with group call functionality. We will crea
19 hours 29 minutes 29 seconds
Object-oriented Programming in JavaScript

Object-oriented Programming in JavaScript

Sources: codewithmosh (Mosh Hamedani), udemy
Object-oriented programming (OOP) is a popular programming paradigm or style of programming. It’s been around since ‘70s, but unlike tools and frameworks that c
3 hours 53 minutes 46 seconds
Angular Pro

Angular Pro

Sources: ultimatecourses.com
Unlock Angular’s potential. All the advanced features, RxJS, Reactive Forms, Modular Architecture, TypeScript concepts, State Management, Unit Testing and a final project to cem...
16 hours 41 minutes 46 seconds
Become a WordPress Developer: Unlocking Power With Code

Become a WordPress Developer: Unlocking Power With Code

Sources: udemy
Learn PHP, JavaScript, WordPress theming & the WP REST API to Create Custom & Interactive WordPress Websites. Unlock the full power of WordPress and go beyond "just a blog platf...
41 hours 45 minutes 55 seconds
Create a Personal Portfolio using Angular 2 & Behance

Create a Personal Portfolio using Angular 2 & Behance

Sources: coursetro
The project you're going to learn how to build is based on a personal portfolio site, powered by Angular 2 which grabs projects in real-time with the Behance API. First, we st...
2 hours 8 minutes 10 seconds