All-In-One Angular, React & Node Course | Airbnb Style App - Free Online Paid Course

All-In-One Angular, React & Node Course | Airbnb Style App

Master Angular (Angular 5, Angular 6,incl. Angular 7), React + Redux (React 16) & Node. Stripe, AWS, Express included.

Created by Filip Jerga

Last updated 12/2018

 English

Requirements

• No Angular, React and Node previous knowledge is required!
• Fundamentals in HTML and CSS, but isn't must have
• Basic Javascript knowledge is required

Description

Up-to-date course that listens to its students. More on-demand features are integrated to this course regularly. Payment feature with Stripe, Image upload with AWS from Amazon and Interactive update of properties with Angular and React was added to course recently.

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! and many related technologies of Web Development to more advanced topics until our application will be deployed to Heroku and accessible online on the internet.

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 in 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. I will also talk about routing in SPA (single page application).

Furthermore, we will work on a detail page of a rental property in which we will work with 3rd party Google Map API and we will display the location of a rental property on a map.

Later in this course, we will take a look on authentication with JWT (json web tokens) on the client/server side.

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 dates of stay, modal window to confirm bookings and toast messages in order to enhance interactivity of the application and we will go more into advanced concepts of Angular, React and Node.

After the booking section we will take a look on search and create rental functionality. We will search for rentals by city. We will learn how to integrate new features to the working code.

Our last section will be a manage section where we will work on functionality to display user bookings and rentals, availability to list and remove them.

After manage section we will prepare our applications to be ready for deploy to Heroku. We will do additional production setup of Angular, React and Node applications. After all of the necessary changes we will finally deploy our applications to Heroku and we will make them available online on the internet.

Development process is not finished with a deploy section. This course offers for you constant update of new features. Next we will work on very interesting feature for update rental properties. On Rental Update feature you will learn how to create powerful reusable components in your application and how to create good looking update components.

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

During this course we will be switching from our frontend application to our backend Node.js application. This Node application will be responsible for handling and storing our business data in MongoDB.

Course content

Course Beginning

•  [Optional]: Detail showcase of project
•  [Optional-Preview] - Rental Update
•  [Optional Preview] - Upload and Crop Image
•  [Optional]: Get a Help On Slack
•  [Optional]: Github intro
•  [Optional]: Git SSH Key
•  Node introduction + installation
•  [Optional]: Server vs Client, SPA vs MPA.

 [Optional]: Setup for Busy Developers

• Note Before Lecture
• How to setup a completed project

 [Optional - Bonus]: Knowledge Refresher

•  [Optional]: Section Introduction
•  [Optional]: Classes
•  [Optional]: Classes 2 and Modularity
•  [Optional]: const, let, var
•  [Optional]: Callback Functions
•  [Optional]: Arrow Functions
•  [Optional]: Destructuring, Ternary Operator
•  [Optional]: Inheritance
•  [Optional]: Asynchronous Code
•  [Optional]: Promises
•  [Optional]: Observables

 [Angular]: Basic Concepts of Angular

• Section introduction
• Angular 6 Update + Tip For Windows Users!
• Project setup from Git Repository
• [OPTIONAL]: Project setup with Angular CLI
• What is Component?
• [Links] What is Component?
• Create Header Component
• What are modules for ?
• [Links]: What are modules for ?
• Bootstrap framework installation
• Application layout + Header Component
• Header Component Finish
• First Github Feature Push
• [Optional]: Lifecycle methods
• Create Rental listings
• Introduce routing
• Rental Module
• Rental Module Continue
• Rental List Component and NgFor
• How to pass data to children component
• Service Introduction + Rental Service
• Observables, Service improvement
• [Optional]: Types
• Rental Type
• Detail Rental View and Routing Improvement
• Link to Rental Detail
• Get Rental Data from Service
• Code Improvements before Github push
• Push changes to our Repositories.

 [Node] - Get Familiar with Node (server creation)

