Real-Time Messenger Clone: Next.js 13, React, Tailwind, Prisma, MongoDB, NextAuth, Pusher (2023)

Avatars from: www.freeimages.com/photograph...
Discord for any problems/errors/bugs: www.codewithantonio.com/discord
Github & Live Website: www.codewithantonio.com/proje...
Special thanks to Josh Tried Coding from which I got inspiration to use Pusher since Socket.io does not work with Next 13.3 ( / @joshtriedcoding )
Master the art of building a real-time Messenger clone using the latest web development technologies. In this comprehensive tutorial, we'll walk you through the process of creating a fully-functional and visually stunning chat application that rivals the best in the industry.
Key Features:
- Real-time messaging using Pusher
- Message notifications and alerts
- Tailwind design for sleek UI
- Tailwind animations and transition effects
- Full responsiveness for all devices
- Credential authentication with NextAuth
- Google authentication integration
- Github authentication integration
- File and image upload using Cloudinary CDN
- Client form validation and handling using react-hook-form
- Server error handling with react-toast
- Message read receipts
- Online/offline user status
- Group chats and one-on-one messaging
- Message attachments and file sharing
- User profile customization and settings
- How to write POST, GET, and DELETE routes in route handlers (app/api)
- How to fetch data in server React components by directly accessing the database (WITHOUT API! like Magic!)
- Handling relations between Server and Child components in a real-time environment
- Creating and managing chat rooms and channels
Whether you're an experienced developer looking to expand your skillset or a beginner eager to learn the latest web development technologies, this tutorial has something for everyone. Join us on this exciting journey and take your web development skills to new heights!
Timestamps
00:00 Intro
02:16 Environment setup
08:18 Auth Setup
15:30 Auth UI
58:53 MongoDB, Prisma setup
01:17:54 NextAuth Setup
01:32:20 Register Functionality
01:40:23 Login Functionality and Social Login (Google and Github)
01:57:42 Sidebar, Navigation and Layout
02:58:39 Users screen and Conversations screen, Conversation Creation
04:12:34 Messages creation, Message Image upload
05:29:12 Profile Drawer
06:01:20 Settings functionality, Modal component
06:53:39 Group chat functionality, Image Modal, Loading states
07:43:15 Real time messages, conversations, read receipts and active status with Pusher
08:44:03 Deploy to Vercel, fix Google and Github social sign in in deployment

[@herjus2248]

Once again. Antonio comes back with another banger tutorial. The videos you give out to the community really helps out everyone. Even people who isn't beginners. Thank you Antonio!!!

[@codewithantonio]

Happy to hear that, glad you like it!

[@hemdadi71]

how can fix Unexpected status code 401 error when use pusher?

[@marciopereira1726]

@@codewithantonio where can I support you my brother?

[@milendonchev737]

This is the first tutorial I follow from start to finish and I have to thank you sir, it's a great one! I've learned much about Next13, Pusher, Prisma and Tailwind. Keep up the great work!

[@codewithantonio]

Happy to hear that! Thanks for watching!

[@CaliGrace35]

How long did it take you to finish the project?

[@pacio1414]

Great great job Antonio! Im in the middle of building this project with you, and I'm loving it!

[@hashblast3r]

Thanks for the great content Antonio! Love the depth of this one! Great job!

[@codewithantonio]

Thank you!

[@yeeyee2789]

I have seen a lot of tutorials, but none with a presentation as well-organized and a teacher as well-spoken as this one. Excellent job, Antonio !

[@codewithantonio]

Wow, thank you!

[@hemdadi71]

how can fix Unexpected status code 401 error when use pusher?

[@PattyBeautCode]

I am very happy to see more project from your channel and I am a fan of your Nextjs13+Prisma+mongoDB 💯💯 your project is awesome I have learned a lot from every single line of code! I appreciated you very much🔥🔥

[@codewithantonio]

Glad you like it!

[@Pierrot24382]

Thank you so much Antonio! This is one of the best tutorials I've ever seen!

[@codewithantonio]

