🔴 Let’s build a Web 3 Messenger Dapp with NEXT.JS! (ReactJS, Moralis, Tailwind CSS, MetaMask)

Sonny Sangha

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

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

Join me as I build a WEB3 MESSENGER DAPP with NEXT.JS. You’ll learn how to do the following in this build:

👉 How to build a Login and Logout Authentication flow with Metamask!
👉 How to implement your own random custom avatar!
👉 How to build a complete 1 – 1 Real Time Messaging Functionality using Moralis!
👉 How to finally 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:32 Build Showcase
03:57 Explaining Moralis
06:41 Setting up Moralis
07:43 Setting up Next.js & Tailwind CSS
10:15 Initialising the Build
13:47 Building the Login Component
27:11 Implementing Moralis
34:36 Implementing Login Functionality
39:31 Implementing Logout Functionality
40:13 Deploying to Vercel (1/2)
47:14 Planning out the Messaging Screen
52:34 Building the Header Component (1/3)
57:17 Building the Avatar Component
58:58 Implementing Random Custom Avatars
1:04:57 Building the Header Component (2/3)
1:08:05 Implementing Username Functionality
1:14:35 Building the Header Component (3/3)
1:19:09 Building the Messages Component (1/2)
1:23:24 Building the Send Message Component
1:28:42 Implementing Messaging Functionality
1:44:40 Building the Message Component
1:51:47 Implementing Timestamp Functionality
1:58:20 Deploying to Vercel (2/2)
2:00:39 Outro

Let’s get it PAPAFAM 🔥.

#web3 #reactjs #nextjs