• Section Introduction
• Server initialisation
• Postman and first endpoint
• Database introduction and creation
• Mongoose Rental Model
• Fill our Database with data
• Clean Database
• Separate Routing
• Create Rental Endpoints
• Handle Errors
• Git Push and Summary of Section

 [Angular]: Rental Map and Detail Page

• Section Introduction
• Get Rentals from Node Server
• Proxy configuration
• Rental Detail Styles and Font Awesome
• Pipes
• Custom Pipe
• Google Maps Module
• Create Map Component
• Displaying Map
• Display location of Rental on Map
• Introduce Caching
• Caching Finish
• Refactoring of Caching
• Display Area of Rental on Map
• Display Error When Location is Not found
• Rental Map Hotfix
• Git Push and End of Section

[Node]: Authentication and Registration

• Section Introduction
• Introduction to JWT
• Create User Model
• User Controllers
• Starting Register
• Encrypt User Password
• Mongoose Errors and Debugging
• Auth Middleware introduction
• Decoding JWT
• Auth Middleware Finish
• Update FakeDB
• Push to Github

 [Angular]: Authentication and Registration

• Section Introduction
• Login and Register Component
• Register Template Driven Form
• Register Form Validation
• Register User
• Register Redirect and Handle Errors
• Login Reactive Forms
• Login Validators
• Login Error Display
• Login User
• Register Success Message and Images in App
• Jwt not compatible with Angular 6
• Authentication Decode Token
• Authentication Implementation
• Authentication Logout and Display Username
• Auth Guard - Protect Pages
• Send Authorise Request - HTTP Interceptors
• Booking Component Preparation
• Small Improvements Before Push
• Git Push

 [Node]: Lets Book Rentals!

• Section Introduction
• Add Booking Model
• Init Booking Controller
• Booking Controller Implementation
• Validate Bookings
• Bookings Improvements
• Git Push

 [Angular]: Lets Book Rentals!

• Section Introduction
• Booking Model and Iterate Bookings
• Booking Range Of Dates
• Disable Dates In Calendar
• Get Booking Data part 1
• Get Booking Data part 2
• Init Modal Component
• Display Booking Data In Modal (Confirmation step)
• Send Request and Book Place
• Update Calendar and Handle Errors
• Toaster Package Angular 6
• Toast Messages Intro
• Reset Daterange Picker + ViewChild
• Small Improvements Before Push

 [Angular + Node]: Search And Create Rental

• Section Introduction
• Update FakeDB and Get Query From Url
• Search City Endpoint Start
• Refactor Search and Create Rental Endpoint
• Git Push Server Part
• Init Search Component
• Search Rentals From Server
• Handle Search Errors and other Edge Cases
• Work On Input Header Search
• Rental Create Component Start
• Send Request to Create Rental
• Rental Create Component Start Finish
• Owner Section Navigation
• Disable Booking and Show Rental Owner
• Push Rental Create and Rental Search

 [Angular + Node]: Manage Section

• Section Introduction
• Delete Rental Endpoint
• Manage Endpoints
• Manage Endpoint Fix
• Git Push Server
• Manage Components Init
• Manage Components Connect To Server
• Manage Booking Start
• Format Dates Pipes
• Manage Rentals Start
• Manage Rental Bookings Part 1
• Manage Rental Bookings Finish
• Delete Rental Design
• Delete Rental Request
• Improvements and Git Push

 [Angular]: Deployment

• Section Introduction
• Index Route and Prod Setup
• Config file, prod environment
• Heroku Last Steps
• Few Hotfixes Before Deploy
• We are Deploying!
• Deployed App Test
• Application Deployed!

 [React]: Application Getting Shape

• Section Introduction
• Git Init (My Repo)
• Cli Init (Create React App)
• App Intro and JSX
• Bootstrap FW and Functional Components
• Sccs Deep Dive
• Header Component and Scss
• Rental Card, Separate Concerns
• Rental List, State Intro
• Rental List Manipulate State, Rerender
• Rental List. What are Props?
• Routing Simple Example
• Real Routing
• Rental List Display Real Data
• React Link TO
• Get Rental ID from Url
• Redux exciting start
• Redux Reducers
• Redux Actions
• Fix Rental Listing
• Selected Rental Reducer
• Redux Thunk Init
• Redux Thunk Part 2
• Redux Chrome Extension
• Add missing Links and styling improvements
• Folder structure update and Rental Detail Issue
• Git push and New Components

 [Node - React] - Get familiar with node (server creation)

