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