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.
Will upload soon
interviewMockerVideo.mp4
AI Interview Mocker is a professional interview preparation platform that simulates real interview conditions with advanced features designed to help you succeed:
|
|
|
|
- ✨ 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
|
|
|
User Input → AI Generation → Interview Setup
↓ ↓ ↓
Job Details → 5 Questions → Proctoring Check
- 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
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
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
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)
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
- Framework: Next.js 15 (App Router)
- UI Library: React 19
- Styling: Tailwind CSS
- Components: shadcn/ui
- Icons: Lucide React
- Forms: React Hook Form
- API: Next.js API Routes
- Database: PostgreSQL (Neon Serverless)
- ORM: Drizzle ORM
- Authentication: Clerk
- 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
- Platform: Vercel (recommended)
- Database: Neon PostgreSQL
- CDN: Vercel Edge Network
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
┌─────────────┐ ┌──────────────┐ ┌─────────────┐
│ 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 │
└──────────────────────────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────────────────┐
│ 🎯 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] │
└──────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────┐
│ 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 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] │
└────────────────────────────────────────────────────────────┘