• Section Introduction
• Reminder on React Server
• Server initialisation
• Postman and first endpoint
• Database introduction and creation
• Mongoose Rental Model
• Fill our Database with data
• Clean Database
• Separate Routing
• Create Rental Endpoints
• Handle Errors
• Git Push and Summary of Section

 [React]: Rental Map and Detail Page

• Section Introduction
• Get Rentals From Server, Actions changes
• Proxy, Cors Explanation and Fix
• Proxy part 2, Rental Detail Fix
• Rental Detail Layout, Font Awesome
• Rental Detail More Components Separation
• Helper Functions
• Google Map Init
• Google Map Api Key
• HOC - High Order Components
• Composition Pattern
• Geolocation HOC
• Geolocate Location
• Display Rental Location Area on Map
• Caching Intro and Cache Location
• Caching Refactor, Promises
• Handle Map Error
• Git Push + Last Changes

 [Node-React]: Authentication and Registration

• Section Introduction
• Reminder on React Server
• Introduction to JWT
• Create User Model
• User Controllers
• Starting Register
• Encrypt User Passwords
• Mongoose Errors and Debugging
• Auth Middleware introduction
• Decoding JWT
• Auth Middleware Finish
• Update FakeDB
• Push to Github

 [React]: Authentication and Registration

• Section Introduction
• Login, Register Init
• Register Redux Form
• Get Values From Register Form
• Register Form Validation
• Separate Input Component
• Send Request To Register User
• Handle Register Errors
• Redirect On Success Register
• Login Redux Form
• Login Form Validation
• Login Redux Form State, Actions
• Login Redux Form State, Reducers
• Auth Service Start
• Check Auth State
• Handle Login Errors
• Logout User, Success Message On Register
• Update UI depending on auth state
• Protected Routes
• Interceptors
• Redirect On Logout and Images
• Git Push!

 [Node-React]: Lets Book Rental!

• Section Introduction
• Reminder on React Server
• Add Booking Model
• Init Booking Controller
• Booking Controller Implementation
• Validate Bookings
• Bookings Improvements
• Git Push

 [React]: Lets Book Rental!

• Section Introduction
• Booking Layout
• Date Range Picker
• Get Range of Dates
• Disable Booked Out Dates
• Get Values From Calendar
• Create Booking Modal
• Display Booking Confirmation in Modal
• Send Request To Book Place
• Handle Cases After Booking Created
• Toast Messages
• Git Push!

 [React + Node]: Search And Create Rental

• Section Introduction
• Update FakeDB and Get Query From Url
• Search City Endpoint Start
• Refactor Search and Create Rental Endpoint
• Git Push Server Part
• Rental Search Component Init
• Search City Request
• Handle Search Errors
• Search Input
• Rental Create Form
• New Inputs - Description and Category
• New Inputs - Image and Shared
• Create Rental Request
• New Owner Section Menu in Header
• Display Username in Header
• Git Push!

 [React + Node]: Manage Section

• Section Introduction
• Delete Rental Endpoint
• Manage Endpoints
• Manage Endpoint Fix
• Git Push Server
• Manage Section Init
• Manage Bookings - Redux Architecture
• Manage Rentals, Class State
• Manage Bookings Layout
• Manage Bookings Helpers and Handle Error
• Manage Booking Card
• Manage Rentals Layout
• Manage Rentals Modal For Bookings
• Rental Modal Fill Booking Data
• Delete Rental Layout
• Delete Rental Request
• Small Improvements
• Git Push!
•  [React]: Deployment
• Section Introduction
• Pre Deploy Setup
• Package.json and Config variables
• Heroku, Mlab Production setup
• Quick Fix
• Heroku Deploy!
• Test Our Applications
• Application Deployed!

