React Js + Angular + Rails 5 Bootcamp

Learn how to build a real world React JS and Angular apps that utilize Ruby on Rails for a backend API.

What you'll learn
Build Angular and React applications from scratch
Integrate Angular and React applications with multiple Ruby on Rails APIs
Implement features such as: routing, data binding, data updates without a page refresh, and more!
Build React JS applications
Integrate authentication between a Ruby on Rails API and JavaScript framework front end
Requirements
A basic knowledge of Ruby on Rails
Access to a Mac or Linux computer (or online IDE such as C9)
Basic JavaScript knowledge
Description
May 2021 Course Update! Added a new section of live coding workshops, including a deep dive on how to work with React hooksAre you ready to build professional applications that combine the front end frameworks, such as React JS and Angular with Ruby on Rails as a backend? Then this is the course for you. My name is Jordan Hudgens, and I'll be your instructor for the course. In addition to being the lead instructor for devCamp I've also been building web applications for over a decade for organizations such as Eventbrite and Quip.After you have completed this course you will be able to build modern React JS, Angular, and Ruby on Rails 5 applications. In fact, in this course we're going to develop several applications that highlight the powerful and dynamic features offered by front end frameworks such as React JS and Angular working as the user interfaces, and Ruby on Rails API apps functioning as the backend. This is a powerful combination since you will learn how to create incredibly fast, dynamic React JS and Angular applications that embrace features such as real time updates, along with the power and flexibility provided by the Ruby on Rails framework.Throughout the course material you will learn concepts such as:How to configure your system to run Angular and React JS ApplicationsHow to generate an Angular applicationsHow to generate React JS applicationsWhat it takes to build React and Angular componentsHow to work with Angular Observables to automatically update page elements without even needing to refresh the page.Along with how to communicate with APIs and parse the data they return.How to integrate authentication from scratch with session based authAnd everything else you'll need in order to build real world React JS and Angular applications, with a Ruby on Rails API!This is not an entry level course. You will need at least a basic understanding of Rails in order to go through this material. Additionally, I also recommend that you are familiar with the TypeScript and JavaScript programming languages, however if you haven't worked with TypeScript or JavaScript before, you can still work through the course.Each lesson of the course is paired with the source code that I used in the guide so you can check your work. And since the application we're building is a real world app I'll constantly be adding to the course material with new features, as I do with my other courses.Please feel free to review the course curriculum and I look forward to going through the material with you on your development journey!

Overview

Section 1: Project Introduction

Lecture 1 The Angular + Rails Application We're Going to Build

Lecture 2 Application Architecture for an Angular + Rails Application

Lecture 3 Monolith vs Microservice Architecture Deep Dive

Lecture 4 The Role of Services in Microservice Architecture

Lecture 5 The Role of Components in Microservices

Section 2: System configuration for Angular 2 Application

Lecture 6 Configuring a System to Run Angular 2 Applications

Lecture 7 Generating an Angular 2 Application from Scratch

Section 3: Angular 2 Development

Lecture 8 Hello Angular 2

Lecture 9 Working with Browser Sync

Lecture 10 Creating the App Component

Lecture 11 Introduction to Angular 2 Routing

Lecture 12 How to Create View Files in Angular 2

Section 4: Building the Document Management Component

Lecture 13 Create a Document Management Component

Lecture 14 Creating Links Between Pages in Angular

Lecture 15 Creating an Angular Interface to Model Data

Lecture 16 Creating Mock Data in an Angular 2 Application

Lecture 17 How to Access Component Data from an Angular View Template

Section 5: Building the Proposal Component

Lecture 18 Creating the Initial Proposal Component

Lecture 19 Creating an Angular 2 Data Model for Proposals

Lecture 20 Populating an Angular List View with Data

Lecture 21 Building an Angular 2 Component that will Create New Proposals

Lecture 22 Introduction to Angular 2 Forms

Lecture 23 Completing the Angular Proposal Form

Lecture 24 How to Implement Dynamic Data Validations in Angular 2

Lecture 25 Creating Dynamic Routes in Angular 2 Based on an ID Lookup

Lecture 26 How to Trigger 'Active' Classes in Angular 2 Views

Section 6: Integrating Bootstrap 4 in an Angular 2 Application

Lecture 27 Installing Bootstrap 4 into an Angular 2 Application with ng-bootstrap

