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

📩 Want coding problems (with solutions!) delivered to your inbox daily!?
Sign Up Here: https://www.papareact.com/universityofcode

🚨 Upgrade your coding skills by joining the world’s BEST developer community & course “Zero to Full Stack Hero”: https://www.papareact.com/course

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!

🔴 LOOKING FOR THE CODE? 🛠️
https://links.papareact.com/github

👇🏻 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 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.

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