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