🎯 AI Interview Mocker

Master Your Interview Skills with AI-Powered Practice

A comprehensive web application that helps you prepare for technical interviews using AI-generated questions, real-time speech recognition, advanced proctoring, and intelligent evaluation powered by Google Gemini AI.

Live Demo

📸 Screenshots

Landing Page

Dashboard

Interview Setup

Active Interview

Feedback & Results

Quiz Interface

How It Works

🎬 Demo Video

Full Application Walkthrough

Dark Mode Demo

Will upload soon

Light Mode Demo

interviewMockerVideo.mp4

📖 Overview

AI Interview Mocker is a professional interview preparation platform that simulates real interview conditions with advanced features designed to help you succeed:

🎯 Core Features

🤖 AI-Powered Intelligence

Smart Question Generation - Customized to your job role, description, and experience level
Multi-Model AI Support - Uses 4 Gemini models with automatic failover for 99.9% uptime
Intelligent Evaluation - Comprehensive scoring across 4 categories with detailed feedback
Auto Grammar Correction - Real-time spelling and grammar fixes using AI
Contextual Suggestions - Personalized improvement tips for each answer

🔒 Advanced Proctoring

Webcam Monitoring - Live video feed with mirror mode
Screen Sharing - Full monitor validation (no window/tab sharing)
Fullscreen Enforcement - 3-warning system with auto-redirect
Status Indicators - Real-time visual feedback for all requirements

🎤 Speech & Recording

Real-Time Transcription - Web Speech API integration
Active Speaking Detection - Visual feedback when user is speaking
50-Second Timer - Countdown per question with progress bar
Pause & Resume - Control recording flow as needed

🎯 Quiz System

8 Topics Available - JavaScript, React, Node.js, Python, Java, DSA, Algorithms, General
3 Difficulty Levels - Easy, Medium, Hard
Customizable - 5-20 questions, 10-30 seconds per question
Instant Feedback - Immediate correct/incorrect indication
Detailed Results - Question-by-question review with explanations

🌟 What Makes Us Different

✨ Completely Free - No hidden costs or premium tiers
🎨 Modern UI/UX - Beautiful dark/light modes with smooth transitions
🚀 Blazing Fast - Built on Next.js 15 with App Router
📱 Fully Responsive - Works perfectly on desktop, tablet, and mobile
� Privacy First - Your data is secure with Clerk authentication
🌐 No Installation - Works in any modern browser
⚡ Real-Time - Instant feedback and evaluation
📊 Track Progress - Monitor improvement over time

✨ Features

🎤 Mock Interviews with Advanced Proctoring

📋 Setup Phase

✅ Webcam preview
✅ Microphone level testing
✅ Full monitor screen sharing
✅ Real-time status indicators
✅ Validation before start
✅ User-friendly error messages

🎬 Interview Phase

✅ Fullscreen auto-enforcement
✅ 3-warning violation system
✅ Real-time speech-to-text
✅ 50-second countdown timer
✅ Active speaking detection
✅ Visual recording indicators
✅ Pause/resume capability

🤖 AI Evaluation

✅ 4 scoring categories
✅ Letter grades (A+ to D)
✅ Detailed feedback reports
✅ Improvement suggestions
✅ Strengths highlighting
✅ Weakness identification
✅ Progress tracking

📝 Detailed Interview Process

1️⃣ Interview Creation

User Input → AI Generation → Interview Setup
    ↓              ↓                ↓
Job Details → 5 Questions → Proctoring Check

2️⃣ Question Generation with AI

Input: Job position, description, experience level
Processing: Gemini AI generates 5 custom questions
Output: Questions with expected answers
Quality: Contextual, relevant, and challenging
Variety: Mix of technical, behavioral, and situational

3️⃣ Proctoring Setup

Webcam ✓ → Microphone ✓ → Screen Share ✓ → Fullscreen ✓ → Start

