React JS + Angular + Rails 5 Bootcamp

Course Curriculum

Chapter 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

Chapter 2: System configuration for Angular 2 Application

Lecture 1: Configuring a System to Run Angular 2 Applications

Lecture 2: Generating an Angular 2 Application from Scratch

Chapter 3: Angular 2 Development

Lecture 1: Hello Angular 2

Lecture 2: Working with Browser Sync

Lecture 3: Creating the App Component

Lecture 4: Introduction to Angular 2 Routing

Lecture 5: How to Create View Files in Angular 2

Chapter 4: Building the Document Management Component

Lecture 1: Create a Document Management Component

Lecture 2: Creating Links Between Pages in Angular

Lecture 3: Creating an Angular Interface to Model Data

Lecture 4: Creating Mock Data in an Angular 2 Application

Lecture 5: How to Access Component Data from an Angular View Template

Chapter 5: Building the Proposal Component

Lecture 1: Creating the Initial Proposal Component

Lecture 2: Creating an Angular 2 Data Model for Proposals

Lecture 3: Populating an Angular List View with Data

Lecture 4: Building an Angular 2 Component that will Create New Proposals

Lecture 5: Introduction to Angular 2 Forms

Lecture 6: Completing the Angular Proposal Form

Lecture 7: How to Implement Dynamic Data Validations in Angular 2

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

Lecture 9: How to Trigger 'Active' Classes in Angular 2 Views

Chapter 6: Integrating Bootstrap 4 in an Angular 2 Application

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

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

Lecture 3: Creating a Bootstrap 4 Navigation Bar

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

Lecture 5: Using Bootstrap Cards in an Angular Application

Lecture 6: Creating Angular 2 Component Specific CSS Files

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

Lecture 8: How to Override the Default Bootstrap 4 Navigation Styles

Lecture 9: Adding Styles to an Angular 2 Form

Lecture 10: How to Style Dynamic Validation Messages in Angular 2

Lecture 11: How to Style Form Inputs with Bootstrap 4 Styles

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

Lecture 13: How to Work with Angular 2 Pipes to Format Currencies

Lecture 14: Final Style Changes to Angular Application

Lecture 15: How to Add a Custom Font to an Angular 2 Application

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

Lecture 1: Generating a Rails 5 API Application from Scratch

Lecture 2: How to Generate Data in a Rails 5 Application

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

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

Lecture 1: Creating an Angular 2 Service for Managing API Data

Lecture 2: Introduction to Angular 2 Observables

Lecture 3: How to Render API Data in an Angular 2 Application

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

Lecture 5: Final Style Changes to Angular 2 Document Component

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

Lecture 1: Building a Rails 5 API Microservice

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

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

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

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

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

Lecture 4: Creating an Angular 2 Form Submit Button

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

Chapter 11: Final Application Changes

Lecture 1: How to Add Dynamic Notifications in an Angular 2 Application

Lecture 2: Adding Final Style Changes to the Proposal Show Component

Lecture 3: How to Trigger Sending Emails from the Rails Microservice

Lecture 4: Angular 2 + Rails 5 Bootcamp Course Summary

Chapter 12: Creating the React JS Application

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

Lecture 2: Deep Dive: Routing in React

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

Lecture 4: How to Iterate Over Arrays and Nested Arrays in React

Lecture 5: Build an Animated Sliding Pane Modal in React

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

Lecture 7: Creating a Dedicated Sliding Pane Component in a Separate File

Lecture 8: How to Work with Forms in a React JS Application

Chapter 13: Live Deep Dive Coding Workshops

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

Chapter 14: React + Rails Authentication

Lecture 1: Section Introduction

Lecture 2: Ruby on Rails App Creation and Initial Configuration

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

Lecture 4: Implementing the Registration Controller and Final Authentication Features

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

Lecture 6: Generating and Configuring the React JS Authentication Application

Lecture 7: Building the React Registration Component

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

Lecture 9: Building the Login Component in React JS

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

Lecture 11: Implementing the Logout Functionality in React