🔴 Let's build a Real-Time 1-to-1 Chat App with NEXT.JS! (Live Status, Styled-Components, React)

🚨 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 Check out Hostinger 👉 https://www.hostinger.com/sonny SPECIAL DISCOUNT: Use code SONNY for 7% OFF Annual Plans! Join me as I build Real-Time 1-to-1 Chat App 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

Next.js Tutorial 2026 (UPDATED) - Full Course - Start Your Next.js Journey Here
▶︎

Next.js Tutorial 2026 (UPDATED) - Full Course - Start Your Next.js Journey Here

🔴 Let's build a Delivery Driver App w/ REACT NATIVE! (Navigation, Redux, TS, Google Autocomplete)
▶︎

🔴 Let's build a Delivery Driver App w/ REACT NATIVE! (Navigation, Redux, TS, Google Autocomplete)

Data Analytics for Beginners | Data Analytics Training | Data Analytics Course | Intellipaat
▶︎

Data Analytics for Beginners | Data Analytics Training | Data Analytics Course | Intellipaat

S13 E15: Iran, FIFA & UK Elections: 6/14/26: Last Week Tonight with John Oliver
▶︎

S13 E15: Iran, FIFA & UK Elections: 6/14/26: Last Week Tonight with John Oliver

Building an AI Dark Factory:  A Codebase That Writes Its Own Code, Live
▶︎

Building an AI Dark Factory: A Codebase That Writes Its Own Code, Live

Building AI Agents that actually work! (1 Hour Redis Masterclass)
▶︎

Building AI Agents that actually work! (1 Hour Redis Masterclass)

🔴 Lets build a Real-Time Messaging App with Next.js! (Video Calling, Group Chats, Stream, Clerk, TS)
▶︎

🔴 Lets build a Real-Time Messaging App with Next.js! (Video Calling, Group Chats, Stream, Clerk, TS)

Real-Time WebSockets Course | Build a Live Sports Dashboard with Node.js & PostgreSQL
▶︎

Real-Time WebSockets Course | Build a Live Sports Dashboard with Node.js & PostgreSQL

🟢 Let's Build a Notion Clone with Opus 4.8! | Beginner Series Ep #10 (Ultracode, AI Agents, Clerk)
▶︎

🟢 Let's Build a Notion Clone with Opus 4.8! | Beginner Series Ep #10 (Ultracode, AI Agents, Clerk)

Building an AI-Powered Calorie Tracker with React Native, Expo & Google Gemini
▶︎

Building an AI-Powered Calorie Tracker with React Native, Expo & Google Gemini

11 New JS Features You Can Use Today!
▶︎

11 New JS Features You Can Use Today!

How to Actually Build Mobile Apps with AI in 2026 | A Complete Beginner's Tutorial
▶︎

How to Actually Build Mobile Apps with AI in 2026 | A Complete Beginner's Tutorial

Build a SaaS Dashboard in Next.js with Shadcn UI & Charts #nextjs #reactjs #dashboard
▶︎

Build a SaaS Dashboard in Next.js with Shadcn UI & Charts #nextjs #reactjs #dashboard

Let's build WhatsApp with React Native (tutorial for beginners) 🔴
▶︎

Let's build WhatsApp with React Native (tutorial for beginners) 🔴

Next js Tutorial for Beginners | Nextjs 13 (App Router) with TypeScript
▶︎

Next js Tutorial for Beginners | Nextjs 13 (App Router) with TypeScript

I turned an old van into a 2-STORY tiny house
▶︎

I turned an old van into a 2-STORY tiny house

🟢 Let's Vibe Code a Social Media Platform with AI! | Beginner Series Ep #8 (Cursor, Clerk Billing)
▶︎

🟢 Let's Vibe Code a Social Media Platform with AI! | Beginner Series Ep #8 (Cursor, Clerk Billing)

SolidWorks Tutorial #321 : Car Engine complete video (2 turbo V6) - (advanced assembly)
▶︎

SolidWorks Tutorial #321 : Car Engine complete video (2 turbo V6) - (advanced assembly)

Niederlande – Japan Highlights | Gruppe F, FIFA WM 2026 | sportstudio
▶︎

Niederlande – Japan Highlights | Gruppe F, FIFA WM 2026 | sportstudio

🔴 Let’s build a WEB SCRAPER with React! (Next.js 13.2, Firebase, Webhooks, TypeScript, Bright Data)
▶︎

🔴 Let’s build a WEB SCRAPER with React! (Next.js 13.2, Firebase, Webhooks, TypeScript, Bright Data)