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

Prerequisites

Node version 14.x

Cloning the repository

git clone https://github.com/Tinas0603/tina-video.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=

Setup Prisma

npx prisma db push

Start the app

npm run dev

Open http://localhost:3000 with your browser to see the result.

Available commands

Running commands with npm npm run [command]

command	description
dev	Starts a development instance of the app

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.