(UPDATE) - with the latest dependencies updates, you will have to do some small config changes.

This is an instant messaging and VoIP social platform which allows communication through voice calls, video calls, text messaging, and media and files. Communication can be private or take place in virtual communities called "servers".

• Dark Mode

• Light Mode

• Video Channels

• Voice Channels

• Text Channels

• Video Calls/Screen Sharing/Chat/Conference

• Shortcut Keys for server navigation

• Upload and share files

• Customization and other settings

• Real-time updates
• Authentication
• Instant Messaging
• Media and Files
• Servers
• Channels
• Roles
• Permissions
• Emojis
• Reactions
• Mentions
• Search
• User Profiles
• User Settings
• Server Settings
• Server Invites
• Server Bans
• Server Members
• Server Roles
• Server Channels
• Server Emojis
• Server Integrations
• Server Moderation
• Server Verification

React, Next.js, TypeScript, TailwindCSS, Shadcn-iu, Socket.io, Clerk, Prisma, PostgreSQL, Supabase, LiveKit, Tanstack/react-query, Uploadthing/react, Axios, Zod, Zustand

npm install

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=
NEXT_PUBLIC_CLERK_SIGN_UP_URL=
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=


DATABASE_URL=

UPLOADTHING_SECRET=
UPLOADTHING_APP_ID=

LIVEKIT_API_KEY=
LIVEKIT_API_SECRET=
NEXT_PUBLIC_LIVEKIT_URL=

NEXT_PUBLIC_SITE_URL=

npx prisma init
npx prisma generate
npx prisma db push

npm i @prisma/client
npx prisma studio

• Create a new project on Supabase

• Add your Supabase URL to the .env file

• Add your Supabase public key to the .env file

• Create a new project on Clerk

• Create a new user pool on Clerk

• Create a new user on Clerk

• Add your Clerk public key to the .env file

• Add your Clerk secret key to the .env file

• Add your Clerk sign in URL to the .env file

• Add your Clerk sign up URL to the .env file

• Add your Clerk after sign in URL to the .env file

• Add your Clerk after sign up URL to the .env file

• Create a new project on Uploadthing

• Create a new app on Uploadthing

• Create a new secret on Uploadthing

• Add your Uploadthing secret to the .env file

• Add your Uploadthing app id to the .env file

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev