OfferQuest AI - SaaS Mock Interview Simulator

OfferQuest AI is a production-ready, premium SaaS-style React application built to simulate live proctored coding and behavioral interviews, complete with automatic AI scoring and visual analytical telemetry.

Features

• Proctored Simulator Room: Live candidate feed widget utilizing webcam access (with animated fallback avatars), synchronized 60-second question countdown rings, character limit tracking, and automatic progress saving.
• Gemini AI Grading: Automatic evaluation scoring for Technical logic, Communication structures, and Confidence, backed by structured JSON prompt responses and reference ideal answers.
• Interviewer Verdict Card: Custom panel verdict summarization detailing hiring recommendation decisions ("Proceed to next round", "Conditional Pass", etc.) based on overall marks.
• SaaS Analytics Dashboard: Visual progression charts (Recharts Area and Bar telemetry), filters for Companies/Roles, XP level, and consecutive practice streak tallies.
• Native PDF Exporter: Instant report downloads compiling session metadata, detailed scores, verdicts, and question reviews with formatted strengths/weaknesses.

---

Technology Stack

• Framework: React + Vite (Single Page Application)
• Styling: Tailwind CSS v4 (Modern utility CSS engine with native Vite compiler integration)
• Animation: Framer Motion (Smooth transitions, glowing blobs, and staggered listings)
• Visual Charts: Recharts (Responsive, interactive SVG charts)
• PDF Compiler: jsPDF (Crisp, native document layout writer)
• Icons: Lucide React

---

Getting Started

1. Installation

Clone the repository and install dependencies:

# Clone the repository
git clone <repository_url>

# Install packages
npm install

2. Configure Gemini API Key

OfferQuest AI supports two methods for setting up your Google Gemini API key:

Option A: Local Environment Variable (Recommended)

Create a .env file in the root directory:

VITE_GEMINI_API_KEY=your_actual_gemini_api_key_here

Option B: Dynamic In-App Settings Overlay

Launch the application and click the Settings Cog (⚙️) in the navigation header. Paste your Gemini API key there to save it securely within your local browser's LocalStorage.

Note: If no API key is configured, the application automatically triggers a high-fidelity Simulated Mock Evaluation Mode which acts as a fallback so that presentation reviewers or judges can test the full experience out-of-the-box!

3. Run Development Server

npm run dev

Navigate to http://localhost:5173 to explore the app.

---

Deployment (Netlify)

The project is fully optimized for Netlify deployment, featuring client-side routing rewrites:

Build Configuration

1. Build Command: npm run build
2. Publish Directory: dist
3. Routing Rewrites: Configured natively inside public/_redirects for clean URL refreshes.
4. Environment Variables: Add VITE_GEMINI_API_KEY under Site Settings > Environment Variables on Netlify to secure API key delivery in production.