Introduction and Setup
  • Welcome to the course!
  • Environment setup
  • Anatomy of a React project
Getting Started with ReactJS
  • Writing a React component
  • React life-cycle
  • The React state
  • Understanding component props and re-rendering
  • Importing CSS into React components
  • Coding a calculator part 1
  • Coding a calculator part 2
Building a ReactJS Website
  • React website setup
  • Component children
  • React routing
  • Route parameters and HTML slicing part 1
  • Route parameters and HTML slicing part 2
  • Services and portfolio pages part 1
  • Services and portfolio pages part 2
  • Working with forms in React part 1
  • Working with forms in React part 2
  • Using Formik
  • Yup form validation schemas
Rest API with LoopbackJS
  • Setup of REST API using LoopbackJS
  • Creating models
  • Model observers
  • Model relations
  • ESLINT
  • Subclassing access tokens
  • Persisting data using MongoDB
  • Creating data
  • Updating data
  • Finding model instances part 1
  • Finding model instances part 2
  • Deleting model instances
  • Creating post collection
  • Roles and rolemapping
  • Applying access control to our post model
  • Adding an editor role
  • Creating a category model
  • File storage and collection part 1
  • File storage and collection part 2
  • Custom remote methods and file uploads part 1
  • Custom remote methods and file uploads part 2
  • Creating login route
  • Adding a login form
Redux and Material-UI
  • Wrapping components
  • Dispatching actions
  • Creating a store and reducer
  • Integrating remote API calls
  • Applying middleware
  • Material-UI intro
  • Drawer and CSS
  • Drawer collapsing and animations
  • Icons, lists and links
  • Main content class
  • Persisting reducers using localStorage
  • Basic tables
  • Fetching posts and users from our API
  • Fab buttons
  • Setting up Redux, Material-UI and Formik for our add post page
  • Material-UI forms with Formik
  • Flex display and connecting our post form to our database via Redux part 1
  • Flex display and connecting our post form to our database via Redux part 2
  • Editing existing posts
  • Uploading post images part 1
  • Uploading post images part 2
  • Integrating Quill as a content editor
  • Loading posts on the front-end part 1
  • Loading posts on the front-end part 2
  • Loading more posts on demand
  • Single post page
  • Registering new accounts
  • Posting comments and adding relations and ACLs to our API part 1
  • Posting comments and adding relations and ACLs to our API part 2
  • Deploying React apps with NGINX
  • Deploying our API using PM2 and NGINX part 1
  • Deploying our API using PM2 and NGINX part 2
  • Deploying our API using PM2 and NGINX part 3
WebSocket Chat Application
  • Creating a chat app
  • Creating our chat store
  • WebSocket connections
  • Sending socket messages
  • Creating signup and login forms
  • Writing account based logic part 1
  • Writing account based logic part 2
  • Using auth tokens
  • Styling the messenger
  • Tracking logged in users
  • Search functionality
  • Creating new threads and sending to relevant clients
  • Connecting on page load if already logged in
  • Get threads on page load
  • Disconnecting socket sessions
  • Adding messages and sending to relevant clients
  • Rendering messages client-side