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 ... https://www.youtube.com/watch?v=tBr-PybP_9c