Happy to hear that, thanks for watching!

[@brizzle3672]

this tutorial is awesome! definately hooked on next js now!!

[@carlosraul6578]

Thanks Antonio for another great tutorial, truly the best on KZbin, honestly. Greetings from Honduras 🇭🇳.

[@codewithantonio]

Glad you think so!

[@SuperPompey77]

OK, i have finally finished this build successfully! Everything worked as it should. Thanks to your step by step explanation. I absolutely learned so much from this and its the best on the internet or any school. Thankyou for putting this together. I know it took you a long time and a lot of hard work! Like I said before, absolutely brilliant! Thankyou so much! The only problem that i had is you used 'eu' for your pusher cluster and mine was actually 'us3' so something people to note.

[@codewithantonio]

Very happy to hear that, great job on finishing the entire thing! Thank you for watching!

[@aamirshuaib7621]

Antonio, You are a Life Saver!! This is a great project to understand Nextjs. The tutorial was beneficial and easy to understand. Thanks!!

[@codewithantonio]

Happy to hear that, glad you like it!

[@karthage3637]

Awesome, I was looking for such a tutorial last month but wasn't able to find something that pleased me.

[@codewithantonio]

Happy you find it useful!

[@bharath2508]

Antonio , ur teaching style is next level. such explanation makes it easy to follow.

[@codewithantonio]

Thank you!

[@codewithantonio]

Want to get mentored by me? Apply at www.codewithantonio.com/mentorship Hello everyone! My apologies for not uploading, I had a busy few weeks. This time we explore the Next 13 App Router and create a real-time full-stack Messenger Clone! As always, if you get stuck in this very long tutorial, feel free to pop into Discord and we will help you out! discord.gg/SPEBvAz4Vd

[@rubenarturopj]

No need to apologize. We should be the ones apologizing for demanding too much of you, especially on discord. Thank you for everything you've given to us. You are simply great! 🏆

[@alainrakotoarivelo7651]

Thank you for all your efforts. I am from Madagascar and I have learned a lot from all your videos on web development.

[@ssan4777]

despite being busy, u released another amazing tutorial. cant thank you enough for your amazing work and guidance, i have learned so much.Again, thank you so much mate and take it easy

[@SiviweXakaza]

This is the best tutorial ever! I'm gonna spend my entire weekend watching this, thank you so much

[@codewithantonio]

Happy to hear that!

[@mileslegend]

this is the first project i have so far taken this far without excessive bugs..thank you for making this an easier path..at one time i will look back when i have also learnt coding and am a pro and i will look at this project as the start of it all. isnt it nice

[@joshtriedcoding]

Super cool to see a new video from you. I learnt so much from these long form videos when I started coding. Especially cool because NextJS app router just became the recommended approach to writing modern code. Thanks for sharing!

[@agcodes]

Oh yea, your contents are also good, make more tRPC and t3 stuff

[@codewithantonio]

Thank you so much for support and all the great content you provide!

[@t_park]

I'm only a couple of hours into the video but I just want to say "thank you so much" in advance. Your tutorials are the best I've ever seen out there on YT. Each of your projects combines multiple concepts into a very good project. Whenever I watch your videos, I feel overwhelmed, which for me is a good thing since it shows how much there is to learn. Thank you for your hard work. Really appreciate it :)

[@codewithantonio]

Im very happy to hear that, thank you for watching my videos :)

[@hemdadi71]

how can fix Unexpected status code 401 error when use pusher?

[@27sosite73]

@@hemdadi71 you provided not enough info to solve your issue no one here is going to assist you since troubleshooting is a complex task and cannot be done or discussed in YT comments section. please, kindly google, UAV supplier country guy

[@27sosite73]

@@hemdadi71 just curious how you managed to find a job in your terrorist country if you ask such questions. (your question shows that you never worked as a developer)

[@hemdadi71]

@@27sosite73 Maybe the government of my country is a terrorist, but that does not mean that its people are also terrorists

[@agustinfodrini]

