How To Build A Chat App With React And Stream

Build cross-platform messaging experiences with Stream Chat API. Sign up for Stream’s 30 day trial for free: https://gstrm.io/webdevsimplified

Building a chat application is hard, especially if you want it to be a robust and full featured app similar to Facebook Messenger. In this video I will show you how you can use Stream to build out an incredibly robust chat system with ease.

📚 Materials/References:

GitHub Code: https://github.com/WebDevSimplified/facebook-messenger-clone
React Router Video: https://youtu.be/Ul3y1LXxzdU
React Router Article: https://blog.webdevsimplified.com/2022-07/react-router
forwardRef Video: https://youtu.be/zpEyAOkytkU?t=97
forwardRef Article: https://blog.webdevsimplified.com/2022-06/use-imperative-handle/#reactforwardref
React Query Video: https://youtu.be/r8Dg0KVnfMA
CORS Video: https://youtu.be/PNtFSVU-YTI
CORS Article: https://blog.webdevsimplified.com/2021-05/cors
useLocalStorage Hook Video: https://youtu.be/vrIxu-kfAUo
useLocalStorage Hook Video: https://blog.webdevsimplified.com/2019-11/how-to-write-custom-hooks/#uselocalstorage-hook

🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified

⏱️ Timestamps:

00:00:00 – Introduction
00:00:30 – Demo
00:02:33 – Server Setup
00:06:21 – Client Setup
00:12:38 – Client Signup Page
00:31:48 – Server Signup Route
00:38:15 – Client Server Connection
00:44:23 – Client Login Page
00:47:17 – Server Login Route
00:49:20 – Client Finish Auth
01:00:54 – Client Chat Page
01:06:29 – Customizing Channel List
01:15:42 – Client Logout Implementation
01:17:54 – Server Logout Route
01:21:17 – Client New Conversation Page

#ChatApp #WDS #Stream