Webcam: Live preview with mirror mode for natural appearance
Microphone: Audio level indicator to ensure clear recording
Screen Sharing: Validates full monitor (rejects window/tab selection)
Fullscreen: Automatic entry on interview start with enforcement
All Required: Interview won't start until all checks pass

4️⃣ Active Interview Session

Question Display:

Current question number (e.g., "Question 1 of 5")
Question text in large, readable font
Expected answer reference (for preparation)
Progress bar showing completion

Recording Interface:

"Start Speaking" button (triggers fullscreen + recording)
Real-time transcript display
Speaking indicator (visual pulse effect)
50-second countdown timer with color transitions
"Stop" button to end recording early
"Save Answer" button (enabled when transcript ready)

Fullscreen Enforcement:

Monitors fullscreen status every 2 seconds
Shows warning modal immediately on exit
Tracks exit count (1/3, 2/3, 3/3)
"Re-Enter Fullscreen" button in modal
Auto-redirects to dashboard after 3 violations

5️⃣ AI Processing Pipeline

User Speech → Transcript → Correction → Evaluation → Results
     ↓            ↓            ↓            ↓           ↓
Voice Input → Text → Grammar Fix → AI Score → Feedback

Step 1: Speech to Text

Browser Web Speech API
Real-time transcription
Supports multiple languages
Handles pauses and corrections

Step 2: Grammar Correction

API: /api/correct
Model: Gemini with retry logic
Fixes: Spelling, grammar, punctuation
Preserves: Meaning and technical terms

Step 3: AI Evaluation

API: /api/answers
Model: Gemini with multi-model fallback
Scores: 4 categories (0-10 scale each)
Output: JSON with detailed feedback

Scoring Categories:

Technical Accuracy (0-10)
- Correctness of technical concepts
- Use of proper terminology
- Accuracy of explanations
Completeness (0-10)
- Coverage of all aspects
- Depth of explanation
- Examples and scenarios
Clarity & Communication (0-10)
- Structured response
- Clear articulation
- Logical flow
Relevance (0-10)
- Answers the question asked
- Stays on topic
- Provides practical value

Overall Grade:

90-100%: A+ (Excellent)
85-89%: A (Outstanding)
80-84%: B+ (Very Good)
75-79%: B (Good)
70-74%: C+ (Satisfactory)
60-69%: C (Acceptable)
Below 60%: D (Needs Improvement)

6️⃣ Results & Feedback

Overall Performance:

Total score percentage
Letter grade with visual badge
Color-coded performance indicator
Comparison with previous attempts

Detailed Breakdown:

Category-wise scores with progress bars
Strengths summary
Areas for improvement
Specific suggestions for each answer

Question-by-Question Review:

Original question
Your answer (corrected version)
Expected answer reference
AI evaluation feedback
Improvement tips
Key takeaways

🛠️ Technology Stack

Frontend

Framework: Next.js 15 (App Router)
UI Library: React 19
Styling: Tailwind CSS
Components: shadcn/ui
Icons: Lucide React
Forms: React Hook Form

Backend

API: Next.js API Routes
Database: PostgreSQL (Neon Serverless)
ORM: Drizzle ORM
Authentication: Clerk

AI & Media

AI Model: Google Gemini 1.5 Flash
Speech Recognition: Web Speech API (react-speech-recognition)
Video: react-webcam
Screen Sharing: Screen Capture API
Notifications: react-hot-toast

Deployment

Platform: Vercel (recommended)
Database: Neon PostgreSQL
CDN: Vercel Edge Network

📁 Project Structure

