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

Beginner to Advance Web Developer Guide. Master Angular (Angular 8+), React + Redux (React 16.12+) & Node with Mongo DB!

4.55 (251 reviews)
Udemy
platform
English
language
Web Development
category
2,350
students
79.5 hours
content
Sep 2020
last update
$74.99
regular price

What you will learn

Develop Real-world web applications with React, Angular and Node

Understand the processes and architecture of Angular, React and Node

Create own web applications in most demanded frameworks on the market

Establish yourself in field of the exciting Angular, React and Node web development environment

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. 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.


------------- Brief Curriculum - Listed Important Features You Will Learn -------------

JS Basics

  • [JS, Node] - Intro To Basics (Classes, Variables, Callbacks, Arrow Functions, Inheritance, Async, Promises, Observables) 

React Section

  • [React] - Intro To React (Components, JSX, Redux, State, Props, Bootstrap, Life Cycle Functions, Link To, Render)

  • [React] - Networking (Proxy, Axios, Get data from server)

  • [React] - Authentication (React hook forms, Validation, JWT, Protected Pages + Guards, Axios Interceptor)

  • [React] - Github (Repository creation, branches, pushing changes)

  • [React] - Rental Map (HOC, Composition, Map Component, 3rd Party Service, TomTom API, Caching, Geolocation)

  • [React] - Create Rental Feature

  • [React] - Bookings (Date Range Picker, Book a rental property, Modals, Toast Messages)

  • [React] - Search Rentals by City Feature

  • [React] - Manage Section - Delete Rentals and Bookings

  • [React] - Update Feature (Editable Components, Reusability, Composition & Inheritance )

  • [React] - Crop and Upload Image Feature (Cloudinary, Learn how to send an image in request )

  • [React] - Deployment (Heroku, Production Server Setup)

Angular Section

  • [Angular] - Intro To Angular (Components, Services, Modules, Routing, Bootstrap, Life Cycle Functions, Passing Data, Links, Types, Observables)

  • [Angular] - Networking (Proxy, Axios, Get data from server)

  • [Angular] - Authentication (Reactive Forms, Template Forms, Validation, JWT, Guards, Interceptor)

  • [Angular] - Github (Repository creation, branches, pushing changes)

  • [Angular] - Rental Map (Pipe, Font Awesome, Map Component, 3rd Party Service, Geolocation, TomTom API, Caching)

  • [Angular] - Create Rental Feature

  • [Angular] - Bookings (Date Range Picker, Book a rental property, Modals, Toast Messages)

  • [Angular] - Search Rentals by City Feature

  • [Angular] - Manage Section 

  • [Angular] - Update Feature (Editable Components, Reusability, Inheritance, Subject )

  • [Angular] - Crop and Upload Image Feature (Cloudinary, Learn how to send an image in request )

  • [Angular] - Deployment (Heroku, Production Server Setup)

Node Server Section

  • [Node] - Intro to Node (Express Framework, Server Creation, Postman, MongoDB, Routing, Handle Errors)

  • [Node] - Authentication (JWT, Encryption, Middleware)

  • [Node] - Bookings (Book a rental property, Server Validation)

  • [Node] - Manage Feature (Delete a rental property, Delete a booking)

  • [Node] - Image Upload (Cloudinary, Multer, DataURI, Format transformations)


Get all you need to start web development in one course.

You will pay once and you will get a lifetime access to this up-to-date course.

Do not forget that you are protected by 1 month money-back guarantee.  

Content

Introduction

[Optional]: Course Preview
How to get help
How to start course at any lecture

Programming Basics in Node

Section Intro
Setting up the environment
Introduction to Variables
More about variables + Debugging
Functions Scope
Scoping
Const, let, var keywords
Car Refactor
Objects
Return value from function
Classes
Importing + Proto
IF Statements
Arrays
Iterations
Inheritance part 1
Inheritance part 2
Inheritance part 3
forEach, map & filter
Custom iterators
Get user input
Display user info
Switch
Car Storage
Car Manager
Remove car
Arrow functions + "this" context
More about arrow functions
Logical operators
Async code
Promise
Promise in detail
Observables
Custom observables
Unsubscribe from observable
Node Deep Dive

React Basics [React] ---------------------

Section Introduction
Project Init
Folder Structure Explanation
Functional Components
Append Child + Functional Components
Counter App Component
Counter App State
Counter App class component
About the Props
Use Effect Hook
Generate color + handling of state
Use Callback hook
Memo

Optional: React Deep Dive [React]

How does it work part 1
How does it work part 2

Application getting shape [React]

Section Intro
Bootstrap Framework
Small styling changes + REM units
Styling of navbar
SCSS Stylings
Rental home page
Iterate Rentals
Stylings for rental category

Routing + State [React]

Section Introduction
Naive routing
Naive routing part 2
React router dom
React context store provider
High order component connect
Map state to props function
Redux store
Dispatch actions
Update state
Create rental action
Redux
Rental detail
Fetch rental
Helper functions
Font Awesome
Relative path to src
Section Outro

Networking [React]

Section Introduction
Axios + Proxy
Promise support
Redux Thunk
Reducer refactor
Rental detail refactor

Forms [React]

Section Intro
Login and Register page
Get values from login form
"Use Form" package on Login Form
Login Form Validation
Register form
Custom Validators
Error message component
Custom error message component
Section outro

Authentication on Client [React]

Section Intro
Register user
Handle register errors
Login user
Auth Provider
Decode token + dispatch
Structural changes + "use Auth" hook
Check if user is authenticated
Logout + Secret page
Auth route
Guest route
Login message

Github [React]

Section Intro
Github introduction
Push changes to github
Branching

Geolocation [React]

Section Intro
Map Component
Map Provider
Send geolocation request
Center map
Display markers on the map
Popup message on the map
Cache location

Rental Create [React]

Section Intro
Controller to create rental
Fake DB Changes
Rental "new" page
Send request to create rental
Token interceptor
Refactor actions
Section Outro

Booking Feature [React]

Section Intro
Booking component
Date range picker component
Get and display date
Modal component
Modal improvements
Get booking nightly price
Create booking
Handle booked out dates
UX Improvements
Check if users is authorised to create booking
Display rental owner in detail page

Search Feature [React]

Section Introduction
Handle search on server
Rental search page
New search component
Handle repeated search
Reusable reducer
Section Outro

Manage feature [React]

Section Intro
Manage pages
Manage reducer
Display received rentals
Manage received bookings
Delete rental preparation
Delete rental final steps
Handle errors in delete rental
Delete booking
Make actions reusable

Rental Update [React]

Section Intro
Update Rental on Server
Verify rental owner on Server
Rental edit page
Rental Guard
Editable Input Component
Editable stylings
Handle update of input
Update rental success
Display toast message in case of error
Transform view of input
Inline editable component
Editable textarea
Editable select
More reusability of editable component
UX Improvements
Fix map
Section Outro

Image Upload [React]

Section Intro
Fix image display
File loader component
File loader styling
File Reader
Image styling
Image upload functionality
Handle image status
Cancel image
Spinner Component
Create rental with image
Image cropper component
File loader refactor
Get cropped area in base64
Uploading of cropped area
Increase quality of image
Editable image component
Editable image stylings
Update server response in Update
Uploading polishing

Deployment - React End ----------------

Production server updates
Setting up production variables
Deployment to Heroku
Outro

Angular Basics [Angular] -------------------

Section Intro
Project Initialization
Explaining folder structure
App Component
Decorators
Header Component
Small Counter App
Event Handlers
Bootstrap Framework
Improving header component
Define colors in SCSS
Routing
Rental Module
Get routing params

Optional: Web Apps Deep Dive [Angular]

How does it work

Angular Core Concepts [Angular]

