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] â
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