Intertwine

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

Themes and Features

Demo Images

Themes

• Dark Mode

• Light Mode

Features

• 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

Other Features

• 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

Tech Stack

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

Install packages

npm install

Setup .env file

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=

Setup Prisma

npx prisma init
npx prisma generate
npx prisma db push

npm i @prisma/client
npx prisma studio

Setup Supabase

• Create a new project on Supabase

• Add your Supabase URL to the .env file

• Add your Supabase public key to the .env file

Setup Clerk

• 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

Setup Uploadthing

• 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

Getting Started

First, run the development server:

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