Section Introduction
Rental Array
Iterate Rentals
Rental Service
Generic Interface
Rental Item stylings
Rental card component
Output decorator
Two way data binding
Get rental by Id
Stylings of rental detail page
Pipes
Custom pipe
Attribute directives
Custom NG IF Directive
Custom NG FOR Directive
Login, Register page + Font Awesome
Section Outro

Networking [Angular]

Section Intro
Http Module
Proxy Configuration

Forms [Angular]

Login and Register layout
Template forms + get data from form
Template form validation
Register form handle submit
Reactive forms intro
Reactive forms validation
Custom reactive validator
Custom Directive validator
Same as validator
Providers
Section outro

Authentication on Client [Angular]

Section intro
Register User
Handle register errors
Function to handle error
Send message from register
Login functionality
Save JWT
Display username + expiration
Display menu when authenticated
Logout
Auth guard intro
Finishing auth guard
Guest guard
Redirect when cannot visit page

Github [Angular]

Section introduction
Github introduction
Pushing changes to github
Branching

Geolocation [Angular]

Section Introduction
Init Map Module
Display map
Search query
Center map on location
Display marker
Handle error- display popup
Cleaning map component
Caching location

Rental Create [Angular]

Section Intro
Rental create on server
Changes in fake DB
Rental "new" page
Get data from rental form
UX Fixes
Send request to create rental
Token interceptor
TomTom url interceptor
Section Outro

Booking Feature [Angular]

Section Intro
Booking component
Datepicker + styles
Booking model
Get nightly price
Confirmation modal
Time service
Get booking UTC time
Creating booking
UX Improvements
Get range of dates
Block dates in calendar
Toastr

Search Feature [Angular]

Section Intro
Search city on server
Rentals home page
Get rentals by city
Working Search input
Section outro

Manage Feature [Angular]

Section Intro
Manage Module
Handle all and received bookings
List rentals for auth user
Delete rental preparation
Delete rental complete
Booking listing template + Fetch data
More booking listing
Delete booking done

Rental Update [Angular]

Section Intro
Update Rental on Server
Verify rental owner on Server
Rental Update Page
Rental Guard
Editable Input
Editable Input Data binding
Control input state
Set origin value of input
Emit entity value
Updating rental
Input Notifier
More input types
Small fixes on inputs
Editable textarea
Editable select
Handle Map Update
UX Improvements - keydown events
Section Outro

Image Upload [Angular]

Section Intro
Fix Images
Image upload component
File Reader + Image Preview
Upload image service
UI Spinner
Emit ID of image
Image cropper component
Fixing cropper component
Editable image component
Editable image styling improvements
Update server response in Update
Editable image done

Deployment Angular Ends ----------------

TS Lint Warnings
Node Server Production
Heroku app + prod variables
App deployment
Final Testing
Section Outro

Node Api Server [Node Server] ----------------

Section Intro
Server Setup
Endpoints
Post Endpoint
Patch and Delete endpoints
Routes Folder
Controllers Folder
DB Setup
Rental Model
Get data from DB
Add rentals to DB
Fake DB
Rental model function
Section Outro

Authentication on Server [Node Server]

Section Intro
User Routes Controler
User Model
Register User
Hashing passwords
Login functionality
JWT Intro
Middlewares
Auth middleware
Handle JWT Errors
Handle Mongo Error
Handle API Error
Fake DB Update
Section Outro

Booking Feature [Node Server]

Section Intro
Booking create
Check if user is rental owner
Create booking
Check booking validity
Structure changes to booking validation
Section Outro

Manage Feature [Node Server]

Section Intro
Get user bookings
Get received bookings
Delete booking endpoint
Delete rental endpoint
Section Outro

Image Upload [Node Server]

Section Intro
Image Upload route
Multer init
From buffer to string
Cloudinary
Image Model
Fake DB Update
Populate images
Section Outro

Course Ending

Course Outro

Screenshots

React, Angular, Node In-Depth Guide: Beginner to Pro (2020) - Screenshot_01React, Angular, Node In-Depth Guide: Beginner to Pro (2020) - Screenshot_02React, Angular, Node In-Depth Guide: Beginner to Pro (2020) - Screenshot_03React, Angular, Node In-Depth Guide: Beginner to Pro (2020) - Screenshot_04

