💎 PrepAI: Immersive Multimodal Technical Interview Intelligence

"Bridging technical competency and behavioral biometrics in a singular, state-of-the-art diagnostic environment."

Empowering candidates to conquer high-pressure technical screenings, and offering administrators a unified dashboard to monitor progression.

---

🌐 Production Deployments

Important

🚀 Live Web Application (Frontend): https://prep-ai-smoky-five.vercel.app/

⚡ Live Server Application (Backend): https://prep-ai-37pj.onrender.com

Note: The server application is hosted on Render's cloud cluster. Please allow 1-2 minutes on the first load for the free tier web container to spin up from cold sleep state.

---

🌌 Platform Architecture & Comparative Advantage

Traditional interview preparation platforms are static and passive. PrepAI disrupts this model by introducing a synchronous diagnostic loop correlating technical, behavioral, and acoustic vectors in real-time.

Feature Category	Traditional Tools	PrepAI AI Hybrid
Interviewer Presence	Static Question List	Google Gemini AI Agent with contextual follow-up memory
Behavioral Feedback	None	MediaPipe / OpenCV face posture & gaze metrics
Speech Analytics	Standard Recording	Librosa YIN acoustic confidence & stress classification
Voice Interaction	Text-only input	HTML5 Speech Recognition (Voice-to-Text)
Code Submissions	Basic Compiler	Neural Monaco IDE with automated space/time complexity reviews

---

🤖 The Custom Machine Learning Laboratory (/ml)

PrepAI implements custom-trained pipelines directly in the /ml directory, processing candidate behavioral signals locally on frame-by-frame feeds:

graph TD
    A[Raw Candidate Stream] --> B[Computer Vision Pipeline]
    A --> C[Acoustic Processing Pipeline]
    
    B --> B1["MediaPipe Pose Tracking (Shoulder/Hip)"]
    B --> B2["OpenCV solvePnP (3D Head Rotation)"]
    B --> B3["EAR (Eye Aspect Ratio Blink tracking)"]
    
    C --> C1["Librosa RMS (Energy & Confidence)"]
    C --> C2["YIN Algorithm (Voiced Pitch Jitter)"]
    C --> C3["Split effects (Speech-to-Silence Fluency)"]

Loading

🤸‍♂️ 1. Pose Tracking & Posture Analytics (/ml/cv/posture_analysis.py)

Uses the MediaPipe Pose solution to track spatial alignments:

• Maps spatial metrics for key joints (LEFT_SHOULDER, RIGHT_SHOULDER, LEFT_HIP, and RIGHT_HIP).
• Implements inverse tangent equations to check angular slopes: $$\theta_{\text{shoulder}} = \text{deg}\left(\arctan2\left(Y_{\text{right}} - Y_{\text{left}}, X_{\text{right}} - X_{\text{left}}\right)\right)$$
• Detects if a candidate is slouching, exhibiting signs of discomfort, or shifting away from the focal frame during high-intensity scenarios.

👓 2. Gaze Integrity & Head Rotation (/ml/cv/eye_tracking.py)

• 3D Head Pose Mapping: Implements cv2.solvePnP (Perspective-n-Point) to calculate 3D head rotation angles (Pitch, Yaw, Roll) based on MediaPipe coordinates mapped to standard 3D human facial vectors. Logs warnings if rotation exceeds a $15^\circ$ angle (detecting if candidates are looking away to read notes).
• Eye Aspect Ratio (EAR) Blink Detection: Integrates dynamic vertical-to-horizontal eye aspect equations to compute eye fatigue levels while suppressing blinks during vocal mouth movement (talking detector integration).

📈 3. Acoustic Processing & Vocal Emotion Analytics (/ml/audio/emotion_detector.py)

• Confidence Metrics: Analyzes root-mean-square (RMS) energy (librosa.feature.rms) from acoustic waveforms to measure voice volume.
• Nervousness Jitter: Runs the YIN Pitch Algorithm (librosa.pyin) over voiced speech. Pitch standard deviation ($\sigma_{f0}$) variation is measured to identify stress indicators.
• Fluency Index: Utilizes silent-interval splits (librosa.effects.split) to evaluate speech-to-pause ratios, identifying verbal hesitations.

---

🚀 Key Modules & Feature Sets

👨‍💻 1. Candidate Features & Activities

• 🎙️ Dynamic Scenario Simulator (Mock Interviews):
  • Context-Aware AI Interviewer: Generates highly tailored questions based on your specific job role, target industry, and uploaded resume contents.
  • Conversational Persistence: The AI remembers your responses, asking challenging, deep-dive follow-up questions to test your architectural limits.
  • Speech Narration: Immersive vocal readings of prompt cards using HTML5 Web Speech.
  • Comprehensive Scorecards: Instant breakdowns of your Clarity, Technical Accuracy, and Confidence with actionable improvement recommendations.
• 💻 The Neural Coding Dojo (Algorithmic IDE):
  • Professional IDE: Integrated Monaco Editor supporting full syntax highlighting, autocompletion, and multiple programming languages (Python, Javascript, Java, C++).
  • Deep AI Code Review: Instantly analyzes code submissions, pointing out time/space complexity (Big-O), potential edge cases, logic bugs, and SOLID/DRY violations.
• 📝 ATS Resume Scorer & Global Vault:
  • Semantic Scoring Model: Compares your resume structure and phrasing against specific target descriptions.
  • ATS Diagnostics: Identifies critical keyword gaps, missing technical skills, and ATS bot counter-measures.
  • Global Resume Sync: Upload a resume once, and it propagates instantly to guide custom questions generated in mock interviews.
• 🧭 Smart Onboarding & Unified Dashboard:
  • Tailored Roadmap: A brief, three-question personalized onboarding flow mapping out your level, education, and target stack.
  • Interactive Analytics: Visually track your mock interview history, code challenge completions, and progression trends.
  • AI Chatbot Companion: A floating conversational helper present on your dashboard to provide immediate system tips and technical guidance.

---

🛡️ 2. Administrator Features & Dashboard

PrepAI includes a completely separate, highly secure, and visually striking Administrator Panel designed to oversee the ecosystem's usage metrics:

• 🔒 Strict Role Protection: Access-guarded routes ensure candidate accounts cannot reach administration endpoints.
• 📊 Single-Page Visual Control Room:
  • Active Registration Metrics: Displays a single, premium total member tracker card.
  • 7-Day Growth Trend: Full-width SVG area chart tracking daily member growth and candidate registration trends over the past week.
  • Candidates Preview: A concise grid preview showing the 5 most recent registrations.
  • "See More" Pagination: Quick redirection pathway to the exhaustive candidate logs database.
• 📂 Searchable Candidate Register (/admin/users):
  • Complete Log Search: Allows admins to search the full directory of candidate profiles by Name or Email address.
  • Detailed Analytics Columns: Tracks candidate Email IDs, solved dojo problems, average mock interview scores, total interviews completed, and onboarding status.
• 👁️ Deep-Dive Activity Popup:
  • Clicking a candidate's name from either directory triggers a comprehensive dashboard overlay panel.
  • 📈 Mock Score Progression Chart: An SVG line chart rendering that specific user's score history chronologically across interviews.
  • ⚡ 7-Day Engagement Chart: To chart daily activity count frequencies (interviews, code submissions, resumes uploaded) for that candidate.
  • 🕒 Live Activity Feed: A structured timeline logging every technical activity, challenge submitted, or resume uploaded with precise timestamps.
• 🧩 Tailored Navigation Focus: Sidebar menus, user profiles, and floating chatbots are automatically hidden when an admin logs in to ensure the dashboard remains fully dedicated to system analytics. A secure Sign Out button is permanently anchored to the sticky top header.

---

📂 Project Anatomy

Prep_AI/
├── frontend/                     # The Reactive Visual Interface (React/Vite)
│   ├── src/
│   │   ├── components/           # Reusable Atomic UI Components
│   │   │   ├── ProtectedRoute.jsx # Route guarding for authentication tiers
│   │   │   └── Layout.jsx         # Custom frame layout handling admin vs user contexts
│   │   ├── context/              # Centralized State Management
│   │   │   └── AuthContext.jsx   # Session state, login credentials, and user data flow
│   │   ├── pages/                # Page View Controllers
│   │   │   ├── Dashboard.jsx     # User dashboard showing mock history & resume uploads
│   │   │   ├── CodingDojo.jsx    # Algorithmic code editor workspace with Monaco engine
│   │   │   ├── Onboarding.jsx    # Personalized 3-question profile builder
│   │   │   ├── InterviewLive.jsx # Vocal simulation featuring Speech Synthesis and face-api.js
│   │   │   ├── AdminDashboard.jsx# Admin visual headquarters with SVG growth trend charts
│   │   │   └── AdminUsersList.jsx# Exhaustive searchable catalog of candidate records
│   │   ├── routes/
│   │   │   └── AppRoutes.jsx     # Global router linking pages and layout wrappers
│   │   ├── services/
│   │   │   └── api.js            # Unified central Axios client handling credentials and headers
│   │   └── index.css             # Main styling system, layout constants, and variables
│   └── package.json              # Frontend modules, Monaco editor, and Lucide react settings
├── backend/                      # The Neural Operations Core (Flask)
│   ├── routes/                   # Blueprint-based modular API Endpoints
│   │   ├── auth.py               # User onboarding, verification, and session creation
│   │   ├── interview.py          # Dynamic scenario simulators and transcription feedback
│   │   ├── dojo.py               # Code evaluation engine and algorithmic constraints
│   │   └── admin.py              # Candidate directories, chronologies, and metrics
│   ├── utils/                    # Signal Processing & Parser Providers
│   │   ├── ai_helpers.py         # Google Gemini / Llama 3 custom system orchestrations
│   │   ├── audio_helpers.py      # Librosa root-mean-square energy and YIN pitch variation
│   │   ├── cv_helpers.py         # Head posture alignment and gaze vector tracking
│   │   └── auth_helpers.py       # JWT creation, decoding, and admin checks
│   ├── models/                   # Database schemas
│   │   └── database.py           # MongoDB aggregation queries and indexing definitions
│   ├── scripts/                  # Operations & Database Setup
│   │   └── init_db.py            # Collections bootstrapping and admin credential insertion
│   ├── main.py                   # Central server gatekeeper and configuration
│   └── requirements.txt          # Python requirements: Flask, PyMongo, Librosa, PyJWT
├── ml/                           # Machine Learning Research Laboratory
│   ├── cv/                       # Computer Vision modules
│   │   ├── eye_tracking.py       # OpenCV Perspective-n-Point and EAR tracking
│   │   └── posture_analysis.py   # MediaPipe joint landmark tilt calculators
│   ├── audio/                    # Speech analysis
│   │   └── emotion_detector.py   # Vocal energy RMS and fundamental frequency SD analytics
│   └── nlp/                      # Natural Language Processing
│       ├── resume_parser.py      # Semantic CV extractors
│       └── answer_evaluator.py   # Response embeddings similarity calculators
├── package.json                  # Root runner orchestrating concurrent frontend & backend booting
└── PROJECT_STATE.md              # Global architectural states and milestone logs

---

🔧 Step-by-Step Installation & Local Setup

To run the PrepAI ecosystem locally, follow this guide precisely:

Step 1: Clone & Check Prerequisites

Make sure you have the following installed on your machine:

• Node.js (v18 or higher)
• Python (v3.10 or higher)
• MongoDB (Local server or MongoDB Atlas cluster connection string)
• Ollama (Optional, for running local offline models)

Step 2: Download Local AI Model (Optional Fallback)

If you wish to host Llama3 models locally:

1. Ensure Ollama is running on your machine.
2. Open your terminal and run:

   ollama run llama3:8b

   (This downloads Meta's Llama 3 8-Billion parameter model, which is ~4.7GB, to run full inference locally with zero API costs).

Step 3: Database & API Key Configuration

Create a .env file inside the backend/ directory and configure the environment:

# Database Configuration
MONGO_URI=mongodb://localhost:27017/prepai   # Or your MongoDB Atlas connection string
DB_NAME=prepai

# Security Token (JWT)
SECRET_KEY=your_super_secret_jwt_key

# Distributed AI Core Configuration
# Choose "gemini" for cloud APIs or "ollama" for offline local processing
AI_PROVIDER=gemini
GEMINI_API_KEY=your_gemini_api_key_here

# Local Ollama AI Settings (Fallback or Offline Mode)
OLLAMA_HOST=http://127.0.0.1:11434
OLLAMA_MODEL=llama3:8b                        # Use Llama 3 8B model locally

Step 4: Fast Install (Root Directory)

PrepAI is configured as a Monorepo. Install all npm modules, set up the backend Python virtual environment (.venv), and fetch python dependencies with a single command from the root directory:

npm run install-all

Step 5: Initialize MongoDB Collections

Before starting the servers, configure indexes and import the admin user account credentials. Set up default credentials (email: admin@gmail.com | password: admin123) using the initialization script:

# Navigate to the backend directory
cd backend

# Activate Virtual Environment
# Windows:
.venv\Scripts\activate
# Mac/Linux:
source .venv/bin/activate

# Initialize collections
python scripts/init_db.py

You should see a "Database initialization completed successfully!" message.

---

🚀 How to Run the Project Locally

You can launch both the backend server and the frontend interface concurrently with a single command from the root directory (Prep_AI/):

npm run dev

Server Allocation

• Vite Frontend Development Server: Runs on http://localhost:5173
• Flask Backend API Server: Runs on http://localhost:5000

Open your browser and navigate to http://localhost:5173. Log in as a Candidate to experience technical training, or log in using the credentials below to access the Admin Panel:

• Admin Email: admin@gmail.com
• Admin Password: admin123

---

🏆 THE IMPACT & ROADMAP

PrepAI is engineered to empower job seekers by bringing high-fidelity diagnostic tools right to their browsers. By evaluating confidence alongside raw technical competency, we provide candidates with the insights they need to conquer competitive hiring loops and succeed in their careers.

Prepare for the best. Be the better.

---

Engineered for Excellence by Prathmesh Nitnaware