Wow! This looks like a marvellous project Antonio. I'll dive into it as soon as I get home.

[@codewithantonio]

Thank you!

[@dalestewart]

A true professional application with exceptional presentation.

[@jackmonaco4503]

This is awesome! So often tutorials avoid the cutting edge tech stacks, really happy to see something so current and robust Antonio!

[@codewithantonio]

Thanks for the nice comment!

[@kaloca]

Just be careful, real life production often avoids cutting edge stacks.

[@edenassos]

@@kaloca That's what you think.

[@benjaminpike]

@@edenassos No, that is reality - no enterprise-level business is continuously porting their apps onto the newest stacks - it's unaffordable, risky, and unnecessary

[@edenassos]

@@benjaminpike Enterprise-level? Do you know how many startups there are who continually switch stacks because one doesn't work? Even if stacks are not overhauled, a significant portion of it might be. Like Discord switching from Go to Rust for backend. Let me guess, you're just an employee who has never run a business.

[@mat_f96]

As a beginner, thanks for your awesome work Antonio, looking forward to more!

[@codewithantonio]

Glad to hear that, thank you!

[@sahilyadav3782]

Man this is such a well organized tutorial, thanks a lot!

[@codewithantonio]

Glad it was helpful!

[@user-pj4hl1hs3w]

I finished this video!! The chat function was harder than I thought but it was fun. and full-stack developer is so crazy. This is awesome and you!!

[@gabriel_mariano]

Hey antonio, please release more tutorials, I am nearly done with this one and I really learned a lot.

[@codewithantonio]

Thank you for watching! New ones are in progress!

[@dongyuexu4823]

This messenger chat app tutorial is truly comprehensive and amazing! I especially appreciate that this includes the final deployment! For next video could you make a full stack ecommerce app with deployment? Thank you so much!

[@codewithantonio]

Glad you like it! Thank you for teh suggestion

[@prabhnoorvirdi6170]

@@codewithantonio yes pls also do the ecommerce

[@shihabhimel007]

@dongyuexu4823 is any part skipped in this video?

[@ExactlyRahul]

Subscribed! Will watch later. Thanks for creating these.

[@codewithantonio]

Thank you!

[@NaryVip]

Just completed this project. Thanks a lot mate, Lots of changes and additions required which will be my testing side of what I have learnt from this tutorial.

[@codewithantonio]

Glad it helped

[@tunacant9106]

Amazing! I always wanted to make a realtime messenger. I tried with firebase but it had quite a bit of delay. I'm sure I'll a lot from this one.

[@codewithantonio]

Happy you like the tutorial!

[@iGhostr]

Firebase doesnt have quite of bit of delay, you did something wrong my friend

[@tunacant9106]

@@iGhostr yeap :( cuz I have no idea how real-time should work from FE side. but not anymore thanks to Antonio :)

[@bakercsgo5822]

im officially 4 days and 4 horus and 15 minutes in LOL. great series. this has been a wild ride and a lot to take it. i will be pumped when i can code this well on my own one day!

[@codewithantonio]

Happy you like it! Thanks for following the tutorial!

[@yadday5153]

You'll get there

[@3shan01]

Thank you so much Antonio. Just completed this project . I have learned so many thing . Keep up like this.❤❤

[@RivotX]

Menudo máquina Antonio. Tu canal ha sido un gran descubrimiento

[@georgepittas8792]

Great tutorial! I am so glad you are putting up those on youtube for free, the quality is top notch better than courses that I have paid money for.A small question that I have is, what extension you are using to auto generate the import statements

[@codewithantonio]

Glad you like the tutorials! For auto generating import statements, I use CTRL + Spacebar which triggers intellisense dropdown to pick what to import and the I just press enter (no extension). If you meant on the "sfc" shorthand that I am using, that is Simple React Snippets extension

[@JORDIFUNGULA]

May your kids succed in life! Antonino! May you be blessed beyond comparison 😅

[@codewithantonio]

Thank you for the kind words!

[@e_uph]

Was just looking for somewhere to start with learning react and got recommended this, thanks so much

