A full-featured web application that enables real-time interviews using video calling and messaging. Built with Next.js, GetStream, and Convex, it includes candidate evaluation tools, collaborative coding, screen sharing, and secure authentication via Clerk.
- 📖 Introduction
- 🛠 Tech Stack
- ✨ Features
- 📸 Demonstration
- 🚀 Project Start Guide
- 🌍 Deployment
- 👨💻 Author
- 🔗 Socials
This app streamlines technical interviews by allowing interviewers and candidates to connect via live video, chat, and a real-time code editor. Admins can review analytics, schedule interviews, and collect structured feedback with ratings and notes.
Frontend:
- Next.js (App Router)
- TailwindCSS
- ShadCN UI Components
- Lucide react
Backend & Services:
- GetStream (Video + Chat APIs)
- Convex (Real-time backend functions + storage)
- Clerk (Authentication & User Management)
- Webhooks (for session logs, reviews, etc.)
- 🎥 High-quality real-time video calls
- 💬 In-call chat using GetStream
- 🖥️ Screen sharing support for presentations or walkthroughs
- 🧑💼 Candidate profile viewer
- 📝 Recruiter notes and feedback system
- ⭐ Interviewer rating and review after the session
- 🧑💻 Real-time collaborative code editor for coding interviews
- 📊 Interview history and analytics
- 🔒 Secure room tokens and access control
- 🌐 Webhooks for real-time updates (e.g., session end, rating submission, call logs)
- 📅 Scheduling integration (optional)
- ⚙️ Account preferences and settings
- 🌙 Dark/light theme support
- 📱 Fully responsive design
Will Update it soon..
- Node.js and npm
- GetStream account
- Convex project
- Clerk account
git clone https://github.com/Dev-omkarCh/Interview-App.git
cd video-call-interview-appnpx create-next-app@14.2.25 . #14.2.25 supports clerk
✔ Would you like to use TypeScript? › Yes
✔ Would you like to use ESLint? › No
✔ Would you like to use Tailwind CSS? › Yes
✔ Would you like to use `src/` directory? › Yes
✔ Would you like to use App Router? (recommended) › Yes
✔ Would you like to customize the default import alias (@/*)? › No
npx shadcn@latest init
npx shadcn@latest add button ...- Install Clerk
npm install @clerk/nextjs- Create a middleware.ts file.
- If you're using the /src directory, create middleware.ts in the /src directory.
- If you're not using the /src directory, create middleware.ts in the root directory.
- In your middleware.ts file, export the clerkMiddleware() helper:
import { clerkMiddleware } from '@clerk/nextjs/server'
export default clerkMiddleware()
export const config = {
matcher: [
// Skip Next.js internals and all static files, unless found in search params
'/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
// Always run for API routes
'/(api|trpc)(.*)',
],
}- Add
<ClerkProvider>and Clerk components to your app
- Add the component to your app's layout. This component provides Clerk's authentication context to your app.
- Copy and paste the following file into your
layout.tsxfile. - This creates a header with Clerk's prebuilt components to allow users to sign in and out.
import type { Metadata } from 'next'
import {
ClerkProvider,
SignInButton,
SignUpButton,
SignedIn,
SignedOut,
UserButton,
} from '@clerk/nextjs'
import { Geist, Geist_Mono } from 'next/font/google'
import './globals.css'
const geistSans = Geist({
variable: '--font-geist-sans',
subsets: ['latin'],
})
const geistMono = Geist_Mono({
variable: '--font-geist-mono',
subsets: ['latin'],
})
export const metadata: Metadata = {
title: 'Clerk Next.js Quickstart',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode
}>) {
return (
<ClerkProvider>
<html lang="en">
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
<header className="flex justify-end items-center p-4 gap-4 h-16">
<SignedOut>
<SignInButton />
<SignUpButton />
</SignedOut>
<SignedIn>
<UserButton />
</SignedIn>
</header>
{children}
</body>
</html>
</ClerkProvider>
)
}- Create your first user
- Run your project with the following command:
npm run dev -
Visit your app's homepage at http://localhost:3000.
-
Click "Sign up" in the header and authenticate to create your first user.
npm i convex
npx convex devCreate a .env.local file inside the server/ directory with the following keys:
# Deployment used by `npx convex dev`
CONVEX_DEPLOYMENT=string
NEXT_PUBLIC_CONVEX_URL=string
NEXT_PUBLIC_STREAM_API_KEY=string
STREAM_SECRET_KEY= string
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=string
CLERK_SECRET_KEY=string
Deploy easily to Vercel:
- Push your code to GitHub
- Import into Vercel
- Add your .env.local variables in Vercel Dashboard
- Deploy 🚀
- Omkar Chikhale
- omkarchikhale.dev@gmail.com 📧
