400
Lectures
79
Hours
Watch Intro Video

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.

Requirements

  • No Angular, React and Node previous knowledge is required!

  • Fundamentals in HTML and CSS, but isn't must have

Course Curriculum

  • 1

    Introduction

  • 2

    Programming Basics in Node

    • Section Introduction

      FREE PREVIEW

    • Setting up the environment

    • Introduction to variables

    • More about variables and debugging

    • Functions scope

    • Scoping

    • Const, var, let keywords

    • Car refactor

    • Objects

    • Return value from function

    • Classes

    • Importing and proto

    • If statements

    • Arrays

    • Iterations

    • Inheritance part 1

    • Inheritance part 2

    • Inheritance part 3

    • forEach, map and filter

    • Custom iterators

    • Get user input

    • Display user info

    • Switch

    • Car storage

    • Car manager

    • Remove car

    • Arrow functions and this context

    • More about arrow functions

    • Logical operators

    • Async code

    • Promise

    • Promise in detail

    • Observables

    • Custom observables

    • Unsubscribe from observable

    • Node deep dive
  • 3

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

    • Section Introduction

      FREE PREVIEW

    • Project Init

    • Folder structure explanation

    • Functional components

    • Append child and functional components

    • Counter app component

    • Counter app state

    • Counter app class component

    • About the props

    • Use effect hook

    • Generate color and handling of state

    • Use callback hook

    • Memo
  • 4

    Optional: React Deep Dive [React]

    • How does it work part 1

    • How does it work part 2
  • 5

    Application getting shape [React]

    • Section Introductioin

      FREE PREVIEW

    • Bootstrap framework

    • Small styling changes and rem units

    • Styling of navbar

    • Scss stylings

    • Rental home page

    • Iterate rentals

    • Styling of rental category
  • 6

    Routing + State [React]

    • Section intoduction

      FREE PREVIEW

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

    Networking [React]

  • 8

    Forms [React]

    • Section Introduction

      FREE PREVIEW

    • Login and register page

    • Get values from login form

    • Use form package in login form

    • Login form validation

    • Register form

    • Custom validators

    • Error message component

    • Custom error message component

    • Section outro
  • 9

    Authentication on Client [React]

    • Section introduction

      FREE PREVIEW

    • Register user

    • Handle register errors

    • Login user

    • Auth provider

    • Decode token and dispatch

    • Auth reducer

    • Structural changes and use Auth hook

    • Check if user is authenticated

    • Logout and secret page

    • Auth route

    • Guest route

    • Login message
  • 10

    Github [React]

  • 11

    Geolocation [React]

  • 12

    Rental Create [React]

    • Section introduction

      FREE PREVIEW

    • Controller to create rental

    • Fake db changes

    • Rental new page

    • Send a request to create rental

    • Token interceptor

    • Refactor actions

    • Section Outro
  • 13

    Booking Feature [React]

    • Section Introduction

      FREE PREVIEW

    • 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 user is authorized to create booking

    • Display rental owner in detail page
  • 14

    Search Feature [React]

  • 15

    Manage feature [React]

    • Section introduction

      FREE PREVIEW

    • 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
  • 16

    Rental Update [React]

    • Section Introduction

      FREE PREVIEW

    • 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
  • 17

    Image Upload [React]

    • Section introduction

      FREE PREVIEW

    • 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

    • Polishing of upload
  • 18

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

    • Production server updates

    • Setting up production variables

    • Deployment to Heroku

    • Outro
  • 19

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

    • Section introduction

      FREE PREVIEW

    • 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
  • 20

    Optional: Web Apps Deep Dive [Angular]

    • How does it work
  • 21

    Angular Core Concepts [Angular]

    • Section introduction

      FREE PREVIEW

    • 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 id directive

    • Custom ng for directive

    • Login, register page and font awesome

    • Section outro
  • 22

    Networking [Angular]

  • 23

    Forms [Angular]

    • Login and register layout

    • Template forms and get data from form

    • Template form validation

    • Register form handle layout

    • Reactive forms intro

    • Reactive forms validation

    • Custom reactive validator

    • Custom directive validator

    • Same as validator

    • Providers

    • Section outro
  • 24

    Authentication on Client [Angular]

    • Section introduction

      FREE PREVIEW

    • Register user

    • Handle register errors

    • Function to handle error

    • Send message from register

    • Login functionality

    • Save jwt

    • Display username and expiration

    • Display menu when authenticated

    • Display logout

    • Auth guard intro

    • Finishing auth guard

    • Guest guard

    • Redirect when cannot visit page
  • 25

    Github [Angular]

  • 26

    Geolocation [Angular]

    • Section introduction

      FREE PREVIEW

    • Init map module

    • Display map

    • Search query

    • Center map on location

    • Display marker

    • Handle error and display popup

    • Cleaning map component

    • Caching location
  • 27

    Rental Create [Angular]

    • Section introduction

      FREE PREVIEW

    • 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
  • 28

    Booking Feature [Angular]

    • Section introduction

      FREE PREVIEW

    • Booking component

    • Datepicker and styles

    • Booking model

    • Confirmation modal

    • Time service

    • Get booking UTC time

    • Creating booking

    • UX improvements

    • Get range of dates

    • Block dates in calendar

    • Toastr
  • 29

    Search Feature [Angular]

  • 30

    Manage Feature [Angular]

    • Section introduction

      FREE PREVIEW

    • Manage module

    • Handle all and received bookings

    • List rentals for auth user

    • Delete rental preparation

    • Delete rental complete

    • Booking listing template and fetch data

    • More booking listing

    • Delete booking done
  • 31

    Rental Update [Angular]

    • Section introduction

      FREE PREVIEW

    • 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 and keydown events

    • Section outro
  • 32

    Image Upload [Angular]

    • Section introduction

      FREE PREVIEW

    • Fix images

    • Image upload component

    • File reader and 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
  • 33

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

    • TS lint warnings

    • Noder server production

    • Heroku app and prod variables

    • App deployment

    • Final testing

    • Section Outro
  • 34

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

    • Section introduction

      FREE PREVIEW

    • Server setup

    • Endpoints

    • Post endpoint

    • 355 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
  • 35

    Authentication on Server [Node Server]

    • Section introduction

      FREE PREVIEW

    • User routes controler

    • User model

    • Register user

    • Hashing password

    • Login functionality

    • JWT introduction

    • Middlewares

    • Auth middleware

    • Handle JWT Errors

    • Handle mongo error

    • Handle API error

    • Fake DB update

    • Section outro
  • 36

    Booking Feature [Node Server]

  • 37

    Manage Feature [Node Server]

  • 38

    Image Upload [Node Server]

  • 39

    Course Ending

    • Course ending