[@codewithantonio]

Happy you like it!

[@rubenarturopj]

Damn, i wasn't prepared for this! So excited, thanks, Antonio, you are the best !!!!

[@codewithantonio]

Thank you!

[@Joseph-ms3iq]

Antonia, How can I say this? I've learnt more from this Tutorial than my college classes that I paid thousands for. I'm forever grateful for what you have done for us. Thank you.

[@codewithantonio]

Very happy it was helpful! Thank you for watching!

[@hemdadi71]

how can fix Unexpected status code 401 error when use pusher?

[@VladdyHell]

Bro you're definitely one of those beasts that provide really good free values like JavaScript Mastery, EdRoh, etc. that rivals each other

[@codewithantonio]

Those are some really great channels, thank you!

[@4wesom-079]

Simply wow! You really helped me a lot on my programming journey!❤

[@codewithantonio]

I'm so glad!

[@mohammedabdulsalam955]

Cant thank you enough for your amazing work and guidance, i have learnt alot

[@codewithantonio]

Glad you like it, thank you!

[@shauryasisodia1857]

Hi Antonio, from what I could understand by going through the Prisma docs and the examples available there it makes sense to me to use the @relation annotation on the "many" side of a one-to-many relation and simply an array of the other model on the "one" side, so let's say for a Post and Comment scenario we would have comments Comment[] in the Post model and a @relation annotation in the Comment model. Based on this, in the schema you've shown I'm struggling to make sense of the purpose of using the messageIds field in the Conversation model. It confused me so much that I felt we need to define a relation with the Message model using this field which caused the vscode extension mark it all red. But after many days of deliberation I realized that we shouldn't really be needing this field at all since we're anyways defining a one-to-many relation between Conversation and Message. Can you please help me understand the purpose of having both messageIds and messages fields in the Conversation model.

[@codewithantonio]

Hi, thanks for poitning this out. While developing I was mostly doing this to fix prisma errors. I will check out if there is a simpler way to create relations between the two, and if you yourself think you found a better solution and it works, great!

[@aboronilov]

Antonio you are the best. Are you going to teach us the microservice architecture?

[@codewithantonio]

Thank you, that seems like an interesting idea, I will for sure put it in my future plans

[@momenqudaih8293]

one of the best tutorial's I've Ever seen 😍, Thanks' Antonio💜

[@md.shahebali38]

it's really awesome, I was afraid of Prisma. but now I understand and can realize everything. thanks, Antonio, for your great tutorial. Please keep going with the same stack with more projects.

[@codewithantonio]

Glad you like it! Thanks for watching!

[@vagdrak6575]

Wow what an amazing chat app! you earned yourself a new sub! Btw i have a suggestion, could you make a website with paid subscriptions that unlock some features? i have never seen anything like that on yt so i think it s good idea.What do you believe?

[@codewithantonio]

Thank you for the nice comment and a great suggestion! :)

[@davidtakidze25]

Great tutorial, but I have one question: what do you think about creating a conversation after the user sends the first message? In your case, perhaps the user does not send a message and the conversation is created to take up database memory?

[@blaircfleming]

Really enjoyed this series, thanks Antonio!

[@codewithantonio]

Glad you enjoyed it!

[@davyengone]

Congrats on another great build!

[@codewithantonio]

Thank you!

[@allanquiroz4818]

Hi Antonio!! Is it possible to replace Pusher with Socketio or WS? I understand that Socketio already works correctly on Next14. Thank you very much for your work, greetings from Chile!

[@byronloarte]

Please one video about NextJS13 from scratch similar to The Complete Guide To Building A REST API With Node, Express, TypeScript & MongoDB + Authentication

[@codewithantonio]

Thanks for the suggestion!

[@insensibility]

Damn! This is so awesome! Thanks, Antonio!

[@codewithantonio]

Happy to hear that!

[@dyrnacht]

I was trying to figure out how to implement Pusher in next.js 13 and this was exactly what I needed, even though I am not making a messenger app. Thanks for going in depth with such a great stack. Very cool.

