AI Mock Interview Setup Guide

CareerBoost is a Next.js-based platform for practicing interviews with AI-powered adaptive questioning. https://career-boost-l8l5dc6b9-nightfury2415s-projects.vercel.app/

🚀 Quick Start

1. Install Dependencies

npm install

All required dependencies are already listed in package.json:

• Next.js 16.0+
• React 18.3+
• shadcn/ui components
• TailwindCSS 4.1+
• Lucide React icons

2. Environment Setup

Your .env.local file should contain your Hugging Face API key:

HUGGINGFACE_API_KEY=

Important: .env.local is already in .gitignore - never commit this file!

3. Start Development Server

npm run dev

Open http://localhost:3000/mock-interview in your browser.

🔧 Technical Architecture

API Route: /api/interview/chat

Endpoint: POST /api/interview/chat

Request Body:

{
  "position": "Senior Software Engineer",
  "experience": "5-7",
  "interviewType": "technical",
  "company": "Meta",
  "jobDescription": "...",
  "messages": [
    { "role": "user", "content": "..." },
    { "role": "assistant", "content": "..." }
  ],
  "isFirstMessage": false
}

Response:

{
  "question": "Can you describe your experience with...",
  "success": true,
  "usingFallback": false
}

Components

mock-interview-chat.tsx

• Real-time chat interface
• Message history with timestamps
• Timer with visual progress indicator
• Transcript download functionality
• AI response generation with fallback support

page.tsx

• Main page component
• Manages interview state (setup vs. active interview)
• Routes between setup and chat components

🤖 AI Integration

Hugging Face API

Features:

• Context-aware responses
• Conversation history tracking
• Interview-type specific questioning
• Adaptive difficulty based on experience level

Fallback System

If the Hugging Face API is unavailable, the system uses curated fallback questions based on interview type:

• Technical: Questions about projects, technical challenges, tools
• Behavioral: Questions about teamwork, failures, stress management
• System Design: Questions about scalability, architecture, databases
• Coding: Algorithm and data structure problems
• Mixed: Combination of all types

🔑 Key Features

✅ AI-Powered Questions - Uses Mistral-7B via Hugging Face API
✅ Context-Aware - Remembers conversation history
✅ Adaptive Difficulty - Adjusts based on experience level
✅ Time Management - Configurable timer with warnings
✅ Transcript Download - Save interviews for review
✅ Fallback Handling - Works even if API has issues
✅ Multiple Interview Types - Technical, Behavioral, System Design, Coding
✅ Responsive Design - Works on desktop and tablet

🧪 Testing

Test the API Directly

curl -X POST http://localhost:3000/api/interview/chat \
  -H "Content-Type: application/json" \
  -d '{
    "position": "Full Stack Engineer",
    "experience": "5-7",
    "interviewType": "technical",
    "company": "Meta",
    "jobDescription": "We are looking for...",
    "messages": [],
    "isFirstMessage": true
  }'

Expected response:

{
  "question": "Can you describe your experience with full-stack development?",
  "success": true
}

Test the Frontend

1. Navigate to http://localhost:3000/mock-interview
2. Fill in the setup form
3. Start the interview and interact with the chat
4. Download the transcript to verify functionality

🐛 Troubleshooting

Issue: 500 Internal Server Error

Cause: API route not found or Hugging Face API key missing

Solution:

1. Verify app/api/interview/chat/route.ts exists
2. Check that HUGGINGFACE_API_KEY is set in .env.local
3. Restart dev server: npm run dev
4. Check server logs for detailed error messages

Issue: Module not found errors

Cause: Missing component imports

Solution:

# Make sure these shadcn/ui components are installed:
npx shadcn-ui@latest add button
npx shadcn-ui@latest add input
npx shadcn-ui@latest add card
npx shadcn-ui@latest add select
npx shadcn-ui@latest add checkbox
npx shadcn-ui@latest add textarea
npx shadcn-ui@latest add alert

Issue: Slow API responses

Cause: Hugging Face API is loading the model

Solution:

• First request takes 30-60 seconds as the model loads
• Subsequent requests are faster
• The fallback system provides instant responses if needed

Issue: Chat component not showing messages

Cause: Component state not updating properly

Solution:

1. Check browser console for JavaScript errors
2. Verify the API is returning responses correctly
3. Clear browser cache and reload
4. Check that all required UI components are installed

📝 Environment Variables

# Hugging Face API Key (Required)
# Get from: https://huggingface.co/settings/tokens
HUGGINGFACE_API_KEY=your_key_here

🚀 Production Deployment

Build for Production

npm run build
npm start

Environment Setup for Production

1. Set environment variables in your hosting platform (Vercel, Railway, etc.)
2. Never commit .env.local to version control
3. Use secure secret management for API keys

Deployment on Vercel (Recommended)

vercel deploy

Configure environment variables in Vercel dashboard:

• HUGGINGFACE_API_KEY

📚 Resources

• Next.js Documentation
• Hugging Face API
• shadcn/ui Components
• TailwindCSS

📄 License

MIT License

Copyright (c) 2026 Malavya Raval, Dev Modi

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Last Updated: November 2025