πŸ”΄ Let’s build a Whatsapp Clone with NEXT.JS! (1-1 Messaging, Live Status, Styled-Components, React)

Sonny Sangha

🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: https://www.papareact.com/course

πŸ«‚ Join my Community, “University of Code” for FREE: https://www.universityofcode.com

πŸ”΄ LOOKING FOR THE CODE? πŸ› οΈ
https://links.papareact.com/github

πŸ“© Want coding problems (with solutions!) delivered to your inbox daily? https://www.papareact.com/dailycodingchallenges

Check out Hostinger πŸ‘‰ https://www.hostinger.com/sonny
SPECIAL DISCOUNT: Use code SONNY for 7% OFF Annual Plans!

Join me as I build Whatsapp 2.0 with NEXT.JS! (with 1-1 Messaging, Live Status, React.js & Styled-Components) || πŸ”₯ Powered by Firebase!

πŸŽ™οΈ PODCAST
https://links.papareact.com/podcast

🌍 SOCIALS:
Instagram: https://links.papareact.com/instagram
Facebook: https://links.papareact.com/facebook
LinkedIn: https://links.papareact.com/linkedin
Twitter: https://links.papareact.com/twitter
Discord: https://links.papareact.com/discord
Newsletter: https://links.papareact.com/newsletter

❀️ SUPPORT
PAPA Merch: https://links.papareact.com/merch
Donate: https://links.papareact.com/donate

πŸ• TIMESTAMPS:
00:00 Introduction
00:35 Build Showcase
02:15 Hostinger Sponsorship
05:07 Next.js Introduction
05:59 Starting the Build
07:43 Tabnine Sponsorship
11:00 Continuing the Build
15:42 Implementing Styled Components
17:56 Creating the chat.js Page
21:03 Building the Sidebar Component (1/3)
48:30 Setting up Firebase
49:41 Setting up Firestore Database
56:25 Building the Sidebar Component (2/3)
1:03:57 Building the login.js Page
1:15:49 Building the Loading Component
1:20:54 Capturing and Storing User’s Details
1:26:17 Building the Sidebar Component (3/3)
1:40:46 Building the Chat Component (1/2)
1:46:08 Building the getRecipientEmail Function
1:56:54 Building the Chat Component (2/2)
2:00:28 Building the [id] Component
2:22:37 Building the ChatScreen Component (1/3)
2:40:50 Creating the Message Component
2:41:53 Building the ChatScreen Component (2/3)
3:18:18 Building the Message Component
3:24:28 Building the ChatScreen Component (3/3)
3:27:57 Final Build Demo
3:28:53 Deploying to Vercel
3:37:22 Hosting on Hostinger
3:46:28 Outro

DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with WhatsApp and it’s subsidiaries in any form. Copyright Disclaimer under section 107 of the Copyright Act 1976, allowance is made for β€œfair use” of this video for education purposes.

#reactjs #nextjs #whatsapp