Lecture 28 How to Set Universal Styles in an Angular 2 Application

Lecture 29 Creating a Bootstrap 4 Navigation Bar

Lecture 30 How to Dynamically Add CSS Classes in an Angular 2 View

Lecture 31 Using Bootstrap Cards in an Angular Application

Lecture 32 Creating Angular 2 Component Specific CSS Files

Lecture 33 Setting Additional Global Styles for All Application Components in Angular 2

Lecture 34 How to Override the Default Bootstrap 4 Navigation Styles

Lecture 35 Adding Styles to an Angular 2 Form

Lecture 36 How to Style Dynamic Validation Messages in Angular 2

Lecture 37 How to Style Form Inputs with Bootstrap 4 Styles

Lecture 38 How to Integrate the List Group Component Styles in Angular 2

Lecture 39 How to Work with Angular 2 Pipes to Format Currencies

Lecture 40 Final Style Changes to Angular Application

Lecture 41 How to Add a Custom Font to an Angular 2 Application

Section 7: Creating a Ruby on Rails Microservice to Manage Documents

Lecture 42 Generating a Rails 5 API Application from Scratch

Lecture 43 How to Generate Data in a Rails 5 Application

Lecture 44 How to Configure the Network Settings for a Rails API App

Section 8: Connecting the Angular Front End with the Rails Document API App

Lecture 45 Creating an Angular 2 Service for Managing API Data

Lecture 46 Introduction to Angular 2 Observables

Lecture 47 How to Render API Data in an Angular 2 Application

Lecture 48 Analyzing Real Time Data Updates with an Angular + Rails System

Lecture 49 Final Style Changes to Angular 2 Document Component

Section 9: Creating the Proposal Ruby on Rails Microservice API Application

Lecture 50 Building a Rails 5 API Microservice

Lecture 51 Using the Seeds File to Create Sample Data in a Rails 5 API App

Section 10: Connecting the Angular 2 App with the Rails Proposal Microservice

Lecture 52 Using an Angular 2 Observable to Stream Live Data for the Proposal List Componen

Lecture 53 How to Implement an Angular 2 Show Page Component with API Data

Lecture 54 How to Build a Custom Link Function in an Angular 2 Component

Lecture 55 Creating an Angular 2 Form Submit Button

Lecture 56 How to Create New Records in a Rails API from an Angular App

Section 11: Final Application Changes

Lecture 57 How to Add Dynamic Notifications in an Angular 2 Application

Lecture 58 Adding Final Style Changes to the Proposal Show Component

Lecture 59 How to Trigger Sending Emails from the Rails Microservice

Lecture 60 Angular 2 + Rails 5 Bootcamp Course Summary

Section 12: Creating the React JS Application

Lecture 61 How to Generate a React Application with TypeScript, Webpack, Babel and Scss

Lecture 62 Deep Dive: Routing in React

Lecture 63 How to Access the URL Params in React with the useParams Hook

Lecture 64 How to Iterate Over Arrays and Nested Arrays in React

Lecture 65 Build an Animated Sliding Pane Modal in React

Lecture 66 Combining the useEffect and useState React Hooks to Store and Manage Data

Lecture 67 Creating a Dedicated Sliding Pane Component in a Separate File

Lecture 68 How to Work with Forms in a React JS Application

Section 13: Live Deep Dive Coding Workshops

Lecture 69 Create a Custom React Hook to Add Responsive Features to an Application

Section 14: React + Rails Authentication

Lecture 70 Section Introduction

Lecture 71 Ruby on Rails App Creation and Initial Configuration

Lecture 72 Building the User Model and Session Controller for the Rails API Authentication

Lecture 73 Implementing the Registration Controller and Final Authentication Features

Lecture 74 Configuring the Rails API Session Store to Work in All Environments

Lecture 75 Generating and Configuring the React JS Authentication Application

Lecture 76 Building the React Registration Component

Lecture 77 React JS Render Props for Managing the Logged In State and Redirecting Users

Lecture 78 Building the Login Component in React JS

Lecture 79 How to Check if a User is Logged In with React

Lecture 80 Implementing the Logout Functionality in React

This course is for developers who want to learn how to build real world front end applications with frameworks such as Angular and React JS that run on Ruby on Rails backend APIs