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

This is a repository for a Real-Time Chat Application: Next.js 13, React, Tailwind, Prisma, MongoDB, NextAuth, Pusher.

Key Features:

Real-time messaging using Pusher
Message notifications and alerts
shadcn/ui robust components
Tailwind design for sleek UI
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
POST, GET, and DELETE routes in route handlers (app/api)
Fetched data in React Server 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

Prerequisites

Node version 14.x

Cloning the repository

git clone https://github.com/MdTehseenKhan/chit-chat-pro.git

Install packages

npm install

Setup .env file

DATABASE_URL=
NEXTAUTH_SECRET=

NEXT_PUBLIC_PUSHER_APP_KEY=
PUSHER_APP_ID=
PUSHER_SECRET=

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=

GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

Setup Prisma

npx prisma db push

Start the app

npm run dev

Available commands

Running commands with npm npm run [command]

command	description
`dev`	Starts a development instance of the app
`build`	Build the application for production.