A fully-featured video conferencing web application built using Next.js, TypeScript, Clerk for authentication, and Stream for real-time video and chat capabilities.
- Real-Time Video Conferencing: Connect and communicate with multiple users in real-time.
- User Authentication: Secure user management with Clerk.
- Instant Messaging: Real-time chat during video sessions using Stream.
- Responsive UI: Optimized for both desktop and mobile devices.
- Scalable: Built with Next.js and TypeScript for maintainability and performance.
- Next.js: Framework for server-rendered React applications.
- TypeScript: Type-safe development for scalable code.
- Clerk: User authentication and management.
- Stream: Real-time messaging and video API.
-
Clone the repository:
git clone https://github.com/yourusername/your-repo-name.git cd your-repo-name -
Install dependencies: npm install
yarn install
-
Set up environment variables: Create a .env.local file in the root of your project and add the following variables: NEXT_PUBLIC_CLERK_FRONTEND_API= CLERK_API_KEY= STREAM_API_KEY= STREAM_SECRET=
-
Run the development server: npm run dev
yarn dev
Open http://localhost:3000 in your browser to see the app in action.
- Sign up / Log in: Users are authenticated through Clerk.
- Join / Create a Room: Start or join a video conference.
- Chat: Send and receive messages in real time during the call.
Here's an overview of the project's structure:
├── components # Reusable UI components ├── pages # Next.js pages and API routes ├── lib # Utility functions and external library setups ├── public # Public assets ├── styles # Global styles └── README.md # Project documentation
@clerk/nextjs: For integrating Clerk's authentication in Next.js. stream-chat-react: Components for the chat feature. next-auth: Optional, if needed for additional auth setups.
To deploy this project: Set up your environment variables in your deployment platform.