Final Words + Future Lessons Planning

• Outro

 [Angular]: Update Rental

• Section Introduction
• Create Update Endpoint
• Test Endpoint in Postman
• New Update Component For Rental
• New Reusable Editable Component
• Introduce Entity and Field
• State of Editable Component and Input
• Styles Update
• Output Property and Emit Event
• Let's send Rental Update request!
• Handle edge cases and new conditions.
• Update Styles with [ngStyle] Directive
• New Editable Text Area & Inheritance
• New Editable Select Component
• Fixing Select Issue, & New Events
• Update Map & Subject
• Handle Errors & Toast Messages
• Transform View in Editable Component
• Rental Guard
• Guard Navigate Fix & Button to Edit
• Git Push!

 [Node]: Image Upload

• AWS S3 Configuration
• Image Upload Service in Node
• Image Upload Route Init
• Testing Image Upload - Check for a file type
• Error Handling & Debug Code

 [Bonus - Angular]: Image Upload With Amazon S3

• Note Before Lecture
• Image Input Component Init
• Read File from the Input
• Styling Improvements of Input
• Integrate Image Upload Service
• Handle Upload Edge Cases - Messages and Spinner
• Emit Uploaded Image - Create Rental with an Image!
• Image Cropper Intro
• Create Rental with a Cropped Image
• Handle Cropping Edge Cases
• Let's Create Editable Image Component
• Update Image With Reusable Component Architecture
• Git Push and Test App!

 [Angular-Bonus]: Migration to Angular 6!

• Migration To Angular 6
• Deploy Application to Heroku

 [React]: Update Rental

• Note to Server Part
• Create Update Endpoint
• Test Endpoint in Postman
• Rental Detail Update Component
• Editable Input Component First Touches
• Editable Input Handle Active State
• Style the Button
• Update Functionality via Props
• Update Functionality - Actions
• Update Functionality - Reducers
• Use Editable Inputs for other properties
• Editable TextArea
• Editable Select Component
• Editable Components Errors - part 1
• Editable Components Errors - part 2
• Map Reload -part 1
• Map Reload -part 2
• User Guard - Server
• User Guard - Client part 1
• User Guard - Client Part 2
• User Guard Refactor
• Format pipes
• Git push and testing!

 [React]: Image Upload

• Note Before Lecture
• Get a file from input
• Style your input part 1
• Style your input part 2
• First upload of an image
• UX Improvements part 1
• UX Improvements part 2
• Cropping functionality start
• Get a cropped image
• Fix Cropping Behaviour
• Handle Cropping Edge Cases
• Image Update Refactoring
• Editable Image Implementation Part 1
• Editable Image Implementation Part 2
• Styling Improvements and Git Push
• Test After Push
•  [Bonus]: Keep Learning

 [Angular]: Payments + Profile Page

• Payment Component
• Stripe Introduction
• Stripe Form
• Stripe Form part 2
• Handle Error in Stripe
• How to get a token from Stripe
• UI Improvements for Slack Form
• Quick Form Fix
•  [Node]: Update Models, Payment Model
•  [Node]: Create a payment
•  [Node]: Create a payment, part 2
•  [Node]: Get Pending Payments
• Get Pending Payments
• Pending Payments Debugging + Fixes
• Display Pending Payments
•  [Node]: Accept Payment
•  [Node]: Decline Payment
• Accept Payment Frontend
• Accept Payment Detailed Debugging
• Decline Payment Angular
•  [Node]: Profile Page Endpoint
• Profile Page Init
• Profile Page Fill the Template
• Get Real Data of User
• Display User Data + Small Styling fixes
• Push Changes To Github

Update To Angular 7

• Update

 [React] Payments

• Payment Component
• Integrate Stripe
• Payment Form
• Payment Form Styling

Total Size: 33.96GB

Download Course

https://www.udemy.com/practical-angular-react-node-airbnb-style-application/