Real-Time Messenger Clone with Next.js

This is a repository for a Real-Time Messenger Clone with Next.js: Next.js 13, React, Tailwind CSS, Prisma, MongoDB, NextAuth, Pusher.

Features 🚀

• Real-time messaging using Pusher
• Message notifications and alerts
• Tailwind CSS design for sleek UI
• Tailwind CSS animations and transition effects
• Full responsiveness for all devices
• Credential authentication with NextAuth
• Google authentication with NextAuth
• Github authentication with NextAuth
• File and image upload using Cloudinary CDN
• Client form validation and handling using react-hook-form
• Server error handling with react-toast
• State management using Zustand
• Creating and managing chat rooms and channels
• Message read receipts
• Online/offline user status
• Group chats and one-on-one messaging
• Message attachments and file sharing
• User profile customization and settings
• Write GET, POST and DELETE routes in route handlers (app/api)
• Fetch data in server React components by directly accessing the database
• Handling relations between Server and Child components in a real-time environment

Prerequisites

Node version 18.14+

Cloning the repository

git clone git@github.com:alan10332000/next-messenger.git

Install packages

pnpm install

Setup .env file

cp .env.example .env

Setup Prisma

npx prisma db push

Start the app

pnpm dev

Declaration ⚠️

The images, content, etc. within this work are purely for personal practice and not intended for any commercial use.