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

Course Curriculum

Chapter 1: Installing and configuring Node and setting up Database

Lecture 1: Chapter Introduction

Lecture 2: Installing node and npm

Lecture 3: Creating node project

Lecture 4: Installing express

Lecture 5: Installing nodemon

Lecture 6: Resolve visual studio code access rights problems when executing commands

Lecture 7: Creating env and config files

Lecture 8: Creating basic project structure

Lecture 9: Installing PostgreSQL, pgAdmin, and Sequelize

Chapter 2: Creating user model, migration, and seeder

Lecture 1: Chapter Introduction

Lecture 2: Creating user model and migration

Lecture 3: Creating user seeder file

Lecture 4: Hashing user passwords with bcrypt

Chapter 3: Refactoring node router and adding Authentication

Lecture 1: Chapter Introduction

Lecture 2: Initial router

Lecture 3: Testing routes with Postman and parsing request body

Lecture 4: Creating Auth controllers and loging in users

Lecture 5: Generating JWT (json web token)

Lecture 6: Finishing register functionality and creating proper secret key

Lecture 7: Adding server side form request validation

Chapter 4: Creating react application and setting project structure

Lecture 1: Chapter Introduction

Lecture 2: Installing React App and setting project structure

Chapter 5: Creating Auth components and authentication user

Lecture 1: Chapter Introduction

Lecture 2: App styles and assets

Lecture 3: Creating initial components and adding React Router

Lecture 4: Creating login component

Lecture 5: Styling login component and installing scss parser

Lecture 6: Creating and styling register component

Lecture 7: Making component styles responsive

Lecture 8: Authenticating user with axios

Lecture 9: Adding axios base configuration and creating API services

Chapter 6: Adding Redux and working on Auth features

Lecture 1: Chapter Introduction

Lecture 2: Redux overview

Lecture 3: Installing Redux and creating auth actions

Lecture 4: Creating auth reducer

Lecture 5: Creating Redux store

Lecture 6: Saving user details inside store

Lecture 7: Finish user registration

Lecture 8: Adding protected route

Chapter 7: Creating chat navbar and updating user profile

Lecture 1: Chapter Introduction

Lecture 2: Creating chat Navbar with style

Lecture 3: Adding user default avatar image

Lecture 4: Adding font awesome icons

Lecture 5: Creating dropdown and logout

Lecture 6: Persisting logged in user in local storage

Lecture 7: Creating custom modal component

Lecture 8: Finishing custom modal component

Lecture 9: Updating user profile form

Lecture 10: Creating auth middleware in Node

Lecture 11: Creating update method in controller and testing with Postman

Lecture 12: Creating Node file upload

Lecture 13: Creating Node file upload finishing and testing

Lecture 14: Uploading user avatar from modal form

Lecture 15: Creating axios interceptor

Chapter 8: Creating chat models and Controller

Lecture 1: Chapter Introduction

Lecture 2: Database overview

Lecture 3: Creating Chat, ChatUser, Message model and migrations

Lecture 4: Creating chat seeder file

Lecture 5: Creating chat controller and index function

Lecture 6: Creating new chat function

Lecture 7: Creating chat messages pagination

Lecture 8: Creating delete chat function

Chapter 9: Creating chat components

Lecture 1: Chapter Introduction

Lecture 2: Fetching chats and saving in store

Lecture 3: Creating chat initial UI

Lecture 4: Finishing Friend List component

Lecture 5: Adding messenger

Lecture 6: Working on chat header and displaying user information

Lecture 7: Rendering chat messages

Lecture 8: Creating message input

Chapter 10: Implementing Web Sockets

Lecture 1: Chapter Introduction

Lecture 2: Adding sockets in Node

Lecture 3: Adding sockets in React and testing connection

Lecture 4: Adding socket on join event

Lecture 5: Creating get chatters query

Lecture 6: Disconnect user socket

Lecture 7: Testing new socket events

Lecture 8: Updating state of all online friends

Lecture 9: Updating friend status when they come online or go offline

Chapter 11: Sending Chat messages

Lecture 1: Chapter Introduction

Lecture 2: Emiting send message from React to Node

Lecture 3: Emiting receive event from Node to React

Lecture 4: Auto scrolling message box

Lecture 5: Handling chat image upload in Node

Lecture 6: Uploading chat image from React

Lecture 7: Adding chatter typing bubble

Lecture 8: Adding emoji picker

Chapter 12: Fetching old chat messages with infinite scrolling

Lecture 1: Chapter Introduction