Hiring platforms today do a lot: sourcing, applications, screening, onboarding. But when it's time for the interview, many still hand things off to Zoom or Google Meet. What if those video calls could happen right inside your platform---no switching tabs, no third-party scheduling links, no fragmented candidate experience?
In this tutorial, we'll show you how to build that experience: a video interview app embedded directly in your platform, using React, Next.js, and Stream's Video SDK. You'll enable interviewers and candidates to connect in real time, schedule interviews, record sessions, and collaborate, all within a responsive, modern interface.
This approach can extend beyond hiring platforms to any product that benefits from integrated, real-time video communication.
Project Overview
We're building a full-stack video interview app where:
- Candidates and interviewers can join or start video calls
- Interviewers can schedule interviews and manage past recordings
- The interface includes a coding editor, participant list, and video controls
- The app supports light/dark mode and is fully responsive
You'll get hands-on experience with:
- Setting up a Next.js app with TypeScript: Learn how to initialize a Next.js project, configure TypeScript, and prepare your development environment for a scalable full-stack application.
- Implementing authentication with Clerk: Add secure authentication to your app with Clerk, enabling users to sign up and sign in using multiple providers.
- Integrating Stream Video SDK for real-time video calls: Leverage Stream's powerful Video SDK to handle live video calls, including participant management and video layouts.
- Building an admin dashboard for scheduling interviews: Create an interface for interviewers to schedule, manage, and review interviews with real-time updates using Convex.
- Deploying to Vercel: Learn how to deploy your app with environment variables and continuous deployment on Vercel.
Key Insights and Timestamps
Introduction and Project Overview
The tutorial begins by outlining the app's core features: a video interview platform with real-time video calls, authentication, a coding editor, and an admin dashboard for managing interviews and recordings.
Setting Up the Next.js App
Learn how to initialize a Next.js project using create-next-app, configure TypeScript, and set up project structure. You'll use version 14.2.23 of Next.js for better compatibility with the tutorial's dependencies.
Installing UI Components with Shadcn
Add Shadcn UI to the project to streamline building components like buttons, cards, and modals. Follow along to integrate Tailwind CSS and configure your UI toolkit for consistent styling.
Authentication with Clerk
Explore how to set up authentication with Clerk, including creating a new Clerk app, enabling sign-in methods (email, Google, GitHub), and wrapping your application with the ClerkProvider to make authentication accessible throughout your app.
Setting Up the Database and Admin UI
Learn how to configure Convex for real-time data storage, set up webhooks, and scaffold core admin UI components like the navbar and home page.
Integrating the Stream Video SDK
Integrate Stream's Video SDK to power real-time video calls. Learn how to create a Stream Video Client for each authenticated user, pass user information securely, and set up a global provider so video functionality is accessible across pages.
Building a Custom Hook for Meeting Actions
Create a useMeetingActions hook to encapsulate the logic for starting and joining meetings. This hook abstracts client interactions, allowing you to trigger video calls from your UI with clean, reusable code.
Creating a Video Call Page
Build the core video call experience with Stream components like SpeakerLayout, CallControls, and dynamic video layouts. Follow along to implement features such as toggling camera/microphone, participant lists, and screen sharing.
Fetching and Displaying Recordings
Learn how to fetch past call recordings using the Video SDK and display them in the UI. Organize completed interviews and provide easy access to review sessions to enhance the interviewer's experience.
Scheduling Interviews in the Admin Dashboard
Set up an admin interface where interviewers can schedule new interviews, view upcoming calls, and manage past interviews. Use Convex queries and mutations to fetch and display interviews in real time.
Deploying to Vercel
Deploy the final application to Vercel for fast, reliable hosting. Connect your GitHub repository, set environment variables, and push your code for instant deployment.
What's Next?
Congratulations. You've built a full-featured video interview platform with:
🔐 Authentication
🎥 Real-time video calls
🗓️ Scheduling and recordings
📱 Responsive UI with theme support
Want to explore more features? Try adding:
Check out Codesistency's full video tutorial to follow along step-by-step, dive deeper into the code, and extend this project for your use case.