🔴 Let’s build a Realtime Messenger with Next.js 13 (Upstash, TypeScript, Redis, Tailwind, NextAuth)

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

Join me as I build a Real Time Messenger App with Next.js 13. You’ll learn how to do the following in this build:

👉 How to build a Real-Time Messenger App (w/ group chat!) using Upstash, Pusher & Redis!
👉 How to build a Login and Logout Authentication flow using NextAuth & Facebook on Next.js 13!
👉 Implement a Pub/Sub backend using Pusher to enable real-time sync for messages!
👉 Create your own Next.js API routes
👉 Learn to use the SWR library to efficiently fetch/cache and update data!
👉 Leverage the power of Server components in Next.js 13!
👉 How to deploy the final build on Vercel!

+ So Much More!

👇🏻 FOLLOW ME HERE:
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

💰 WANT TO SUPPORT THE CHANNEL?
Donate here: https://links.papareact.com/donate
Grab some PAPA Merch: https://links.papareact.com/merch

🕐 TIMESTAMPS:
00:00 Introduction
01:00 Build Showcase
03:13 Upstash Sponsorship
05:32 Build Tech
09:21 Setting Up Next.js 13 & Tailwind CSS
19:54 Planning Out The Build
20:44 Building the Header Component
37:57 Creating the Message List Component
38:46 Building the Chat Input Component (1/4)
47:55 Setting up Upstash
55:47 Implementing UUID Library
57:22 Building the Chat Input Component (2/4)
1:00:35 Setting up Type Definitions for TypeScript
1:01:55 Building the Chat Input Component (3/4)
1:03:26 Building the Add Message API Endpoint using Redis
1:10:41 Explaining and Implementing SWR
1:17:55 Building the Get Messages API Endpoint
1:21:32 Building the Chat Input Component (3/4)
1:29:29 Building the Message List Component
1:33:22 Building the Message Component
1:48:02 Explaining and Implementing Pusher
2:07:35 Implementing SSR with Next.js 13 (1/2)
2:15:44 Implementing the Loading Functionality
2:20:58 Implementing NextAuth Authentication with Facebook (1/2)
2:24:36 Creating a Facebook App for Authentication
2:31:28 Implementing the Sign In Functionality (with 2 Different Approaches)
2:47:43 Implementing the Sign Out Functionality
2:49:41 Implementing SSR with Next.js 13 (2/2)
2:59:03 Implementing Timestamp Functionality
3:00:48 Explaining and Implementing Middleware
3:04:06 Final Build Demo & Explanation
3:09:18 Outro

Let’s get it PAPAFAM 🔥.

DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Meta and its subsidiaries in any form. Copyright Disclaimer Under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for educational purposes.

#nextjs13 #reactjs #typescript #redis #upstash #javascript #pusher #pubsub