The Complete Full-Stack JavaScript Course!

Learn full-stack web development using JavaScript (ReactJS, NodeJS, LoopbackJS, Redux and Material-UI)!

Created by Joseph Delgadillo, Last Updated 18-Jun-2020, Language:English

What Will I Get ?

Full-stack JavaScript
ReactJS
NodeJS
Rest API with LoopbackJS
Redux
Material-UI
Socket programming

Requirements

Access to a personal computer or equivalent system
Internet access to download the necessary software
A basic understanding of HTML and CSS (front-end web development)

Description

If you would like to master JavaScript and get started as a full-stack web developer, you are going to LOVE this course! Learn full-stack JavaScript development working on coding projects using ReactJS, NodeJS, LoopbackJS, Redux, Material-UI and socket programming.

We will work on the following 3 coding projects in this course:

Calculator Application - We will go over the basics of what React is, how to create components and how to work within the React life-cycle.

Weblog - We will build a feature rich blog app using React and LoopbackJS. We will begin to explore the full-stack elements of JavaScript by coding our own REST API, and how the front and back-end can communicate with each other.

Chat Application - We will explore socket programming. With a web socket you can keep clients connected on the server side. We will program a chat app where you can create a user account, add other users and then message back and forth with them.

This course was designed for students who have a basic understanding of front-end web development. It will be helpful if you know how to use HTML and CSS. A basic understanding of JavaScript is not required, but it will help you get up to speed with the tutorials.

Thank you for taking the time to read this and we hope to see you in the course!

Course Content

Introduction and Setup

3 Lectures 00:36:50
- Welcome to the course!
  
  Preview
  
  00:11:18
- Environment setup
  
  00:12:24
- Anatomy of a React project
  
  00:13:08
Getting Started with ReactJS

7 Lectures 01:44:36
- Writing a React component
  
  Preview
  
  00:08:51
- React life-cycle
  
  Preview
  
  00:04:54
- The React state
  
  00:15:16
- Understanding component props and re-rendering
  
  Preview
  
  00:17:37
- Importing CSS into React components
  
  00:04:36
- Coding a calculator part 1
  
  00:18:41
- Coding a calculator part 2
  
  00:34:41
Building a ReactJS Website

11 Lectures 02:47:54
- React website setup
  
  00:06:20
- Component children
  
  00:16:52
- React routing
  
  00:10:20
- Route parameters and HTML slicing part 1
  
  00:14:32
- Route parameters and HTML slicing part 2
  
  00:16:55
- Services and portfolio pages part 1
  
  00:15:45
- Services and portfolio pages part 2
  
  00:09:40
- Working with forms in React part 1
  
  00:15:35
- Working with forms in React part 2
  
  00:22:20
- Using Formik
  
  00:22:33
- Yup form validation schemas
  
  00:17:02
Rest API with LoopbackJS

23 Lectures 04:36:39
- Setup of REST API using LoopbackJS
  
  00:14:53
- Creating models
  
  00:12:34
- Model observers
  
  00:16:13
- Model relations
  
  00:15:58
- ESLINT
  
  00:09:24
- Subclassing access tokens
  
  00:06:11
- Persisting data using MongoDB
  
  00:20:28
- Creating data
  
  00:07:04
- Updating data
  
  00:04:12
- Finding model instances part 1
  
  00:21:23
- Finding model instances part 2
  
  00:03:02
- Deleting model instances
  
  00:07:01
- Creating post collection
  
  00:06:27
- Roles and rolemapping
  
  00:14:01
- Applying access control to our post model
  
  00:12:39
- Adding an editor role
  
  00:09:34
- Creating a category model
  
  00:08:35
- File storage and collection part 1
  
  00:15:11
- File storage and collection part 2
  
  00:09:44
- Custom remote methods and file uploads part 1
  
  00:17:37
- Custom remote methods and file uploads part 2
  
  00:14:21
- Creating login route
  
  00:18:06
- Adding a login form
  
  00:12:01
Redux and Material-UI

33 Lectures 09:18:19
- Wrapping components
  
  00:11:29
- Dispatching actions
  
  00:06:19
- Creating a store and reducer
  
  00:24:01
- Integrating remote API calls
  
  00:21:52
- Applying middleware
  
  00:14:35
- Material-UI intro
  
  00:11:35
- Drawer and CSS
  
  00:16:17
- Drawer collapsing and animations
  
  00:14:03
- Icons, lists and links
  
  00:17:10
- Main content class
  
  00:14:24
- Persisting reducers using localStorage
  
  00:15:29
- Basic tables
  
  00:11:12
- Fetching posts and users from our API
  
  00:21:07
- Fab buttons
  
  00:11:41
- Setting up Redux, Material-UI and Formik for our add post page
  
  00:11:43
- Material-UI forms with Formik
  
  00:19:01
- Flex display and connecting our post form to our database via Redux part 1
  
  00:15:16
- Flex display and connecting our post form to our database via Redux part 2
  
  00:14:34
- Editing existing posts
  
  00:27:30
- Uploading post images part 1
  
  00:16:02
- Uploading post images part 2
  
  00:17:13
- Integrating Quill as a content editor
  
  00:17:38
- Loading posts on the front-end part 1
  
  00:13:55
- Loading posts on the front-end part 2
  
  00:16:44
- Loading more posts on demand
  
  00:11:39
- Single post page
  
  00:26:33
- Registering new accounts
  
  00:25:05
- Posting comments and adding relations and ACLs to our API part 1
  
  00:20:18
- Posting comments and adding relations and ACLs to our API part 2
  
  00:19:24
- Deploying React apps with NGINX
  
  00:25:47
- Deploying our API using PM2 and NGINIX part 1
  
  00:17:44
- Deploying our API using PM2 and NGINIX part 2
  
  00:14:04
- Deploying our API using PM2 and NGINIX part 3
  
  00:16:55
WebSocket Chat Application

19 Lectures 05:12:15
- Creating a chat app
  
  00:08:02
- Creating our chat store
  
  00:11:27
- WebSocket connections
  
  00:07:52
- Sending socket messages
  
  00:13:01
- Creating signup and login forms
  
  00:18:11
- Writing account based logic part 1
  
  00:29:43
- Writing account based logic part 2
  
  00:01:58
- Using auth tokens
  
  00:12:39
- Styling the messenger
  
  00:21:20
- Tracking logged in users
  
  00:13:55
- Search functionality
  
  00:20:26
- Creating new threads and sending to relevant clients
  
  00:26:31
- Connecting on page load if already logged in
  
  00:24:01
- Get threads on page load
  
  00:10:07
- Disconnecting socket sessions
  
  00:11:07
- Adding messages and sending to relevant clients
  
  00:31:46
- Rendering messages client-side
  
  00:18:42
- Rendering messages with user information
  
  00:22:47
- Ejecting a React application
  
  00:08:40

Joseph Delgadillo

Best-Selling Instructor

Joseph Delgadillo is the founder of JTDigital Courses, an education technology company. He has been active in the online learning community since 2015 and has worked with multiple startups. As of 2020, over 1 million students across the globe have enrolled in his courses covering ethical hacking, Python programming, web development and more.

He graduated with honors from Central Washington University.