Chat app

Technology:

• Frontend: Next.js 13, React, Tailwind
• Backend: Node.js, Socket.io, MongoDB, Prisma
• Using Next-auth for authencation

Features:

• Real-time messaging
• 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
• Send file, image, audio
• 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

Prerequisites

Node version 14.x

Cloning the repository

git clone https://github.com/LionBlackk/PBL4

Install packages in client folder, server folder

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=

Setup Prisma

npx prisma db push

Start the app include client folder, server folder

npm run dev

1.Sign in UI

2.Login UI

3.UI after login

4.UI show users offline or online

5.UI update information user

6.UI chat box

7.UI group chat box

8.UI send file, image, ...

9.UI send emoji

10.UI delete chat box