Reviews

Dushyant
November 24, 2021
This course is one of a hidden gem for booking system. If any one is searching for hotel booking system in udemy, this course does not pop up as the title does not include the term hotel booking system. I had previously bought Filip courses, so i knew his courses are good, so one day i was going through his courses and found this gem. I had to make some changes in the course code as my requirement was little else and i got stuck. I asked for his help and he adjusted his course code, so that my requirement can be met. He is amazing, wonderful and an awesome Udemy instructor. By following this course, a beautiful hotel website with all necessary functions can surely be made. I recommend this course and will gladly buy his courses again. Thank You.
Gobinath
April 8, 2021
Slow and well-craft most instructor skip scss by giving you their css file but he make you code from the ground loved it.
Amal
February 8, 2021
Hard to understand words sometimes; clear enunciation would be appreciated. Need better organization for the lectures; make sure everything works before you record and have pre-written code in front of you to avoid mistakes.
Adeitan
November 1, 2020
Really love the course. So many concepts thought in this course that I've not been able to find anywhere else. Great course!
Doan
October 4, 2020
Filip takes the time to show you the code, walk through the code and then explain what is happening step by step. This course is perfect for the React beginner through to intermediate (through to people who want to implement certain features, like Image upload or geolocation). To top it off, Filip is also a cool guy (I gathered this from over 30 hours of listening to his voice lol). Easy 5 stars- get this course if you want to get started on your new project!
Alexis
September 22, 2020
Excellent cours, pour comprendre les différences entre React et Angular, en maitriser de bonnes bases, et savoir utiliser Node js !
Robert
July 6, 2020
I came in knowing different language syntax. Learning how flexible Javascript is to do multiple functions in a single function is very interesting.
Popescu
July 1, 2020
Great learning course if you are interested in React and Angular, great interaction with forms, authentification, backend etc. The end-result is you can build a modern and great looking app!!
Don
May 22, 2020
I dept learning! I'm just excited to learn building new fullstack application which I can use it later on. thanks
Sadek
May 19, 2020
Best MEAN stack quality/price course ever, it's more than 4-5 courses in one, and anyone can really start developing with it, i've tried many udemy courses and that one was by far the best, Filip answer questions so fast too, i am satisfied :D
Robert
May 11, 2020
This course contains huge amount of information about JavaScript frameworks: React, Node and Angular. Lecturer's accent is understandable. Course presents practical approach to programming.
Sven
May 9, 2020
Everything worked pretty well... just a few inevitable differences between environments. I'm having to adjust to the accent, but he's pretty clear.
Alfonso
April 8, 2020
This course is awesome! really useful for my job. Im a backend developer but I got to fix some react issues of the app. Really useful information!
Bijay
April 1, 2020
This is an excellent web-development course and at the end there is a beautiful final product. The course is obviously long but with the approach of development from Angular as well as React side, you will learn two course contents in a single course. This course goes from simple approach to very advanced techniques used in web development, therefore I would recommend everyone to familiarize themselves with basic JavaScript first. The way Filip put is 100% effort for this course is very amazing and I really appreciate it. Thank you very much!
Mila
March 28, 2020
Excellent course so far. Right to the point, easy to understand and very useful! Valuable app to help learn and understand NodeJS, Angular, React and MongoDB. Would highly recommend to others!

Coupons

DateDiscountStatus
12/10/202093% OFF
expired

Charts

Price

React, Angular, Node In-Depth Guide: Beginner to Pro (2020) - Price chart

Rating

React, Angular, Node In-Depth Guide: Beginner to Pro (2020) - Ratings chart

Enrollment distribution

React, Angular, Node In-Depth Guide: Beginner to Pro (2020) - Distribution chart
2862260
udemy ID
3/10/2020
course created date
3/31/2020
course indexed date
Bot
course submited by