React, Angular, Node In-Depth Guide: Beginner to Pro

80h 1m 57s
English
Paid

Course description

If you are planning to start your career as a developer or you just want to improve your programming skills, then this course is right for you. Get all you need to start web development in one course! This resource is the only thing you need in order to start Web Development with Angular, React and Node and during this course you will get confidence and skills required to start your own projects. 

Read more about the course

You will get the right mindset to apply for a developer career and to improve in modern frameworks like Angular, React and Node,

We will start very easily with Angular and React, in which we will create a layout of our application. I will explain to you how to create basic components, services and reusable code. Later we will implement routing and state management in our application.

We will prepare registration and login forms with fully working validation on each input. A user will be able to register and login into the application. A logged in user will experience new features and changes in the user interface.

After the authentication section we will work on functionality to create rental properties.

Furthermore, we will work on a detail page of a rental property in which we will integrate 3rd party Tom Tom API. We will implement a feature to display the location of a rental property on a map.

Next, we will work on a core application functionality to book rental property for certain numbers of nights. We will integrate interesting features to our application, calendar for choosing range of dates, a modal window to confirm bookings and a toast component to display messages.

After the booking section, we will take a look on the rental search functionality. We will search rentals by city.

Later, We will work on the functionality to display user bookings, rentals and received bookings with the option to remove them.

Next we will work on a very interesting feature to update rental properties. On the Rental Update feature you will learn how to create powerful reusable components.

After the update section we will work on an interesting feature for an image upload. We will learn how to upload images to Cloudinary. Before uploading our image to Cloudinary, we will also take care of cropping and processing our image.

There is a much more covered in the lectures I hope you like the application we are going to work on and I hope to see you in the course.

Watch Online

This is a demo lesson (10:00 remaining)

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

View Pricing

Watch Online React, Angular, Node In-Depth Guide: Beginner to Pro

0:00
/
#1: [Optional]: Course Preview

All Course Lessons (403)

