🧠 InterviewAI — Smart Interview Simulator

A full-stack AI-powered mock interview platform with a stunning 3D web interface built with React + Three.js + Supabase + Claude AI.

---

✨ Features

• AI-Generated Questions — Tailored to your role, interview type, and difficulty
• Voice + Text Input — Speak or type your answers using Web Speech API
• Real-time AI Feedback — Clarity, Confidence & Correctness scores per answer
• Session Reports — Final grade, verdict (Hire/No Hire), strengths & next steps
• 3D Background — Immersive Three.js particle field with animated rings
• Supabase Backend — Full persistence for sessions and answers

---

🚀 Quick Start

1. Install dependencies

npm install

2. Set up environment variables

cp .env.example .env

Edit .env and fill in your Supabase credentials:

VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key

3. Set up Supabase database

• Go to supabase.com and create a new project
• Open SQL Editor and run the contents of supabase/schema.sql
• Copy your Project URL and anon public key into .env

4. Start the development server

npm run dev

Open http://localhost:3000

---

🏗️ Build for Production

npm run build
npm run preview

---

🗂️ Project Structure

smart-interview-simulator/
├── src/
│   ├── components/
│   │   ├── Scene3D.jsx        ← Three.js 3D background
│   │   └── Navbar.jsx         ← Navigation bar
│   ├── pages/
│   │   ├── Landing.jsx        ← 3D hero landing page
│   │   ├── Setup.jsx          ← Interview configuration
│   │   ├── Interview.jsx      ← Live interview + AI feedback
│   │   ├── Report.jsx         ← Final performance report
│   │   └── History.jsx        ← Past sessions
│   ├── lib/
│   │   ├── ai.js              ← Anthropic Claude AI service
│   │   └── supabase.js        ← Supabase client + helpers
│   ├── styles/
│   │   └── global.css         ← Global CSS variables & utilities
│   ├── App.jsx                ← Router + layout
│   └── main.jsx               ← Entry point
├── supabase/
│   └── schema.sql             ← Database schema (run in Supabase)
├── index.html
├── vite.config.js
├── package.json
└── .env.example

---

🔧 Tech Stack

Layer	Technology
Frontend	React 18 + Vite
3D Graphics	Three.js + @react-three/fiber
Animations	Framer Motion
AI Engine	Anthropic Claude (claude-sonnet-4)
Database	Supabase (PostgreSQL)
Styling	Custom CSS with CSS variables
Voice Input	Web Speech API
Routing	React Router v6

---

🎨 Design System

The app uses a dark tech aesthetic with:

• Colors: Cyan (#00dcff), Violet (#a855f7), Green (#00ff88)
• Fonts: Syne (display) + Space Mono (monospace)
• Theme: Glassmorphism cards over 3D particle canvas

---

📊 Supabase Tables

• interview_sessions — Stores each interview session with scores
• interview_answers — Stores each Q&A pair with AI feedback scores

See supabase/schema.sql for the full schema.

---

🌐 Deployment

Deploy to Vercel (recommended):

npm install -g vercel
vercel --prod

Add your environment variables in the Vercel dashboard.

---

📝 License

MIT — Free to use and modify.