Instructor(s)

Software Engineer

Filip Jerga

My name is Filip Jerga and I am an experienced software engineer and freelance developer. I have a Master's degree in Artificial Intelligence and several years of experience working on a wide range of technologies and projects from C++ development for ultrasound devices to modern mobile and web applications in React and Angular. Throughout my career, I have acquired advanced technical knowledge and the ability to explain programming topics clearly and in detail to a broad audience. I invite you to take my course, where I have put a lot of effort to explain web and software engineering concepts in a detailed, hands-on and understandable way.

FAQ

  • How to get help when I am stuck with the course?

    Every video contains discussion where you can create a post describing an issue. Instructor responds usually within 1 business day.

  • What to do when I am unhappy with the course ?

    Within 30 days from the purchase you can ask for a full refund. No questions asked. Your happiness is our priority.

  • Do I need to watch every lecture of really extensive course?

    Of course not! Every lecture is committed (explained in introduction section). You can start watching at any lecture, just download correct version of project attached to lecture resources.

Eincode Access Options

  • Single Course Access

    • Lifetime and unlimited Access to "React, Angular, Node In-Depth Guide: Beginner to Pro (2020)"

    $49.00

    Access to this course only.

    Get started now

  • Monthly Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $19.00 / month

    Cancel Anytime!

    Get started now

  • Annual Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $190.00 / year

    Cancel Anytime!

    Get started now