#Lesson TitleDurationAccess
1
[Optional]: Course Preview Demo
02:47
2
How to get help
06:30
3
How to start course at any lecture
09:45
4
Section Intro
03:03
5
Setting up the environment
15:02
6
Introduction to Variables
12:43
7
More about variables + Debugging
16:20
8
Functions Scope
19:51
9
Scoping
11:47
10
Const, let, var keywords
13:01
11
Car Refactor
09:40
12
Objects
18:12
13
Return value from function
12:27
14
Classes
14:49
15
Importing + Proto
09:40
16
IF Statements
18:58
17
Arrays
11:29
18
Iterations
19:57
19
Inheritance part 1
18:30
20
Inheritance part 2
12:26
21
Inheritance part 3
21:56
22
forEach, map & filter
19:56
23
Custom iterators
18:25
24
Get user input
15:49
25
Display user info
08:35
26
Switch
07:26
27
Car Storage
17:06
28
Car Manager
13:55
29
Remove car
14:43
30
Arrow functions + "this" context
17:09
31
More about arrow functions
07:12
32
Logical operators
08:19
33
Async code
15:05
34
Promise
20:36
35
Promise in detail
28:20
36
Observables
16:57
37
Custom observables
24:31
38
Unsubscribe from observable
04:34
39
Node Deep Dive
28:15
40
Section Introduction
01:10
41
Project Init
10:23
42
Folder Structure Explanation
14:54
43
Functional Components
20:01
44
Append Child + Functional Components
14:18
45
Counter App Component
16:44
46
Counter App State
13:50
47
Counter App class component
20:04
48
About the Props
10:46
49
Use Effect Hook
11:52
50
Generate color + handling of state
13:37
51
Use Callback hook
08:12
52
Memo
05:09
53
How does it work part 1
25:43
54
How does it work part 2
31:53
55
Section Intro
00:55
56
Bootstrap Framework
14:19
57
Small styling changes + REM units
12:02
58
Styling of navbar
18:09
59
SCSS Stylings
16:21
60
Rental home page
08:27
61
Iterate Rentals
17:06
62
Stylings for rental category
06:09
63
Section Introduction
01:31
64
Naive routing
07:18
65
Naive routing part 2
16:04
66
React router dom
14:19
67
React context store provider
13:46
68
High order component connect
16:31
69
Map state to props function
14:22
70
Redux store
15:27
71
Dispatch actions
16:30
72
Update state
22:22
73
Create rental action
14:04
74
Redux
12:48
75
Rental detail
12:32
76
Fetch rental
18:57
77
Helper functions
06:40
78
Font Awesome
12:02
79
Relative path to src
04:24
80
Section Outro
00:50
81
Section Introduction
00:56
82
Axios + Proxy
20:24
83
Promise support
14:26
84
Redux Thunk
17:14
85
Reducer refactor
12:48
86
Rental detail refactor
06:27
87
Section Intro
01:30
88
Login and Register page
04:16
89
Get values from login form
12:44
90
"Use Form" package on Login Form
10:25
91
Login Form Validation
09:49
92
Register form
10:19
93
Custom Validators
12:12
94
Error message component
08:26
95
Custom error message component
07:09
96
Section outro
00:43
97
Section Intro
01:37
98
Register user
12:42
99
Handle register errors
11:13
100
Login user
08:43
101
Auth Provider
20:36
102
Decode token + dispatch
12:06
103
Auth Reducer
10:45
104
Structural changes + "use Auth" hook
07:46
105
Check if user is authenticated
15:06
106
Logout + Secret page
08:01
107
Auth route
18:37
108
Guest route
08:12
109
Login message
03:43
110
Section Intro
00:54
111
Github introduction
18:37
112
Push changes to github
11:04
113
Branching
19:10
114
Section Intro
01:22
115
Map Component
16:17
116
Map Provider
09:35
117
Send geolocation request
16:42
118
Center map
19:40
119
Display markers on the map
11:33
120
Popup message on the map
07:41
121
Cache location
17:40
122
Section Intro
01:21
123
Controller to create rental
14:46
124
Fake DB Changes
04:05
125
Rental "new" page
07:02
126
Send request to create rental
14:03
127
Token interceptor
14:16
128
Refactor actions
05:46
129
Section Outro
00:43
130
Section Intro
01:46
131
Booking component
04:24
132
Date range picker component
12:23
133
Get and display date
17:23
134
Modal component
14:04
135
Modal improvements
13:51
136
Get booking nightly price
20:19
137
Create booking
14:08
138
Handle booked out dates
14:58
139
UX Improvements
16:04
140
Check if users is authorised to create booking
06:38
141
Display rental owner in detail page
06:41
142
Section Introduction
01:37
143
Handle search on server
07:46
144
Rental search page
06:59
145
New search component
08:54
146
Handle repeated search
08:43
147
Reusable reducer
19:42
148
Section Outro
00:37
149
149 - 11-react-rental-manage-Intro
01:31
150
Section Intro
01:31
151
Manage pages
04:40
152
Manage reducer
08:06
153
Display received rentals
08:14
154
Manage received bookings
25:04
155
Delete rental preparation
08:40
156
Delete rental final steps
15:17
157
Handle errors in delete rental
11:42
158
Delete booking
18:10
159
Make actions reusable
08:04
160
Section Intro
02:26
161
Update Rental on Server
13:28
162
Verify rental owner on Server
07:36
163
Rental edit page
07:30
164
Rental Guard
15:52
165
Editable Input Component
14:38
166
Editable stylings
05:26
167
Handle update of input
09:01
168
Update rental success
17:30
169
Display toast message in case of error
11:51
170
Transform view of input
08:32
171
Inline editable component
07:32
172
Editable textarea
09:54
173
Editable select
11:47
174
More reusability of editable component
12:12
175
UX Improvements
08:34
176
Fix map
07:16
177
Section Outro
00:33
178
Section Intro
01:44
179
Fix image display
02:31
180
File loader component
07:46
181
File loader styling
07:16
182
File Reader
13:07
183
Image styling
03:13
184
Image upload functionality
10:58
185
Handle image status
12:42
186
Cancel image
08:09
187
Spinner Component
08:02
188
Create rental with image
10:25
189
Image cropper component
16:12
190
File loader refactor
12:30
191
Get cropped area in base64
16:57
192
Uploading of cropped area
17:08
193
Increase quality of image
17:13
194
193 - 136-Editable-Image-Component
16:32
195
Editable image component
16:32
196
Editable image stylings
13:29
197
Update server response in Update
02:49
198
Uploading polishing
14:23
199
Production server updates
20:33
200
Setting up production variables
12:35
201
Deployment to Heroku
13:54
202
Outro
00:34
203
Section Intro
01:35
204
Project Initialization
14:12
205
Explaining folder structure
17:34
206
App Component
14:49
207
Decorators
13:35
208
Header Component
10:56
209
Small Counter App
11:57
210
Event Handlers
17:09
211
Bootstrap Framework
09:18
212
Improving header component
17:17
213
Define colors in SCSS
15:01
214
Routing
17:12
215
Rental Module
13:11
216
Get routing params
09:26
217
How does it work
37:10
218
Section Introduction
02:52
219
Rental Array
21:15
220
Iterate Rentals
05:37
221
Rental Service
17:47
222
Generic Interface
17:17
223
Rental Item stylings
16:47
224
Rental card component
14:41
225
Output decorator
11:22
226
Two way data binding
14:24
227
Get rental by Id
14:19
228
Stylings of rental detail page
11:50
229
Pipes
09:24
230
Custom pipe
17:13
231
Attribute directives
16:29
232
Custom NG IF Directive
18:03
233
Custom NG FOR Directive
12:08
234
Login, Register page + Font Awesome
12:21
235
Section Outro
01:49
236
Section Intro
01:48
237
Http Module
08:32
238
Proxy Configuration
09:34
239
Login and Register layout
10:31
240
Template forms + get data from form
19:51
241
Template form validation
17:40
242
Register form handle submit
14:49
243
Reactive forms intro
14:17
244
Reactive forms validation
11:37
245
Custom reactive validator
14:38
246
Custom Directive validator
16:08
247
Same as validator
26:37
248
Providers
16:51
249
Section outro
00:46
250
Section intro
02:39
251
Register User
11:57
252
Handle register errors
12:38
253
Function to handle error
14:55
254
Send message from register
15:20
255
Login functionality
17:52
256
Save JWT
17:06
257
Display username + expiration
13:15
258
Display menu when authenticated
12:47
259
Logout
09:51
260
Auth guard intro
15:27
261
Finishing auth guard
13:22
262
Guest guard
06:20
263
Redirect when cannot visit page
04:33
264
Section introduction
00:54
265
Github introduction
22:30
266
Pushing changes to github
24:11
267
Branching
22:15
268
Section Introduction
01:57
269
Init Map Module
10:36
270
Display map
17:20
271
Search query
16:17
272
Center map on location
13:43
273
Display marker
10:34
274
Handle error- display popup
14:42
275
Cleaning map component
12:32
276
Caching location
21:18
277
Section Intro
02:01
278
Rental create on server
14:46
279
Changes in fake DB
04:05
280
Rental "new" page
11:33
281
Get data from rental form
12:48
282
UX Fixes
07:24
283
Send request to create rental
17:29
284
Token interceptor
19:18
285
TomTom url interceptor
04:47
286
Section Outro
00:36
287
Section Intro
01:56
288
Booking component
10:56
289
Datepicker + styles
20:00
290
Booking model
15:38
291
Get nightly price
13:17
292
Confirmation modal
11:42
293
Time service
17:19
294
Get booking UTC time
15:59
295
Creating booking
17:30
296
UX Improvements
09:14
297
Get range of dates
18:02
298
Block dates in calendar
15:11
299
Toastr
14:03
300
Section Intro
01:34
301
Search city on server
07:46
302
Rentals home page
09:36
303
Get rentals by city
09:36
304
Working Search input
09:12
305
Section outro
00:40
306
Section Intro
02:05
307
Manage Module
10:19
308
Handle all and received bookings
14:23
309
List rentals for auth user
12:20
310
Delete rental preparation
09:47
311
Delete rental complete
10:43
312
Booking listing template + Fetch data
15:31
313
More booking listing
21:30
314
Delete booking done
12:44
315
Section Intro
02:37
316
Update Rental on Server
13:36
317
Verify rental owner on Server
07:36
318
Rental Update Page
08:12
319
Rental Guard
14:37
320
Editable Input
05:45
321
Editable Input Data binding
10:24
322
Control input state
09:53
323
Set origin value of input
05:00
324
Emit entity value
14:06
325
Updating rental
08:49
326
Input Notifier
07:44
327
More input types
15:13
328
Small fixes on inputs
14:09
329
Editable textarea
15:06
330
Editable select
16:00
331
Handle Map Update
20:52
332
UX Improvements - keydown events
05:20
333
Section Outro
00:39
334
Section Intro
01:35
335
Fix Images
10:37
336
Image upload component
11:11
337
File Reader + Image Preview
14:59
338
Upload image service
15:42
339
UI Spinner
17:25
340
Emit ID of image
12:04
341
Image cropper component
17:35
342
Fixing cropper component
18:41
343
Editable image component
16:22
344
Editable image styling improvements
07:58
345
Update server response in Update
02:49
346
Editable image done
13:39
347
TS Lint Warnings
30:52
348
Node Server Production
13:42
349
Heroku app + prod variables
14:36
350
App deployment
16:42
351
Final Testing
16:52
352
Section Outro
00:37
353
Section Intro
02:42
354
Server Setup
08:40
355
Endpoints
17:30
356
Post Endpoint
15:40
357
Patch and Delete endpoints
08:50
358
Routes Folder
06:39
359
Controllers Folder
06:03
360
DB Setup
13:01
361
Rental Model
15:25
362
Get data from DB
13:17
363
Add rentals to DB
11:18
364
Fake DB
14:57
365
Rental model function
11:07
366
Section Outro
00:53
367
Section Intro
01:18
368
User Routes Controler
05:43
369
User Model
08:55
370
Register User
22:23
371
Hashing passwords
14:58
372
Login functionality
17:22
373
JWT Intro
14:38
374
Middlewares
14:11
375
Auth middleware
25:18
376
Handle JWT Errors
12:01
377
Handle Mongo Error
24:47
378
Handle API Error
13:20
379
Fake DB Update
09:27
380
Section Outro
00:54
381
Section Intro
01:18
382
Booking create
11:18
383
Check if user is rental owner
17:55
384
Create booking
15:34
385
Check booking validity
28:18
386
Structure changes to booking validation
10:40
387
Section Outro
00:38
388
Section Intro
01:18
389
Get user bookings
14:20
390
Get received bookings
10:24
391
Delete booking endpoint
20:19
392
Delete rental endpoint
15:17
393
Section Outro
00:43
394
Section Intro
01:26
395
Image Upload route
10:57
396
Multer init
27:23
397
From buffer to string
11:33
398
Cloudinary
14:19
399
Image Model
11:17
400
Fake DB Update
13:02
401
Populate images
05:40
402
Section Outro
00:50
403
Course Outro
00:28

