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

Sonny Sangha

๐Ÿšจ Join the worldโ€™s BEST developer community โ€œZero to Full Stack Heroโ€ NOW: https://www.papareact.com/course

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

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