Build And Deploy A React Chat App With Chatengine.io
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!
![React Tutorial For Beginners [ReactJS] | ReactJS Course | ReactJS For Beginners | Intellipaat](https://i.ytimg.com/vi/9vZ8ELqerPo/hqdefault.jpg?sqp=-oaymwEjCNACELwBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLB_hhLXovYNLtVk2BabJ2yfQPTMuw)
React Tutorial For Beginners [ReactJS] | ReactJS Course | ReactJS For Beginners | Intellipaat

🔴 Build a Slack Clone in React JS (Realtime chat app using Firebase)

Build and Deploy a React Admin Dashboard App With Theming, Tables, Charts, Calendar, Kanban and More

System Design Explained: APIs, Databases, Caching, CDNs, Load Balancing & Production Infra

Anthropic is Completely F*cked.

Google Just Ruined Search, So I Tested Every Alternative.

Building an AI Dark Factory: A Codebase That Writes Its Own Code, Live

Full MERN Website React Nodejs w/ GraphQL Tailwind and Docker From Zero To Deployment + GIVEAWAY

I built a chat app in 7 minutes with React & Firebase

Build a Secure Realtime Chat App in React Native (tutorial for beginners) 🔴

Beginner Next.js Tutorial - Coding A News App With Next.js

Build a Design System - Full Course

Build and Deploy Claude Skills and MCP Servers | The Complete 2026 Guide

Build a Complete Medical Chatbot with LLMs, LangChain, Pinecone, Flask & AWS 🔥

Build and Deploy a Full Stack Realtime Chat Messaging App with NextJS 13

Build and Deploy a Google Maps Travel Companion Application | React.js

Learn React With This ONE Project

Build a Portfolio Website With React & Sanity.io

Chat Application using React JS - Build and Deploy a Chat App in 1 Hour (Microsoft Teams)

