React JS + Angular + Rails 5 Bootcamp

Focused View

Jordan Hudgens

13:21:16

151 View

1 - Project Introduction

1 - The Angular Rails Application Were Going to Build.mp4

04:22

2 - Application Architecture for an Angular Rails Application.mp4

08:22

3 - Monolith vs Microservice Architecture Deep Dive.mp4

10:33

4 - The Role of Services in Microservice Architecture.mp4

08:33

5 - The Role of Components in Microservices.mp4

06:55

2 - System configuration for Angular 2 Application

6 - Configuring a System to Run Angular 2 Applications.mp4

04:25

7 - Generating an Angular 2 Application from Scratch.mp4

13:23

7 - angular 2 quickstart code.zip

7 - source code.zip

3 - Angular 2 Development

8 - Hello Angular 2.mp4

23:05

8 - source code.zip

9 - Working with Browser Sync.mp4

07:08

9 - source code.zip

10 - Creating the App Component.mp4

11:56

10 - source code.zip

11 - Introduction to Angular 2 Routing.mp4

14:59

11 - source code.zip

12 - How to Create View Files in Angular 2.mp4

05:12

12 - source code.zip

4 - Building the Document Management Component

13 - Create a Document Management Component.mp4

07:28

13 - source code.zip

14 - Creating Links Between Pages in Angular.mp4

05:51

14 - source code.zip

15 - Creating an Angular Interface to Model Data.mp4

03:01

15 - source code.zip

16 - Creating Mock Data in an Angular 2 Application.mp4

14:07

16 - source code.zip

17 - How to Access Component Data from an Angular View Template.mp4

04:29

17 - source code.zip

5 - Building the Proposal Component

18 - Creating the Initial Proposal Component.mp4

07:25

18 - source code.zip

19 - Creating an Angular 2 Data Model for Proposals.mp4

06:26

19 - source code.zip

20 - Populating an Angular List View with Data.mp4

10:31

20 - source code.zip

21 - Building an Angular 2 Component that will Create New Proposals.mp4

09:49

21 - source code.zip

22 - Introduction to Angular 2 Forms.mp4

11:01

22 - source code.zip

23 - Completing the Angular Proposal Form.mp4

18:29

23 - source code.zip

24 - How to Implement Dynamic Data Validations in Angular 2.mp4

11:45

24 - source code.zip

25 - Creating Dynamic Routes in Angular 2 Based on an ID Lookup.mp4

07:57

25 - source code.zip

26 - How to Trigger Active Classes in Angular 2 Views.mp4

13:15

26 - source code.zip

6 - Integrating Bootstrap 4 in an Angular 2 Application

27 - Installing Bootstrap 4 into an Angular 2 Application with ngbootstrap.mp4

07:01

28 - How to Set Universal Styles in an Angular 2 Application.mp4

01:46

28 - source code.zip

29 - Creating a Bootstrap 4 Navigation Bar.mp4

14:06

29 - source code.zip

30 - How to Dynamically Add CSS Classes in an Angular 2 View.mp4

08:41

30 - source code.zip

31 - Using Bootstrap Cards in an Angular Application.mp4

08:17

31 - source code.zip

32 - Creating Angular 2 Component Specific CSS Files.mp4

07:28

32 - source code.zip

33 - Setting Additional Global Styles for All Application Components in Angular 2.mp4

03:30

33 - source code.zip

34 - How to Override the Default Bootstrap 4 Navigation Styles.mp4

06:59

34 - source code.zip

35 - Adding Styles to an Angular 2 Form.mp4

08:59

35 - source code.zip

36 - How to Style Dynamic Validation Messages in Angular 2.mp4

05:49

36 - source code.zip

37 - How to Style Form Inputs with Bootstrap 4 Styles.mp4

04:49

37 - source code.zip

38 - How to Integrate the List Group Component Styles in Angular 2.mp4

12:12

38 - source code.zip

39 - How to Work with Angular 2 Pipes to Format Currencies.mp4

04:38

39 - source code.zip

40 - Final Style Changes to Angular Application.mp4

05:11

40 - source code.zip

41 - How to Add a Custom Font to an Angular 2 Application.mp4

02:22

41 - source code.zip

7 - Creating a Ruby on Rails Microservice to Manage Documents

42 - Generating a Rails 5 API Application from Scratch.mp4

10:01

42 - source code.zip

43 - How to Generate Data in a Rails 5 Application.mp4

08:34

43 - source code.zip

44 - How to Configure the Network Settings for a Rails API App.mp4

04:10

44 - source code.zip

8 - Connecting the Angular Front End with the Rails Document API App

45 - Creating an Angular 2 Service for Managing API Data.mp4

06:48

45 - source code.zip

46 - Introduction to Angular 2 Observables.mp4

18:18

46 - source code.zip

47 - How to Render API Data in an Angular 2 Application.mp4

16:04

47 - source code.zip

48 - Analyzing Real Time Data Updates with an Angular Rails System.mp4

04:49

48 - source code.zip

49 - Final Style Changes to Angular 2 Document Component.mp4

02:35

49 - source code.zip

9 - Creating the Proposal Ruby on Rails Microservice API Application

50 - Building a Rails 5 API Microservice.mp4

02:29

50 - source code.zip

51 - Using the Seeds File to Create Sample Data in a Rails 5 API App.mp4

12:26

51 - source code.zip

10 - Connecting the Angular 2 App with the Rails Proposal Microservice

52 - Using an Angular 2 Observable to Stream Live Data for the Proposal List Componen.mp4

16:07

52 - source code.zip

53 - How to Implement an Angular 2 Show Page Component with API Data.mp4

19:18

53 - source code.zip

54 - How to Build a Custom Link Function in an Angular 2 Component.mp4

04:54

54 - source code.zip

55 - Creating an Angular 2 Form Submit Button.mp4

09:01

55 - source code.zip

56 - How to Create New Records in a Rails API from an Angular App.mp4

18:06

56 - source code.zip

11 - Final Application Changes

57 - How to Add Dynamic Notifications in an Angular 2 Application.mp4

05:02

57 - source code.zip

58 - Adding Final Style Changes to the Proposal Show Component.mp4

01:38

58 - source code.zip

59 - How to Trigger Sending Emails from the Rails Microservice.mp4

13:51

59 - source code.zip

60 - Angular 2 Rails 5 Bootcamp Course Summary.mp4

01:57

60 - final angular application code.zip

60 - final rails document application code.zip

60 - final rails proposal application code.zip

12 - Creating the React JS Application

61 - How to Generate a React Application with TypeScript Webpack Babel and Scss.mp4

12:26

61 - npm project builder module.zip

62 - Deep Dive Routing in React.mp4

22:19

62 - react routing getting started documentation.zip

62 - source code.zip

63 - How to Access the URL Params in React with the useParams Hook.mp4

09:11

63 - source code.zip

64 - How to Iterate Over Arrays and Nested Arrays in React.mp4

11:21

64 - source code.zip

65 - Build an Animated Sliding Pane Modal in React.mp4

13:26

65 - sliding pane library.zip

65 - source code.zip

66 - Combining the useEffect and useState React Hooks to Store and Manage Data.mp4

07:57

66 - source code.zip

67 - Creating a Dedicated Sliding Pane Component in a Separate File.mp4

16:10

67 - source code.zip

68 - How to Work with Forms in a React JS Application.mp4

10:45

68 - source code.zip

13 - Live Deep Dive Coding Workshops

69 - Create a Custom React Hook to Add Responsive Features to an Application.mp4

47:27

69 - final version of code.zip

69 - starter code.zip

14 - React Rails Authentication

70 - Section Introduction.html

71 - Ruby on Rails App Creation and Initial Configuration.mp4

15:46

72 - Building the User Model and Session Controller for the Rails API Authentication.mp4

12:15

73 - Implementing the Registration Controller and Final Authentication Features.mp4

15:28

74 - Configuring the Rails API Session Store to Work in All Environments.mp4

02:33

75 - Generating and Configuring the React JS Authentication Application.mp4

11:07

75 - react app generator library.zip

76 - Building the React Registration Component.mp4

21:12

77 - React JS Render Props for Managing the Logged In State and Redirecting Users.mp4

18:35

78 - Building the Login Component in React JS.mp4

07:48

79 - How to Check if a User is Logged In with React.mp4

08:52

80 - Implementing the Logout Functionality in React.mp4

08:15

Description

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

Who is this for?

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

What You Need to Know?

A basic knowledge of Ruby on Rails

Access to a Mac or Linux computer (or online IDE such as C9)

Basic JavaScript knowledge

More details

Description
May 2021 Course Update!Â Added a new section of live coding workshops, including a deep dive on how to work with React hooks
Are 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 Applications
How to generate an Angular applications
How to generate React JSÂ applications
What it takes to build React and Angular components
How 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 auth
And 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!
Who this course is for:
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

User Reviews

Rating

average 0

Total votes0

Focused display

Jordan Hudgens is the CTO and Founder of Bottega where he leads instruction and curriculum development for all of the DevCamp and Bottega code schools around the US.As a full stack developer for over the past decade, Jordan has traveled the world building applications and training individuals on a variety of technology stacks, including: Ruby on Rails, Python, React JS, React Native, JavaScript, and TypeScript, with a speciality in API and machine learning development.Jordan has developed applications for Quip, Eventbrite, and DevCamp. As a teacher, he focuses on project driven education, with a focus on jobcentric techniques. This means that he focuses specifically on teaching the skills needed in the development industry. This style of teaching is conducive to learning how to build real world products that adhere to industry best practices.Additionally Jordan has published multiple books on programming and computer science for Packt Publishing, along with developing training curriculum for Bottega, Learn Co, DevCamp, and AppDev on the topics of Ruby on Rails, Java, AngularJS, NoSQL, API development, TypeScript and algorithms.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.