Build And Deploy A React Chat App With Chatengine.io
Автор: PortEXE
Загружено: 2020-12-30
Просмотров: 13757
This is going to be a huge tutorial series for those interested in React. We will be building a complete Chat application using Chatengine.io, Firebase, React, and we will be deploying it to Vercel. So you'll have the opportunity to work through the entire development lifecycle!
#Chatengine #ReactChat #React2021
0:00 Intro
11:50 Part 1: Setup
42:15 Part 2: Routing
50:25 Part 3: Serverless Functions
1:07:17 Part 4: Formik
1:43:02 Part 5: Firebase
2:20:05 Part 6: Context API
2:36:15 Part 7: Chatengine
2:46:26 Part 8: Chat List
3:28:51 Part 9: Adding Users
3:59:12 Part 10: Sending Messages
4:33:14 Part 11: Sending Images
4:50:14 Part 12: Uploading Avatars
5:06:14 Part 13: Deploying To Vercel
Her are some links for you:
Beginner React Tutorial: • Beginner React Tutorial - Coding A Todo Li...
How React Works Under The Hood: • How a React App Works Under the Hood
React Hooks Tutorial: • Learn React Hooks In 6 Minutes
GitHub Repo: https://github.com/portexe/react-chat...
Below are the individual resources for each individual part of the course:
---
Part 1:
In this video we will clone the boilerplate react app and install the dependencies. We have to set up out chatengine.io and firebase accounts, and go through the initial setup of the project.
---
Part 2:
First thing we need to do is set up the React Router so that we can easily route between the different pages in our single page application.
---
Part 3:
We don't want to expose our private key to the client. This would bring huge security issues. In this video we set up a serverless function that utilizes the app secret to create new chat users.
Check out this video to learn more about API keys and security: • How to Hide Your API Keys
---
Part 4:
Formik allows us to handle forms in a very elegant and easy-to-understand way. Alongside Formik we will be using Yup for our login and signup form validations.
---
Part 5:
Now is a great time to go ahead and hook up our login/signup forms to Firebase and Chatengine. We will use Firebase to handle authentication and then we will use the firebase callback to handle the API call to our createUser serverless function.
Learn React Hooks In 6 Minutes: • Learn React Hooks In 6 Minutes
---
Part 6:
We'll create a shared Context using the React Context API in order to share state across multiple components.
---
Part 7:
Here we will begin hooking into the Chat engine events
Download The Image Here: https://github.com/portexe/react-chat...
---
Part 8:
Now that we have the framework laid out, we can begin updating our UI with our chat data. Today we will focus on displaying a list of chats for the logged in user.
---
Part 9:
Before we start sending chat messages, we need the ability to search for users and add them to chats
---
Part 10:
Now we can begin sending chat messages between users. Things are starting to come together!
---
Part 11:
We can send text chat messages, but now we will create the ability for users to send images
---
Part 12:
To finish up, we want to be able to let users upload an avatar. We will use Firebase to store the user avatars.
---
Part 13:
Finally let's push this project to production via Vercel!
Доступные форматы для скачивания:
Скачать видео mp4
-
Информация по загрузке:
