InterviewAI - AI-Powered Interview Practice Platform

A full-stack application for practicing mock interviews with AI-powered feedback, real-time face detection, and tab-switch monitoring.

Features

🎤 AI-Powered Mock Interviews - Practice with realistic interview questions
📹 Real-time Face Detection - MediaPipe and OpenCV integration for face monitoring
⚠️ Tab Switch Detection - Monitors and warns when users switch tabs or applications
🎯 Interview Analytics - Track your performance and get feedback
💬 Voice & Text Input - Answer questions via typing or voice recording

Prerequisites

Before you begin, ensure you have the following installed:

Node.js (v18 or higher) - Download
Python (v3.8 - v3.12) - Download
Git - Download
Webcam - For face detection feature
npm or yarn - Comes with Node.js

Getting Started

💡 New to the project? Check out QUICK_START.md for a faster setup guide!

1. Clone the Repository

git clone <your-repository-url>
cd BE_Project

2. Backend Setup (Python/Flask)

Step 1: Create and Activate Virtual Environment

Windows:

python -m venv venv
venv\Scripts\activate

Linux/Mac:

python3 -m venv venv
source venv/bin/activate

Step 2: Install Python Dependencies

cd backend
pip install --upgrade pip
pip install -r requirements.txt

Note: If you encounter issues with MediaPipe installation:

Make sure you're using Python 3.8-3.12
Try installing protobuf first: pip install protobuf>=4.25.3
Then install MediaPipe: pip install mediapipe==0.10.21

Step 3: Verify Backend Installation

python -c "import mediapipe; import flask; print('All dependencies installed successfully!')"

3. Frontend Setup (React/TypeScript)

Step 1: Navigate to Frontend Directory

cd InterviewAI

Step 2: Install Node Dependencies

npm install

Alternative with yarn:

yarn install

Step 3: Verify Frontend Installation

npm run build

Running the Application

Start the Backend Server

Activate your virtual environment (if not already activated):

# Windows
venv\Scripts\activate

# Linux/Mac
source venv/bin/activate

Navigate to backend directory:
```
cd backend
```
Start the Flask server:
```
python app.py
```
The backend will start on http://localhost:5000

Start the Frontend Server

Open a new terminal window/tab
Navigate to frontend directory:
```
cd InterviewAI
```
Start the development server:
```
npm run dev
```
The frontend will start on http://localhost:8080 (or the port specified in vite.config.ts)

Access the Application

Open your browser and navigate to:

http://localhost:8080

Project Structure

BE_Project/
├── backend/                 # Python Flask backend
│   ├── app.py              # Main Flask application
│   ├── requirements.txt    # Python dependencies
│   └── README.md          # Backend-specific documentation
│
├── InterviewAI/            # React frontend
│   ├── src/
│   │   ├── components/    # React components
│   │   ├── hooks/         # Custom React hooks
│   │   ├── pages/         # Page components
│   │   └── ...
│   ├── package.json       # Node.js dependencies
│   └── vite.config.ts     # Vite configuration
│
├── venv/                   # Python virtual environment (gitignored)
├── .gitignore              # Git ignore rules
└── README.md              # This file

API Endpoints

Backend API (Port 5000)

GET /health - Health check endpoint

POST /detect-faces - Face detection endpoint

{
  "image": "base64_encoded_image_string"
}

Configuration

Backend Configuration

The backend runs on http://localhost:5000 by default. To change this, edit backend/app.py:

app.run(host='0.0.0.0', port=5000, debug=True)

Frontend Configuration

The frontend runs on http://localhost:8080 by default. To change this, edit InterviewAI/vite.config.ts:

server: {
  host: "::",
  port: 8080,
}

API URL Configuration

If your backend runs on a different URL, update InterviewAI/src/hooks/useFaceDetection.ts:

const API_URL = 'http://localhost:5000/detect-faces';

Troubleshooting

Backend Issues

MediaPipe not installing:

Ensure Python version is 3.8-3.12
Install protobuf first: pip install protobuf>=4.25.3
Then install MediaPipe: pip install mediapipe==0.10.21

Port already in use:

Change the port in backend/app.py
Or kill the process using port 5000

Import errors:

Make sure virtual environment is activated
Reinstall dependencies: pip install -r requirements.txt

Frontend Issues

Node modules not installing:

Delete node_modules and package-lock.json
Run npm install again

Port already in use:

Change the port in InterviewAI/vite.config.ts
Or kill the process using the port

CORS errors:

Ensure backend is running
Check that backend CORS is enabled in backend/app.py

Face detection not working:

Ensure backend server is running on port 5000
Check browser console for errors
Verify camera permissions are granted

Camera Issues

Camera not accessible:

Grant camera permissions in browser
Check if another application is using the camera
Try refreshing the page

Development

Running in Development Mode

Both servers support hot-reload:

Backend: Set debug=True in app.py (already set)
Frontend: Vite automatically supports hot-reload

Building for Production

Frontend:

cd InterviewAI
npm run build

The built files will be in InterviewAI/dist/

Backend: The backend doesn't require building. For production, consider using:

Gunicorn (Linux/Mac)
Waitress (Windows)
Docker containerization

Contributing

Fork the repository
Create a feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

License

[Add your license here]

Support

For issues and questions:

Check the Troubleshooting section
Review backend and frontend specific READMEs
Open an issue on GitHub

Acknowledgments

MediaPipe for face detection
OpenCV for image processing
React and Vite for frontend framework
Flask for backend framework

FilesExpand file tree

README.md

Latest commit

History