ai-interview-mocker/
├── app/
│   ├── (auth)/                     # Authentication pages
│   │   ├── sign-in/
│   │   └── sign-up/
│   ├── api/                        # API Routes
│   │   ├── gemini/                # Interview question generation
│   │   ├── correct/               # Spelling correction
│   │   ├── answers/               # Answer submission & evaluation
│   │   ├── interview/             # Interview CRUD operations
│   │   └── quiz/                  # Quiz generation & submission
│   ├── dashboard/
│   │   ├── interview/
│   │   │   └── [interviewId]/
│   │   │       ├── page.jsx       # Interview setup (webcam, screen share)
│   │   │       ├── start/         # Interview page (questions & recording)
│   │   │       │   ├── page.jsx   # Main interview interface
│   │   │       │   └── _components/
│   │   │       │       ├── QuestionSection.jsx
│   │   │       │       └── RecordAnswerSection.jsx  # Recording logic
│   │   │       └── feedback/
│   │   │           └── page.jsx   # Evaluation results
│   │   ├── questions/             # Quiz system
│   │   │   ├── page.jsx          # Quiz dashboard
│   │   │   ├── quiz/[quizId]/    # Quiz taking interface
│   │   │   └── results/[resultId]/ # Quiz results
│   │   ├── how-it-works/
│   │   └── page.jsx              # Main dashboard
│   ├── how-it-works/             # Landing page features
│   ├── globals.css               # Global styles
│   ├── layout.js                 # Root layout with Clerk provider
│   └── page.js                   # Landing page
├── components/ui/                # shadcn/ui components
│   ├── button.jsx
│   ├── card.jsx
│   ├── dialog.jsx
│   ├── progress.jsx
│   └── ...
├── utils/
│   ├── db.js                     # Drizzle database connection
│   └── schema.js                 # Database schema definitions
├── middleware.js                 # Clerk authentication middleware
├── drizzle.config.js            # Drizzle ORM configuration
├── next.config.mjs              # Next.js configuration
└── package.json                 # Dependencies

🔄 How It Works

📸 Complete Interview Flow Diagram

┌─────────────┐         ┌──────────────┐         ┌─────────────┐
│   Landing   │────────▶│  Dashboard   │────────▶│  Create New │
│    Page     │  Login  │   View All   │  Click  │  Interview  │
└─────────────┘         └──────────────┘         └─────────────┘
                                                          │
                                                          ▼
                    ┌────────────────────────────────────────┐
                    │   AI Question Generation (Gemini)     │
                    │   • Job Position                      │
                    │   • Description                       │
                    │   • Experience Level                  │
                    │   ➔ Generates 5 Custom Questions      │
                    └────────────────────────────────────────┘
                                      │
                                      ▼
┌────────────────────────────────────────────────────────────────┐
│                 Proctoring Setup Phase                         │
├────────────────────────────────────────────────────────────────┤
│  ✓ Webcam Preview (Mirror Mode)                               │
│  ✓ Microphone Level Testing                                   │
│  ✓ Screen Share (Full Monitor Validation)                     │
│  ✓ All Checks Pass ➔ Enable "Start Interview" Button         │
└────────────────────────────────────────────────────────────────┘
                                      │
                                      ▼
                           ┌──────────────────┐
                           │   Fullscreen     │
                           │   Auto-Entry     │
                           └──────────────────┘
                                      │
        ┌─────────────────────────────┴─────────────────────────────┐
        ▼                                                             ▼
┌──────────────────┐                                       ┌──────────────────┐
│  Interview Page  │◀──────── Navigation ────────────────▶│  Fullscreen      │
│  (Questions 1-5) │                                       │  Enforcement     │
└──────────────────┘                                       └──────────────────┘
        │                                                             │
        │ For Each Question:                                         │
        ▼                                                             ▼
┌──────────────────────────────────────────────────────────────────────┐
│  🎤 Recording Phase                                                  │
├──────────────────────────────────────────────────────────────────────┤
│  1. Display Question & Expected Answer                              │
│  2. Click "Start Speaking" ➔ Enter Fullscreen + Start Recording    │
│  3. Real-time Transcription (Web Speech API)                        │
│  4. 50-Second Countdown Timer                                       │
│  5. Speaking Indicator (Visual Pulse)                               │
│  6. "Stop" Button (End Recording Early)                             │
│  7. Preview Transcript Before Saving                                │
│  8. "Save Answer" ➔ Process with AI                                │
└──────────────────────────────────────────────────────────────────────┘
                                      │
                                      ▼
