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

80h 1m 57s
English
Paid
May 8, 2024

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. 

More

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 React, Angular, Node In-Depth Guide: Beginner to Pro

Join premium to watch
Go to premium
# Title Duration
1 [Optional]: Course Preview 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

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

Namaste Node.js

Namaste Node.jsAkshay Saini (NamasteDev.com)

Duration 35 hours 39 minutes 27 seconds
MERN Stack Web Development with Ultimate Authentication
The Ultimate React Course 2023: React, Redux & More

The Ultimate React Course 2023: React, Redux & Moreudemy

Duration 67 hours 14 minutes 41 seconds
Project React. Build a complex React project as a total beginner
MobX In Depth With React(Hooks+TypeScript)

MobX In Depth With React(Hooks+TypeScript)udemy

Duration 2 hours 25 minutes 54 seconds
Full Stack: Angular and Spring Boot

Full Stack: Angular and Spring Bootudemy

Duration 25 hours 49 minutes 54 seconds
Accelerating Through Angular 2

Accelerating Through Angular 2codeschool

Duration 1 hour 4 minutes 35 seconds
Mastering REST APIs in Node.js: Zero To Hero

Mastering REST APIs in Node.js: Zero To Heroudemy

Duration 8 hours 31 minutes 29 seconds