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

Let's go over the things that we will do in this chapter.

In this lecture, you will learn how to create models and migrations with sequelize.

In this lecture, you will learn how to create seeders with sequelize.

In this lecture, you will learn how to hash user password before saving to the database using bcrypt hashing function.

Let's go over the things that we will do in this chapter.

In this lecture, we will create a more modular router with express. You will learn how to separate routes into logical files.

In this lecture, we will test our routes with Postman to make sure that they are accessible. You will learn how to pass parameters with requests.

In this lecture, we will create Auth controller. You will learn how to check hashed passwords and login user.

In this lecture, you will learn how to generate JWT (JSON Web Token) for the user.

In this lecture, we will finish the registration functionality. You will also learn how to generate a stronger secret key for the token.

In this lecture, we will add form validation on user requests. You will learn how to validate user input with dedicated validator files.

Let's go over the things that we will do in this chapter.

In this lecture, we will create a chat app react project and create a starting app structure.

Let's go over the things that we will do in this chapter.

In this lecture, you will learn how to create first components in react. We will also add router to our react app.

In this lecture, we will start working on the Login component.

In this lecture, we will add styles to our Auth components. You will learn how to write scss inside react application.

In this lecture, we will create and style Register component.

In this lecture, we will make our components responsive by adding a couple of media queries.

In this lecture, we will install Axios and make the first request towards our server.

In this lecture, we will create Axios base configuration where we will save the base URL and default headers. You will also learn how to modularize ajax calls into services. 

Let's go over the things that we will do in this chapter.

In this lecture, you will learn more about Redux and we will go over some key concepts of Redux.

In this lecture, we will install Redux package. You will learn how to create async actions in Redux using Thunk middleware.

In this lecture, you will learn how to create a reducer, set the initial state, and update the state.

In this lecture, you will learn how to create Redux store instance and make it available to our application.

In this lecture, we will dispatch an action that logs in the user. You will learn how to retrieve user from the state and display inside component.

In this lecture, we will update our register component and save user information once the user has registered.

In this lecture, you will learn how to create a protected route so that only logged in users can access it.

Let's go over the things that we will do in this chapter.

In this lecture, we will create a navbar component where we will display the user name and a dropdown with options for the user to update profile information and logout.

In this lecture, we will add a user default image so that we always return either a male or female avatar depending on user gender.

In this lecture, we will install Font Awesome Icons and include a couple of them inside our project.

In this lecture, we will create a navbar dropdown. We will also logout the user from the application.

In this lecture, you will learn how to persist user information inside browser local storage and automatically login the user if something is saved inside of it.

In this lecture, you will learn how to create a custom modal component where you can pass data into it and decide where to render it.

In this lecture, we will finish our custom modal component.

In this lecture, we will add inputs to our update profile modal so the user can change his profile details.

In this lecture, you will learn how to create an auth middleware inside node. Auth middleware checks whether the token is present with the request and checks whether it is a valid token.

In this lecture, we will create a user controller and an update method that saves new user details.

In this lecture, you will learn how to upload an image with a node. We will create a custom folder structure for images and perform validation on the uploaded file.

In this lecture, we will finish our node image upload.

In this lecture, we will update user avatar from react modal.

In this lecture, we will create an Axios interceptor so we can check for token expired events.

Let's go over the things that we will do in this chapter.

In this lecture, we will go over our chat database so we have a more clear picture of the new tables and relations between models.

In this lecture, we will create all our chat models.

In this lecture, we will create a seeder file for our new models so we always have some data inside our database.

In this lecture, we will create an index method and a route for our chats. You will learn how to return chats for the user together with chat messages.

In this lecture, you will learn how to create a new chat by writing a method inside Chat Controller.

In this lecture, we will create a simple pagination for chat messages where you can customize how many records you return and so on.

In this lecture, we will create a delete chat method which removes the chat from the database.

Let's go over the things that we will do in this chapter.

In this lecture, we will fetch chats by making an api call and save inside our store.

In this lecture, we will start building initial chat components.

In this lecture, we will finish our friend list component. We will render all friends from our chats.

In this lecture, we will start working on messenger component where we will display chat information, render messages, and send new message.

In this lecture, we will add details to our chat header. We will display users from the chat and create a dropdown with some chat options.

In this lecture, we will render our chat messages. We will apply conditional styling depending on who created the message.

In this lecture, we will start working on our message input component.

Let's go over the things that we will do in this chapter.

In this lecture, we will install socket.io and create our first socket event.

In this lecture, we will install socket.io in our React app. We will emit an event to backend and listen for a response.

In this lecture, you will learn how to keep a list of connected users and we will add some additional logic to join event.

In this lecture, you will learn how to write a raw query with sequelize. We need to grab ID's of all friends that a user is chatting with.

In this lecture, we will remove user from our users map once he disconnects from the application.

In this lecture, we will add new event listeners inside our React app and test if we receive data properly on them.

In this lecture, we will update our store with online friends.

In this lecture, we will update friend status when they come online or go oflline.