┌──────────────────────────────────────────────────────────────────────┐
│  🤖 AI Processing Pipeline                                           │
├──────────────────────────────────────────────────────────────────────┤
│  Step 1: POST /api/correct                                          │
│         ├─ Input: Raw transcript                                    │
│         ├─ Model: Gemini 1.5 Flash                                  │
│         ├─ Action: Fix spelling, grammar, punctuation               │
│         └─ Output: Corrected text                                   │
│                                                                      │
│  Step 2: POST /api/answers                                          │
│         ├─ Input: Corrected answer + question + expected answer     │
│         ├─ Model: Gemini 1.5 Flash (with fallback)                  │
│         ├─ Action: Evaluate on 4 categories (0-10 each)             │
│         ├─ Categories:                                               │
│         │   • Technical Accuracy                                     │
│         │   • Completeness                                           │
│         │   • Clarity & Communication                                │
│         │   • Relevance                                              │
│         └─ Output: JSON feedback with overall grade                 │
│                                                                      │
│  Step 3: Database Storage                                           │
│         ├─ Table: userAnswers (corrected answer, rating)            │
│         └─ Table: correctedAnswers (original vs corrected)          │
└──────────────────────────────────────────────────────────────────────┘
                                      │
                                      ▼
                    ┌───────────────────────────────┐
                    │   Repeat for All 5 Questions  │
                    └───────────────────────────────┘
                                      │
                                      ▼
┌──────────────────────────────────────────────────────────────────────┐
│  📊 Results & Feedback Page                                          │
├──────────────────────────────────────────────────────────────────────┤
│  📈 Overall Performance                                              │
│     • Total Score: 85/100 (Grade: A)                                │
│     • Visual Badge with Color Coding                                │
│                                                                      │
│  📊 Category Breakdown (Progress Bars)                              │
│     • Technical Accuracy: 9/10                                      │
│     • Completeness: 8/10                                            │
│     • Clarity & Communication: 9/10                                 │
│     • Relevance: 8/10                                               │
│                                                                      │
│  ✅ Strengths:                                                       │
│     • Clear explanation of concepts                                 │
│     • Good use of examples                                          │
│                                                                      │
│  ⚠️  Areas for Improvement:                                         │
│     • Could provide more depth                                      │
│     • Consider mentioning edge cases                                │
│                                                                      │
│  📝 Question-by-Question Review                                     │
│     For each question:                                               │
│     • Original question text                                         │
│     • Your corrected answer                                          │
│     • Expected answer reference                                      │
│     • AI evaluation feedback                                         │
│     • Specific improvement tips                                      │
└──────────────────────────────────────────────────────────────────────┘

📊 Results & Feedback Page

Visual Layout

┌──────────────────────────────────────────────────────────────┐
│  🎯 INTERVIEW RESULTS                                        │
│  Full Stack Developer - 3 years experience                   │
├──────────────────────────────────────────────────────────────┤
│                                                              │
│  ┌────────────────────────────────────────────────────┐    │
│  │     Overall Score: 85/100                          │    │
│  │     Grade: A (Outstanding)         [🟢 Badge]     │    │
│  │     ████████████████████░░░░░░░░ 85%              │    │
│  └────────────────────────────────────────────────────┘    │
│                                                              │
│  📊 Category Breakdown:                                     │
│  ├─ Technical Accuracy:      9/10  ████████████░░           │
│  ├─ Completeness:            8/10  ████████████░░           │
│  ├─ Clarity & Communication: 9/10  ████████████░░           │
│  └─ Relevance:               8/10  ████████████░░           │
│                                                              │
│  ✅ Strengths:                                              │
│  • Clear explanation of React concepts                      │
│  • Good use of practical examples                           │
│  • Demonstrated hands-on experience                         │
│                                                              │
│  ⚠️ Areas for Improvement:                                  │
│  • Could provide more depth on performance optimization     │
│  • Consider mentioning advanced patterns like custom hooks  │
│  • Discuss testing strategies for React components          │
│                                                              │
├──────────────────────────────────────────────────────────────┤
│  📝 Question-by-Question Analysis:                          │
│                                                              │
│  [Question 1 of 5] ▼                                        │
│  Q: Explain your experience with React hooks...            │
│  Your Answer: React hooks like useState and useEffect...   │
│  Expected: React hooks are functions that let you...       │
│  Score: 85% (A)                                             │
│  Feedback: Strong answer with clear examples...            │
│                                                              │
│  [📥 Download PDF Report] [📧 Email Results] [🔄 Retake]  │
└──────────────────────────────────────────────────────────────┘

