Uthena

Course 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.

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!


Who this course is for:
  • Web development students interested in mastering JavaScript.


Requirements:

  • A basic understanding of HTML, CSS and JavaScript.


What you'll learn:

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

Course curriculum

  • 1

    Introduction and Setup

  • 2

    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
  • 3

    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
  • 4

    Building a Rest API with LoopbackJS

    • Setup of REST API using LoopbackJS

    • Creating models

    • Model observers

    • Model relations

    • ESLINT

    • Sub-classing 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
  • 5

    Redux and Material-UI

    • Wrapping components

    • Dispatching actions

    • Creating our store and reducers

    • Integrating remote API calls

    • Applying middleware

    • Material-UI intro

    • Drawer and CSS

    • Drawer collapsing and animations

    • Icons, lists, 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
  • 6

    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

Meet your instructor!

Joseph Delgadillo
Best-Selling Instructor

The digital age is upon us. Would you like to build/protect the systems that shape our future?

I am here on Uthena to produce valuable educational resources for students who wish to learn skills related to information technology, network security, programming languages and much more. Enroll in one of my courses for a practical, down to earth approach to learning.

Take this course today!

"The Complete Full-Stack JavaScript Course!"

More courses

You may like these other courses by JTDigital Courses.

Bundle including this course!