[@codewithantonio]

Glad it helped!

[@Aditya-lc5uk]

May your favourite football team always win 😭🙏

[@codewithantonio]

🤣Thank you!

[@JORDIFUNGULA]

Which football team😅 do you support @antonio

[@rithick3280]

How to set favicon in nextjs 13.3+ , mine doesn't working and the docs are poor

[@injSrc]

Winning every time is not fun by the way

[@Ameersoccerdev]

Hahaha 😂

[@eshw23]

How do we get to your level where we can build these apps on our own? This is crazy great video.

[@codewithantonio]

It is just practice practice and practice :)

[@eshw23]

Antonio ive really been struggling with a shoulder injury i had related to sports, this tutorial brought my spiritis up, im so excited to learn how to build this with the latest up to date tech, thank you.

[@codewithantonio]

Hope you get better soon, thank you for watching, glad you like it!

[@harshgoyal7114]

Thankyou Antonio for this great tutorial !

[@codewithantonio]

Glad it was helpful!

[@codeofcodedotorg]

Can you use docker so that a newer version of something doesn’t break this amazing project. It’s the #1 issue with all these lengthy projects.

[@CODE_7RONE]

Telegram please 🥺❤

[@codewithantonio]

Thank you for the suggestion!

[@QuangNguyenJI]

I am very excited when get noti from your channel, i started liking to use combo prisma with mongodb because of you 🎉🎉

[@codewithantonio]

Thank you, happy to hear that!

[@pedro.zurita]

Antonio! This is just WOW good sir! Fantastic!🎉🎉🎉

[@codewithantonio]

Thank you for the kind words!

[@AnkitPandey-es7wk]

thank you for this amazing NextJs project I have learned so many things in this project

[@rockyessel]

I really liked the approach you used, usually people start with the UI and then move to the functionality, but we did db, connecting to MongoDB, sign-in and out. Thanks, man.

[@codewithantonio]

Thank you, I try to make it as "logical" as I can, so I build a bit of UI that is just enough for us to trigger some backend functionality, and then we do the backend, and like that in many segments. Makes more sense that way then to build entire frontend or entire backend first, people would not understand why we are doing it. There are exceptions like writing my Prisma Schema where i purposely write everything at once because modifying the schema causes errors to a lot of people and I just wanted to avoid that by writing it once and not touching again :D

[@awaisraza2285]

Clean approach and a best Next.js 13 Tutorial. Typescript scared me at first but it is very cool. Now i can use typescript in react easily. Thanks to you antonio

[@codewithantonio]

Happy you like it, thank you!

[@epicgameryt4052]

This is so frickin cool! I would love to see a pro like you build a videochat using WebRTC and the modern tech stack.

[@Harsh-nv3xw]

Thanks Brother. Learned so much from this tutorial.

[@user-ft4pl8oy4o]

Such a great video, thanks Antonio! 🙏

[@codewithantonio]

Glad you liked it!

[@hyunsusim6143]

finally i finish watching this lecture!! thank you antonio!

[@kietdang8534]

This is awesome..I love your content!❤❤❤

[@codewithantonio]

Happy to hear that, thank you!

[@Yahya_Umar]

Thanks for sharing your experience with us and i really need this project. ❤❤❤

[@codewithantonio]

Glad you like it!

[@pablogomez7597]

Antonio sos un capo, recien voy 1h40 minutos, agradezco mucho este contenido.

[@rayediaz]

Que buenos tutoriales hermano 👏🏻

[@tejasgk369]

Thanks for tutorials. You are a legend

[@codewithantonio]

Thank you for watching!

[@ilgewandznadjer1957]

great video!! Thanks bro. Likes from Brazil 🇧🇷, I really appreciate this project!

[@codewithantonio]

Happy to hear that!

[@Antrikshdev29]

I was waiting for your nextjs appdir tutorial ❤❤

[@codewithantonio]

Happy to hear that!

[@oussamasadiki7377]

Great job thank you very much for this fun learning experience through building a cool project

