# Real-Time Messenger Clone: Next.js 13, React, Tailwind, Prisma, MongoDB, NextAuth, Pusher (2023)  This is a repository for a Real-Time Messenger Clone: Next.js 13, React, Tailwind, Prisma, MongoDB, NextAuth, Pusher. [VIDEO TUTORIAL](https://www.youtube.com/watch?v=PGPGcKBpAk8) 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! ### Prerequisites **Node version 14.x** ### Cloning the repository ```shell git clone https://github.com/AntonioErdeljac/next13-messenger.git ``` ### Install packages ```shell npm i ``` ### Setup .env file ```js DATABASE_URL= NEXTAUTH_SECRET= NEXT_PUBLIC_PUSHER_APP_KEY= PUSHER_APP_ID= PUSHER_SECRET= NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME= GITHUB_ID= GITHUB_SECRET= GOOGLE_CLIENT_ID= GOOGLE_CLIENT_SECRET= ``` ### Setup Prisma ```shell npx prisma db push ``` ### Start the app ```shell npm run dev ``` ## Available commands Running commands with npm `npm run [command]` | command | description | | :-------------- | :--------------------------------------- | | `dev` | Starts a development instance of the app | # messenger-video