Unlock unlimited learning

Get instant access to all 402 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

React Js A-Z With Laravel - For Beginner to Advanced Level

React Js A-Z With Laravel - For Beginner to Advanced Level

Sources: udemy
This React Js A-Z With Laravel Course will help you to become a Full Stack Web Developer. React has rapidly become one of the most powerful tools for building W
68 hours 1 minute 33 seconds
Make 20 React Apps

Make 20 React Apps

Sources: Chris Sev
Learn React best practices and concepts that you can use on the job, in side projects, and in any React app.
12 hours 20 minutes 3 seconds
Advanced Angular Forms

Advanced Angular Forms

Sources: Dmytro Mezhenskyi (decodedfrontend.io)
Deep Dive in Angular Forms. The course goes way beyond the official documentation and shows you how the Angular forms work internally, so You understand why things work as they...
13 hours 38 minutes 40 seconds
Serverless Framework Bootcamp: Node.js, AWS & Microservices

Serverless Framework Bootcamp: Node.js, AWS & Microservices

Sources: udemy
Ever felt like you would like to build a back-end application that can handle millions of users, but you were terrified by the idea of managing (or learning how
5 hours 24 minutes 21 seconds
Microservices with Node JS and React

Microservices with Node JS and React

Sources: udemy, Stephen Grider
Event-Based Architecture? Covered! Server side rendering with React? Yep. Scalable, production-ready code? Its here! Microservices are the number one solution for building and ...
54 hours 13 minutes 19 seconds