We will be undergoing planned maintenance on January 16th, 2026 at 1:00pm UTC. Please make sure to save your work.

PrepLab

taking interviewing to the next level.

Comment

PrepLab - Getting you hired in today's world.

Inspiration

The "job interview simulation" hackathon project is no unique one. There have been thousands of these applications designed to support candidates that struggle with anxiety, lack confidence, or don't know how to present themselves effectively. Traditional interview preparation methods are limited- they don't provide real time feedback, or simulate actual conditions resulting in poor analysis of non-verbal cues.

Over this weekend, my partner and I were inspired to create PrepLab after building off of the incredibly common project. We recognized that:

  • thousands of interviews are conducted daily, yet most candidates are unprepared
  • Interview anxiety affects 73% of job seekers, impacting their performance
  • There's no comprehensive platform that combines AI-powered questioning, biometric analysis, and real-time feedback
  • Existing solutions lack the depth needed to truly prepare candidates for modern remote interviews

PrepLab bridges this gap by providing a complete interview preparation ecosystem that helps candidates build confidence, improve their responses, and understand their performance metrics in real-time.

What does it do exactly?

PrepLab is a dual-channel Gemini powered resume conditioning and interview simulation practice platform that provides end-to-end preparation through a realistic environment and extensive metrics for an accurate and comprehensive analysis.

Core Features:

  1. Pre-Interview Preparation Suite

    • Real-time environment diagnostics (lighting, noise, posture)
    • Breathing exercises powered by ElevenLabs narration
    • Voice warm-up exercises
    • Biometric monitoring (heart rate, blink rate) powered by Presage
    • Anxiety level tracking using biometrics
    • Comprehensive readiness assessment

  2. Interview Simulation

    • PrepBot: A 3D AI interviewer avatar
    • AI-generated interview questions tailored to job descriptions and resumes (powered by Gemini AI)
    • Real-time speech-to-text transcription (stt)
    • Multiple voice options per comfort via ElevenLabs VoiceID API
    • Question-by-question progression with progress tracking

  3. Resume Analysis

    • PDF resume parsing and analysis
    • ATS (Applicant Tracking System) compatibility scoring
    • Overall resume quality assessment
    • Detailed feedback and improvement suggestions (powered by Gemini AI)

  4. On-The-Go Simulator

    • Used VAPI with ElevenLabs VoiceID Agent to provide full system on Mobile Phone
    • Maximizes accessibility for users that are unable to open full desktop application.

  5. User Experience

    • Clean, modern white theme
    • Responsive design that fits all screen sizes
    • Real-time feedback during interviews
    • Session history and progress tracking

How we built it

Tech Stack

Frontend:

  • React 18 with TypeScript
  • Vite
  • Tailwind CSS
  • React Router
  • React Three Fiber & Three.js
  • MediaPipe Face Mesh for real-time face detection and landmark tracking
  • Web Speech API for speech-to-text transcription
  • Web Audio API for real-time audio analysis

Backend:

  • Node.js with Express for RESTful API
  • TypeScript for type safety
  • MongoDB with Mongoose for data persistence
  • Socket.io for real-time communication (future enhancement)

AI & Third-Party Services:

  • Google Gemini AI:
    • Interview question generation
    • Resume analysis and scoring
    • Interview performance evaluation
  • ElevenLabs API:
    • Text-to-speech narration
    • Multiple voice options
    • Natural-sounding question delivery
  • Presage API for:
    • Heart rate estimation
    • Breathing rate analysis
    • Biometric monitoring
  • SendGrid for:
    • Email report delivery
    • Interview summary emails
  • VAPI for:
    • Pocket Interview Assistant for On-The-Go simulation

Key Libraries:

  • pdf-parse for resume text extraction
  • @mediapipe/face_mesh for facial landmark detection
  • react-webcam for camera access
  • jspdf & html2canvas for PDF report generation

Challenges we ran into

1. Real-time Biometric Accuracy

  • Challenge: Getting accurate heart rate and breathing rate from video without specialized hardware
  • Solution: Implemented rPPG (remote photoplethysmography) algorithm that analyzes subtle color changes in facial regions. Used Presage API for validation and improved our custom algorithm with smoothing and filtering techniques.

2. Speech Recognition Duplication

  • Challenge: Web Speech API was repeating transcriptions, causing paragraphs to duplicate
  • Solution: Implemented result index tracking to only process new results, preventing duplicate text accumulation. Added proper state management for final vs. interim results.

3. Layout and Responsiveness

  • Challenge: Ensuring all components fit on screen without scrolling, especially on different screen sizes
  • Solution: Implemented strict height constraints, flexbox layouts with proper min/max heights, and reduced padding/spacing. Used viewport-based units and overflow management.

4. Posture Detection Sensitivity

  • Challenge: Head pose detection was too sensitive, constantly showing "needs adjustment" warnings
  • Solution: Significantly increased threshold values, added dead zones, and implemented smoothing algorithms. Adjusted parameters to be more lenient while still providing useful feedback.

5. API Integration Reliability

  • Challenge: Multiple third-party APIs (Gemini, ElevenLabs, Presage, SendGrid) with different rate limits and error handling
  • Solution: Implemented comprehensive error handling, fallback mechanisms, and retry logic. Added graceful degradation when APIs are unavailable.

6. TypeScript Migration

  • Challenge: Converting JavaScript codebase to TypeScript while maintaining functionality
  • Solution: Gradual migration with proper type definitions, used @ts-ignore strategically for complex integrations, and maintained type safety throughout.

Accomplishments that we're proud of

  1. Complete Interview Preparation Ecosystem
  2. Real-time Biometric Monitoring
  3. Intelligent Question Generation
  4. Comprehensive Analytics
  5. Error Handling
  6. Performance Optimization

What we learned

Technical Learnings

  1. Computer Vision & Biometrics

    • Learned about rPPG (remote photoplethysmography) for non-contact heart rate measurement
    • Gained expertise in MediaPipe for facial landmark detection

  2. 3D Graphics in Web

    • Mastered React Three Fiber for 3D rendering in React
    • Learned about WebGL optimization techniques

  3. Web APIs

    • Deep dive into Web Speech API and its quirks
    • Web Audio API for real-time audio analysis
    • WebRTC for camera and microphone access

  4. AI Integration

    • Best practices for integrating multiple AI services
    • Handling API rate limits and errors
    • Structuring prompts for consistent JSON responses

  5. State Management

    • Complex state management patterns in React
    • Context API for global state
    • Refs for persistent data across renders

Technical Improvements

  1. Security & Privacy / Auth
    • End-to-end encryption for interview data
    • GDPR compliance
    • Data anonymization options
    • Secure video storage

PrepLab is committed to optimizing interview preparation and helping job seekers worldwide build confidence and succeed in their career journeys, whether it starts from the Resume or from Practice Questions.

Built With

Share this project:

Updates