Mô tả

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.


Bạn sẽ học được gì

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

Yêu cầu

  • Basic understanding of Javascript (functions, callbacks, objects, promises, ES6+)
  • Some familiarity with Node and React

Nội dung khoá học

14 sections

Installing and configuring Node and setting up Database

9 lectures
Chapter Introduction
00:23
Installing node and npm
01:42
Creating node project
01:32
Installing express
02:35
Installing nodemon
01:58
Resolve visual studio code access rights problems when executing commands
00:58
Creating env and config files
05:01
Creating basic project structure
01:50
Installing PostgreSQL, pgAdmin, and Sequelize
09:26

Creating user model, migration, and seeder

4 lectures
Chapter Introduction
00:18
Creating user model and migration
05:23
Creating user seeder file
03:56
Hashing user passwords with bcrypt
02:48

Refactoring node router and adding Authentication

7 lectures
Chapter Introduction
00:21
Initial router
02:57
Testing routes with Postman and parsing request body
04:32
Creating Auth controllers and loging in users
07:36
Generating JWT (json web token)
04:17
Finishing register functionality and creating proper secret key
08:29
Adding server side form request validation
09:21

Creating react application and setting project structure

2 lectures
Chapter Introduction
00:08
Installing React App and setting project structure
03:45

Creating Auth components and authentication user

9 lectures
Chapter Introduction
00:21
App styles and assets
00:05
Creating initial components and adding React Router
07:02
Creating login component
03:48
Styling login component and installing scss parser
08:42
Creating and styling register component
05:04
Making component styles responsive
04:23
Authenticating user with axios
07:30
Adding axios base configuration and creating API services
05:34

Adding Redux and working on Auth features

8 lectures
Chapter Introduction
00:19
Redux overview
01:46
Installing Redux and creating auth actions
04:26
Creating auth reducer
04:37
Creating Redux store
04:57
Saving user details inside store
05:58
Finish user registration
07:53
Adding protected route
04:49

Creating chat navbar and updating user profile

15 lectures
Chapter Introduction
00:22
Creating chat Navbar with style
09:33
Adding user default avatar image
07:11
Adding font awesome icons
02:32
Creating dropdown and logout
07:53
Persisting logged in user in local storage
05:18
Creating custom modal component
07:02
Finishing custom modal component
04:42
Updating user profile form
05:12
Creating auth middleware in Node
09:44
Creating update method in controller and testing with Postman
06:11
Creating Node file upload
14:37
Creating Node file upload finishing and testing
05:53
Uploading user avatar from modal form
06:50
Creating axios interceptor
04:22

Creating chat models and Controller

8 lectures
Chapter Introduction
00:24
Database overview
01:09
Creating Chat, ChatUser, Message model and migrations
12:47
Creating chat seeder file
04:48
Creating chat controller and index function
07:41
Creating new chat function
11:52
Creating chat messages pagination
06:19
Creating delete chat function
03:39

Creating chat components

8 lectures
Chapter Introduction
00:14
Fetching chats and saving in store
09:31
Creating chat initial UI
06:05
Finishing Friend List component
11:18
Adding messenger
04:42
Working on chat header and displaying user information
09:10
Rendering chat messages
11:39
Creating message input
09:20

Implementing Web Sockets

9 lectures
Chapter Introduction
00:17
Adding sockets in Node
03:34
Adding sockets in React and testing connection
05:12
Adding socket on join event
09:19
Creating get chatters query
09:06
Disconnect user socket
06:41
Testing new socket events
02:18
Updating state of all online friends
05:35
Updating friend status when they come online or go offline
07:13

Sending Chat messages

8 lectures
Chapter Introduction
00:16
Emiting send message from React to Node
07:36
Emiting receive event from Node to React
10:01
Auto scrolling message box
03:45
Handling chat image upload in Node
03:28
Uploading chat image from React
11:22
Adding chatter typing bubble
09:11
Adding emoji picker
07:48

Fetching old chat messages with infinite scrolling

4 lectures
Chapter Introduction
00:17
Fetching chat paginated messages
07:04
Saving paginated messages in store
10:46
Adding new message notification
08:38

Creating chat, Adding user to group chat, Leaving chat, Deleting chat

11 lectures
Chapter Introduction
00:28
Creating Add Friend Modal
05:29
Searching friends on our backend
05:07
Searching friends from chat Modal
02:53
Calling create new chat API and refactoring create chat method inside controller
09:05
Receiving new chat event and updating redux
05:31
Adding user to existing chat backend
14:45
Adding user to existing chat frontend
08:42
Leaving group chat backend
09:01
Leaving group chat updating redux
09:02
Deleting chat
09:20

Last words

1 lectures
Last words and complete project
00:19

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.