messenger-clone's Introduction

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. 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

git clone https://github.com/AntonioErdeljac/next13-messenger.git

Install packages

npm i

Setup .env file

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=