PrepAI.io is a comprehensive, real-time AI interview practice platform that helps users master their interviews through voice-first AI conversations, video analysis, and detailed behavioral feedback.
- Voice-First AI Interviews - Natural conversation with < 2 second latency using Web Speech API for speech recognition and synthesis
- Real-Time Video Analysis - Live webcam feed with behavioral metrics tracking
- Resume Parsing - Upload PDF resumes for AI-generated custom interview questions
- Multi-Type Interviews - Support for HR and Technical interview formats
- 5-Question Sessions - Structured interview flow with skip/next navigation
- Professional AI interviewer avatar ("Sarah") that speaks questions aloud
- Natural female voice synthesis with multiple voice options
- Visual speaking indicator when AI is talking
- Smooth question transitions with audio feedback
Real-time tracking and analysis of:
- Eye Contact - Camera-based gaze detection
- Posture Analysis - Body positioning and professionalism
- Facial Expressions - Confidence, happiness, neutrality, nervousness breakdown
- Speaking Pace - Words per minute analysis
- Fluency Score - Natural speech flow measurement
- Filler Words - Detection and counting of "um", "uh", "like", etc.
- Response Time - Per-question timing metrics
- Voice Input - Continuous speech recognition with live transcript
- Text Input - Fallback textarea for typing responses
- Combined Mode - Both methods work together, with speech syncing to text
- Overall score (0-100) with visual progress ring
- Individual scores: Communication, Content Quality, Confidence
- Interview statistics: Duration, Questions Answered, Type, Role
- Key stats: Total Duration, Words Spoken, Average Response Time, Filler Word Count
- Behavioral metrics with progress bars
- Facial expression breakdown chart
- Question-by-question transcript with duration and word count
- Personalized strengths and improvement recommendations
- Framework: Next.js 16 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS with custom design tokens
- UI Components: shadcn/ui
- Fonts: Inter (body), Space Grotesk (display)
- APIs:
- Web Speech API (speech recognition & synthesis)
- MediaDevices API (camera/microphone access)
- AI SDK for resume parsing
flowchart TD
Start([Start])
subgraph FRONTEND [FRONTEND]
direction TB
Login[User Login or Signup]
SelectType[Select Interview Type]
UploadResume[Upload Resume]
FinalReport[Final Interview Report]
DisplayResults[Display Results]
Login --> SelectType
SelectType --> UploadResume
FinalReport --> DisplayResults
end
subgraph BACKEND [BACKEND]
FastAPI[FastAPI Core Layer]
end
subgraph N8N [N8N WORKFLOW]
direction TB
TriggerWorkflow[Trigger Workflow]
subgraph QUESTION_GEN [QUESTION GENERATION]
direction TB
CallLLM[Call LLM API]
GenQuestions[Generate Round Questions]
CallLLM --> GenQuestions
end
subgraph EVAL_ENGINE [EVALUATION ENGINE]
direction TB
DockerSandbox[Docker Code Sandbox]
LLMEval[LLM Answer Evaluation]
TimeComplexity[Time Complexity Analysis]
DockerSandbox --> LLMEval
LLMEval --> TimeComplexity
end
subgraph BEHAVIORAL [BEHAVIORAL ANALYSIS]
direction TB
STT[Speech to Text]
HFModel[HuggingFace Emotion Model]
CommScoring[Communication Scoring]
STT --> HFModel
HFModel --> CommScoring
end
subgraph SCORING [SCORING AND REPORTING]
direction TB
CalcScore[Calculate Round Score]
StoreDB[(Store in PostgreSQL)]
CalcScore --> StoreDB
end
GenerateFeedback[Generate Feedback Report]
TriggerWorkflow --> CallLLM
TriggerWorkflow --> STT
GenQuestions --> DockerSandbox
TimeComplexity --> CalcScore
CommScoring --> CalcScore
StoreDB --> GenerateFeedback
end
End([End])
Start --> Login
UploadResume --> FastAPI
FastAPI --> TriggerWorkflow
GenerateFeedback -- Result --> FastAPI
FastAPI -- Send to Frontend --> FinalReport
DisplayResults --> End
app/
├── api/
│ ├── interview/ # AI conversation endpoint
│ │ └── route.ts
│ └── parse-resume/ # Resume parsing endpoint
│ └── route.ts
├── globals.css # Global styles and design tokens
├── layout.tsx # Root layout with fonts
└── page.tsx # Main page with step routing
components/
├── feature-highlights.tsx # Landing page features grid
├── hero-section.tsx # Landing page hero
├── interview-analysis.tsx # Detailed analysis view
├── interview-results.tsx # Results summary view
├── interview-session.tsx # Live interview UI
├── interview-setup.tsx # Interview configuration form
└── prep-logo.tsx # Brand logo component
lib/
├── interview-context.tsx # React context for interview state
└── utils.ts # Utility functions
public/
└── images/
├── ai-interviewer.jpg # AI avatar image
└── dashboard-preview.jpg # Hero section preview image
- Home (
/) - Landing page with value proposition and CTA - Setup - Configure interview: name, role, type, permissions, optional resume upload
- Live Interview - 5-question AI interview with camera/mic
- Results - Score summary with option to view detailed analysis
- Analysis - In-depth behavioral feedback and recommendations
Central state management for the entire interview flow:
interface InterviewContextType {
config: InterviewConfig | null // Interview settings
currentStep: 'home' | 'setup' | 'live' | 'results' | 'analysis'
results: InterviewResults | null // Final scores and data
}interface InterviewConfig {
name: string
role: string
interviewType: 'HR' | 'Technical'
microphoneEnabled: boolean
cameraEnabled: boolean
resumeData?: ResumeData
resumeText?: string
}interface BehavioralMetrics {
eyeContact: number
facialExpressions: {
neutral: number
happy: number
confident: number
nervous: number
}
posture: number
speakingPace: number
fluency: number
fillerWords: number
responseTime: number[]
}The application is fully responsive with:
screen-container- Full viewport height, no horizontal overflowcontent-container- Max-width 1280px with responsive paddingvideo-responsive- 16:9 aspect ratio for video elements- Mobile-first breakpoints:
sm(640px),md(768px),lg(1024px),xl(1280px)
Dark theme with 4 primary colors:
| Token | HSL Value | Usage |
|---|---|---|
--background |
225 15% 10% | Main background |
--foreground |
0 0% 98% | Primary text |
--primary |
211 100% 55% | Blue accent |
--muted-foreground |
220 10% 60% | Secondary text |
- Node.js 18+
- pnpm (recommended) or npm
# Clone the repository
git clone <repository-url>
cd prepai
# Install dependencies
pnpm install
# Run development server
pnpm devRequires browsers with support for:
- Web Speech API (Chrome, Edge recommended)
- MediaDevices API (getUserMedia)
- ES2020+ JavaScript features
- Click "Start Your Free Interview" on the landing page
- Fill in your details and optionally upload a resume
- Grant camera and microphone permissions
- Click "Start Interview" to begin
- Answer questions using voice or text input
- Use Skip to pass questions or Next to continue
- View your results and detailed analysis
- Practice again or start a new interview
- Image optimization with Next.js Image component
- Lazy loading of analysis components
- Efficient re-renders with React Context
- Responsive image sizing with srcset
- Semantic HTML structure
- ARIA labels for interactive elements
- Keyboard navigation support
- Screen reader compatible
- Color contrast compliant
- Vidyankshini Vibhute: Frontend Development, UI Integration, User Experience
- Aditya Yelmar: UI/UX Design, Market Research
- Shravani Tanksale: Core Backend, API Development
- Siddhesh Waghmare: Backend Support, Growth Analysis
MIT License - See LICENSE file for details.
Built with Next.js, Tailwind CSS, and AI SDK by the PrepAI.io team.