Learn full-stack web development using JavaScript (ReactJS, NodeJS, LoopbackJS, Redux and Material-UI)!
☑ Full-stack JavaScript
☑ ReactJS
☑ NodeJS
☑ Rest API with LoopbackJS
☑ Redux
☑ Material-UI
☑ Socket Programming
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.
All of the lectures are downloadable for offline viewing. English captions are available within the course.
Thank you for taking the time to read this and we hope to see you in the course!
English
Language
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
Writing a calculator part 1
Writing 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 NGINIX part 1
Deploying our API using PM2 and NGINIX part 2
Deploying our API using PM2 and NGINIX 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
Rendering messages with user information
Ejecting a React application