Quiz Taking Interface

┌────────────────────────────────────────────────────────────┐
│  React Quiz - Medium Difficulty            ⏰ 15 seconds   │
│  Question 5 of 10                                          │
│  Progress: ████████████░░░░░░░░░░░ 50%                    │
├────────────────────────────────────────────────────────────┤
│                                                            │
│  What is the purpose of useEffect hook in React?          │
│                                                            │
│  ○ To manage component state                              │
│  ● To perform side effects in components   ✅             │
│  ○ To create custom hooks                                 │
│  ○ To optimize component rendering                        │
│                                                            │
│                    [Skip Question →]                       │
│                                                            │
└────────────────────────────────────────────────────────────┘

Features:

⏱️ Live countdown timer
📊 Visual progress bar
✅ Instant feedback (green for correct, red for incorrect)
⏭️ Auto-progress after 2-second feedback
🚶 Skip option (counts as incorrect)
💾 Auto-save on answer selection
🔄 Loading states between questions

Quiz Results Dashboard

┌────────────────────────────────────────────────────────────┐
│  🏆 QUIZ COMPLETED                                         │
│  React - Medium Difficulty - 10 Questions                 │
├────────────────────────────────────────────────────────────┤
│                                                            │
│         Final Score: 80%                                   │
│         ████████████████░░░░ 8/10 correct                 │
│                                                            │
│  📊 Performance Breakdown:                                 │
│  ┌──────────────────────────────────────┐                │
│  │ ✅ Correct:    8 questions           │                │
│  │ ❌ Incorrect:  2 questions           │                │
│  │ ⏭️  Skipped:    0 questions           │                │
│  │ ⏱️  Avg Time:   12 sec/question      │                │
│  └──────────────────────────────────────┘                │
│                                                            │
│  📈 Performance Graph:                                     │
│  [Visual bar chart showing Q1-Q10 correctness]            │
│                                                            │
│  📝 Detailed Review:                                       │
│  ┌────────────────────────────────────────────────┐      │
│  │ Q1: What is JSX?                      ✅       │      │
│  │ Your Answer: JavaScript XML                    │      │
│  │ Status: Correct                                │      │
│  ├────────────────────────────────────────────────┤      │
│  │ Q2: Purpose of useState?              ❌       │      │
│  │ Your Answer: Handle side effects               │      │
│  │ Correct Answer: Manage component state         │      │
│  │ Explanation: useState is a hook for state...   │      │
│  └────────────────────────────────────────────────┘      │
│                                                            │
│  [🔄 Retake Quiz] [🆕 New Quiz] [📥 Download Report]     │
└────────────────────────────────────────────────────────────┘

🚀 Built with passion to help you ace your interviews! 🎯

Made with ❤️ and ☕ | Powered by AI

Happy Interviewing! 🎉

Remember: Practice makes perfect. Keep interviewing, keep improving! ✨

Name		Name	Last commit message	Last commit date
Latest commit History 50 Commits
ai-interview-mocker		ai-interview-mocker
README.md		README.md

Folders and files

Latest commit

History

Repository files navigation