Udemy

Node.js and React: Build a complete web chat application

Enroll Now
  • 13,502 Students
  • Updated 11/2020
4.3
(270 Ratings)
CTgoodjobs selects quality courses to enhance professionals' competitiveness. By purchasing courses through links on our site, we may receive an affiliate commission.

Course Information

Registration period
Year-round Recruitment
Course Level
Study Mode
Duration
9 Hour(s) 33 Minute(s)
Language
English
Taught by
Dino Numić
Rating
4.3
(270 Ratings)
4 views

Course Overview

Node.js and React: Build a complete web chat application

Learn how to build a chat application using Node.js and React with Web Sockets, PostgreSQL, Redux and much more.

By enrolling and finishing this course you will know how to build a full real-time web chat application. We will go together, through every step of the way, so it is not a limiting factor if you don’t have much experience with all of the technologies that we are going to use.


Here are, summarized, some of the things you will learn throughout this course.


  1. Install Node and create a simple project structure

    • You will learn how to initialize a new npm project. Enable node watcher and project hot reload where changes are automatically applied. Set project environmental variables, configuration files, and dynamic project structure.


  2. Install PostgreSQL and general database management

    • You will learn how to install PostgreSQL alongside pgAdmin (database management tool). You will also learn how to use sequelize (Object Relational Mapping) for creating models, tables, seeders, and performing SQL queries.


  3. Create Node authentication with JWT tokens

    • You will learn how to hash user passwords, generate JSON web tokens, create auth middleware, and control how users can consume your API.

    • You will also learn how to create custom form request validators for handling user input


  4. Custom file upload

    • You will learn how to upload files with multer, generate a custom upload folder, and perform file validation before upload.


  5. Create new React application with Redux and Router

    • You will learn how to create a new React application. Add Redux for state management and Router for application navigation.

    • You will learn how to create async store actions and properly update state inside reducers

    • You will learn how to create Protected Routes, create Axios base configuration, and use services Axios calls.


  6. Implement Web Sockets

    • You will learn how to implement sockets in Node and also in React application. How to achieve real-time communication, emit, and listen to events between server and client.


  7. You will have fun

    • You will have a fun time learning so many different things at the same time. Although it can sometimes be a bit overwhelming, you will enjoy the challenges of learning something cool and popular in today's real-time world.


Course Content

  • 10 section(s)
  • 103 lecture(s)
  • Section 1 Installing and configuring Node and setting up Database
  • Section 2 Creating user model, migration, and seeder
  • Section 3 Refactoring node router and adding Authentication
  • Section 4 Creating react application and setting project structure
  • Section 5 Creating Auth components and authentication user
  • Section 6 Adding Redux and working on Auth features
  • Section 7 Creating chat navbar and updating user profile
  • Section 8 Creating chat models and Controller
  • Section 9 Creating chat components
  • Section 10 Implementing Web Sockets

What You’ll Learn

  • Modularize Node project
  • Create models. migrations, seeders in postgreSQL with Sequelize
  • Backend and Frontend Authentication system
  • Achieve real-time communication with Web Sockets
  • React, Redux, React Router Dom
  • Custom image upload with Node


Reviews

  • W
    Wisut Tangchittiphokhin
    5.0

    short and clear explanation.

  • S
    Sombat Mayer
    3.0

    the course is awesome! but some dependencies are not up-to-date. there are many errors with dependencies in v6 when tries to follow the guides, so i can't follow to finish the course. I'd be nice if the course get updated. Also, the code files after each section for students to compare the codes.

  • M
    Michael Hoareau
    5.0

    only point to be improved, for me, is the react router dom update to v6. ... directly being managed in the , and for example slight differences like 'element props:<.../>' instead of 'component props' . cant wait to go further. good alternative, as forms are often been used in register/updateProfile Ux actions: take advantages of YUP + formik !

  • A
    Akim Adams
    3.5

    The app is impressive and worth the effort. If you're coding along you would get stuck if you're using newer package versions, so be sure to install only the versions that the author is using. You may find them listed in the package.json of the completed project. The code is pragmatic and straightforward, but it can be hard to understand the concepts if you're new to react as there aren't that many slides explaining the theory behind the code. One quick improvement I can add to the presentation is to avoid using words like "here" when referencing a file or a line in the code. When coding along it is easy to get lost so it would help if the author says out-loud the specific object or function they're referencing. Other than that and a few minor issues, it's a great course!

Start FollowingSee all

We use cookies to enhance your experience on our website. Please read and confirm your agreement to our Privacy Policy and Terms and Conditions before continue to browse our website.

Read and Agreed