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

Avatars from: Discord for any problems/errors/bugs: Github & Live Website: Special thanks to Josh Tried Coding from which I got inspiration to use Pusher since 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