[@codewithantonio]

Glad you like it!

[@Pickyricky69420]

Aye! This guy has a channel full of dimond content! I subcribed and after this semester is over i am going to hyperfocus on a project with you. I hope i can get somewhere without getting stuck too bad. Cheers Antonio! 🎉😊

[@codewithantonio]

Happy to hear that! :)

[@Solarplexus0]

Finally a headless ui tutorial from you! Thanks.

[@codewithantonio]

Glad you like it!

[@ShivamKumar-zn4uc]

Antonio Sir your video is amazing and has helped me build my first next project Thanks alot

[@teamoon8546]

Fantastically advance.. thanks my man.. look forward for next13 e-commerce + auth

[@codewithantonio]

Thank you!

[@sayidali431]

Thanks Antonio i am goingto complete airbnb project and then this one so, i hope you will continue like this real world projects

[@codewithantonio]

Thank you for watching my tutorials!

[@giannifed]

Another great tutorial. Thank you.

[@codewithantonio]

Glad you like it, thank you!

[@lucianochiarelli4398]

Thank you so much, I'm new to typescript and this was really helpful. I would love a follow up video adding more functionalities and new styles!

[@codewithantonio]

i have a Discord Clone coming this week with audio and video calls!

[@peyerlee]

Thanks to you, I was able to get used to next. Thank you, Antonio

[@codewithantonio]

Happy to hear that, thank you for watching!

[@asijitmanna728]

Was eagerly waiting for new tutorials

[@codewithantonio]

Thank you for following the channel!

[@RaihanMahmud-gn3fk]

You are amazing as a teacher.....❤❤💖💖🥰🥰

[@raymondmichael4987]

I can’t hit the like button hard enough than this; subed 🎉

[@codewithantonio]

Happy to hear that!

[@mrpaulishaili]

GooD Dy. Thank you so much for this practical guide. I have followed through but currently experiencing difficulties in deploying to vercel. I believe this is an issue with vercel and the [...nextauth] route.

[@codewithantonio]

Hi, glad you liked the tutorial, if you want to you can post more information about your problem in the discord, it will be easier to debug

[@tchisama]

added to my favorites , i will watch it later , i loooooooooove the demo

[@codewithantonio]

Happy to hear that!

[@rj_aman1]

Wow finally a great video came ❤️💥

[@codewithantonio]

wohoo ❤️

[@ddofvideos]

Thank you a wonderful Project Antonio nearly to finish this project and you made this tutorial easy, Im excited to build you Netflix next. PS: its a great great job for me hahaha!

[@codewithantonio]

Glad you like it, great great job 😆

[@rimolchakma1111]

I'm just saying how patient you are to make this video that inspired me.

[@codewithantonio]

Happy you like it!

[@s8x.]

Nice to see that this tutorial is using the new app directory

[@codewithantonio]

Happy you like it!!

[@SonLeDang]

Bro! Thank you! You are responsible for a vast amount of tech I learned this year. Please keep this up. Maybe some ReactNative next time ?

[@codewithantonio]

Glad to hear that! I will look into React Native at some point for sure

[@aliafarinifard]

Great, great Job Antonio :)

[@abdallahhasan9371]

What a tutorial, Gurrreat 😁gj man keep it up ❤❤

[@codewithantonio]

Glad you like it!

[@kevinzebb]

This tutorial was literally out of this world, and it’s FREE

[@codewithantonio]

So happy you like it!

[@shahabulalam8803]

great man.....thanks a ton for the tutorial

[@codewithantonio]

Glad you like it!

[@vivekjaiswal2375]

Thanks a lot antonia. Love and respect from India

[@codewithantonio]

Glad you like it!

[@tflixtuto64]

amazing as always

[@codewithantonio]

Thank you very much!

[@shahnawaz-7827]

Finally Completed and Deployed Successfully Messenger App after completing previous Projects (Netflix, Twitter & Airbnb). Thank You Sir Antonio to help me becoming Full Stack Developer. Now going forward to next projects.