🧠 AI Interview Simulator – React × Cloudflare Workers

✨ What is this?

AI Interview Simulator lets you practice technical interviews right in the browser:

1. Webcam & mic capture your answer.
2. Client-side Whisper tiny WASM transcribes speech to text offline.
3. A serverless Cloudflare Worker sends your answer to a free-tier LLM
   (Google Gemini Flash or Mistral-Small).
4. The LLM grades you on a 4-part rubric (communication, technical depth, clarity, problem-solving),
   computes an overall score, gives a follow-up question, and summarizes feedback.

All of this runs 100 % free-tier – no servers, no Docker, no credit card.

---

🏗️ High-Level Architecture

┌──────────────┐   HTML/JS/CSS   ┌────────────────┐    JSON    ┌────────────────────┐
│   React SPA  │ ───────────────▶│ Cloudflare CDN │───────────▶│   Worker API       │
│ (Vite build) │                 └────────────────┘            │  advancedFeedback() │
│              │◄── websockets ────────────────────────────────┤ (Gemini / Mistral) │
│   Whisper    │            video/audio upload                 └────────────────────┘
└──────────────┘                                                     ▲
         ▲  speech-to-text (WASM)                                    │
         └────────────────────────────────────────────────────────────┘

• **React SPA** deployed on **Cloudflare Pages**  
• **Cloudflare Worker** (Edge runtime < 5 ms cold-start) exposes `/api/interview/*` routes  
• **Gemini Flash** _or_ **Mistral-Small** free endpoints power grading & feedback  
• Optional: R2 for video blobs, D1 for transcripts & history
<details> <summary>Mermaid diagram</summary>

flowchart LR
  subgraph Browser
    A[React UI] -- getUserMedia --> B(Camera+Mic)
    B --> C[Whisper WASM]
    C -->|transcript| D[POST /answer]
  end
  D -->|JSON| WorkerAPI[Cloudflare Worker]
  WorkerAPI -->|LLM call| GemOrMistral>Gemini/Mistral API]
  WorkerAPI -->|feedback JSON| A
  A -->|render rubric| UI[Results Panel]
</details>
🔥 Key Features
Feature	Stack	Notes
Real-time recording	Web RTC (MediaRecorder)	Works in any modern browser
Offline STT	Whisper tiny (WASM via @xenova/transformers)	No upload costs
Chain-of-Thought grading	Gemini Flash / Mistral Small	Free tiers, hidden CoT
Rubric + follow-up	Worker formats strict JSON	Easy to parse
Edge-native	Cloudflare Pages + Workers	Zero cold-starts after first hit
One-command deploy	wrangler pages deploy	Creates cert + CDN

🧩 Project Structure

interview-simulator/
├─ frontend/           # React (Vite)
│  ├─ src/
│  │  ├─ components/
│  │  │  ├─ Interview.jsx
│  │  │  ├─ VideoRecorder.jsx
│  │  │  └─ Result.jsx
│  │  ├─ App.jsx
│  │  ├─ main.jsx
│  │  └─ index.css
│  ├─ index.html
│  ├─ vite.config.js
│  └─ package.json
└─ worker/             # Cloudflare Worker
   ├─ src/worker.js
   └─ wrangler.toml
🚀 Quick Start (Local Dev)

# 1. Clone
git clone https://github.com/yourname/interview-simulator.git
cd interview-simulator

# 2. Front-end dev server
cd frontend
npm install
npm run dev     # http://localhost:5173

# 3. Worker in dev mode (API proxy)
cd ../worker
wrangler dev --port 8787   # http://localhost:8787
Tip: Vite proxy can forward /api/** to localhost:8787 for end-to-end testing.

🔑 Environment Variables
Variable	Where	Purpose
GEMINI_API_KEY	Worker secret	Google Generative Language API key (optional)
MISTRAL_API_KEY	Worker secret	Mistral AI key (fallback)
VITE_API_BASE	Pages → Env Var	If Worker runs on a different domain

Set secrets:


# in worker/
wrangler secret put GEMINI_API_KEY
# or
wrangler secret put MISTRAL_API_KEY
🛫 Deploy to Cloudflare ⚡
1 Deploy Worker API

cd worker
wrangler deploy
# → https://<hash>.workers.dev
2 Build & Deploy Pages

cd ../frontend
npm run build
wrangler pages deploy dist --project-name=interview-sim --branch production
# → https://interview-sim.pages.dev
(Pass --account-id YOUR_ACCOUNT_ID if Wrangler can’t detect it.)

🛣️ Roadmap
Milestone	Status
✅ Speech-to-Text (Whisper tiny WASM)	done
✅ Rubric + Follow-up Question	done
⏳ R2 storage for video blobs	next
⏳ Persistent interview history (D1)	next
⏳ OAuth login (GitHub/Google)	planned
⏳ Per-competency trend charts	planned

🤝 Contributing
Fork the repo & create your branch:
git checkout -b feature/awesome

Commit your changes:
git commit -m "feat: add awesome"

Push to the branch:
git push origin feature/awesome

Open a PR and describe your awesome!

For larger features, please file an issue first to discuss.

📜 License
MIT © 2025 Souvik Ghosh

🙏 Acknowledgements
Cloudflare Workers – edge compute ❤️

@Xenova Transformers.js – pure-JS Whisper

Google Gemini & Mistral AI – free LLM tiers

Inspiration from nicobytes/interview-full-stack (Angular edition)

Happy interviewing 🚀