How To Create A Messaging App With Socket.io And React

How To Create A Messaging App With Socket.io And React

🚨 IMPORTANT:

Get started with Embold.io for free: https://embold.io/products/overview?utm_source=Youtube&utm_medium=Video&utm_campaign=Web_Dev_Simp_Sep20
Use code US21F29A for 20% off a paid account (Only applicable in India)

Whatsapp is an incredibly popular application, but the technology behind it is actually pretty simple. In this video I will show you how to create a messaging app similar to Whatsapp with React.

📚 Materials/References:

GitHub Code: https://github.com/WebDevSimplified/Whatsapp-Clone
useRef Tutorial: https://youtu.be/t2ypzz6gJm0
useState Tutorial: https://youtu.be/O6P86uwfdR0
useContext Tutorial: https://youtu.be/5LrDIWkK_Bc

🧠 Concepts Covered:

– How to use Socket.io
– How to create custom React hooks
– How to create custom React contexts

🌎 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:34 – Demo
00:02:20 – Code Setup
00:03:51 – Login Page
00:13:47 – Custom Local Storage Hook
00:18:50 – Dashboard
00:20:21 – Sidebar
00:29:50 – Create Contact Modal
00:36:01 – Contact Context
00:41:18 – Contacts Sidebar
00:43:01 – Conversation Modal
00:48:43 – Conversation Context
00:54:12 – Conversation Sidebar
00:59:11 – Current Conversation Component
01:04:50 – Send Message
01:13:45 – Displaying Messages
01:23:43 – Server Setup
01:28:28 – Socket.io On Client
01:37:26 – Outro

#Reactjs #WDS #WhatsappClone

Powered by WPeMatico

About Guaripete Solutions

Guaripete Solutions SEO Agency in Charlotte North Carolina, with personalized SEO Consulting Services, Small and Medium Business Social Media Marketing Services, and Website Builder Experts oriented to our Customers.