PrepMate — AI Avatar Interview Coach

A web-based AI interview coach that gives job seekers realistic behavioral interview practice with a voice-based AI avatar, structured feedback, and session analytics.

🎯 What It Does

1. Landing Page — Explains the product, shows how it works, captures waitlist signups
2. Interview Setup — Pick your role (Software, Marketing, PM, General) and interview type (Behavioral, Technical-Lite)
3. AI Interview — Voice-based (or text fallback) mock interview with "Alex Chen", an AI interviewer persona who asks 4 behavioral questions
4. Instant Feedback — After each answer, get structured feedback on structure, clarity, and one specific improvement
5. Session Summary — Overall score, strengths, key improvement area, question-by-question review
6. Admin Dashboard — Password-protected analytics view showing sessions, completion rate, waitlist signups, and more

🛠 AI Tools & APIs Used

Required for assignment transparency.

Tool / API	Purpose
Google Gemini 2.5 Flash	Generates interview questions, evaluates answers, provides structured feedback and session summaries
Web Speech API (browser-native)	Text-to-speech for the avatar's voice, speech recognition for user's spoken answers
Supabase (PostgreSQL)	Stores session tracking data, waitlist signups, and analytics events
Vercel Serverless Functions	Proxies LLM API calls (hides API key), handles tracking and analytics endpoints
Antigravity (AI coding assistant)	Assisted in building the full codebase

🚀 Quick Deploy (15 minutes)

Prerequisites

• Node.js 18+
• A Google AI Studio API key (free)
• A Supabase account (free tier)
• A Vercel account (free tier)

Step 1: Set Up Supabase

1. Go to supabase.com and create a new project
2. Go to SQL Editor → New query
3. Copy-paste the contents of supabase-schema.sql and click Run
4. Go to Settings → API and copy:
   • Project URL → this is your SUPABASE_URL
   • service_role key → this is your SUPABASE_SERVICE_ROLE_KEY. Keep it server-only; never add it to client code or a VITE_* variable.

Step 2: Get Gemini API Key

1. Go to Google AI Studio
2. Create an API key
3. This is your GEMINI_API_KEY

Step 3: Deploy to Vercel

1. Push this repo to GitHub
2. Go to vercel.com → New Project → Import your repo
3. Add these Environment Variables:

Variable	Value
GEMINI_API_KEY	Your Google AI Studio API key
SUPABASE_URL	Your Supabase project URL
SUPABASE_SERVICE_ROLE_KEY	Your Supabase service-role key (server-only; never expose it in the browser)
ADMIN_KEY	A long, private password for the admin dashboard

4. Click Deploy
5. Your app is live! 🎉

Step 4: Test

• Visit your Vercel URL
• Try a full interview flow
• Check admin dashboard at yoururl.vercel.app/#/admin

💻 Local Development

npm install

# Copy .env.example to .env, then fill in its values.
# Keep .env private; it is ignored by Git.

npm run dev

Note: The /api/* serverless functions only work when deployed to Vercel. For local development, you can use vercel dev instead of npm run dev to test the full stack:

npm i -g vercel
vercel dev

📁 Project Structure

├── api/                    # Vercel serverless functions
│   ├── chat.js            # LLM proxy (question generation, feedback, summary)
│   ├── track.js           # Event tracking → Supabase
│   └── analytics.js       # Admin analytics endpoint
├── src/
│   ├── components/
│   │   ├── Landing.jsx        # Landing page
│   │   ├── InterviewSetup.jsx # Role/type selection
│   │   ├── InterviewSession.jsx # Core interview loop
│   │   ├── Avatar.jsx        # SVG animated avatar
│   │   ├── SessionSummary.jsx # Post-interview summary
│   │   └── AdminDashboard.jsx # Analytics dashboard
│   ├── lib/
│   │   ├── speech.js      # Web Speech API wrapper
│   │   ├── tracking.js    # Client-side tracking
│   │   └── api.js         # LLM API client
│   ├── App.jsx            # Router
│   ├── main.jsx           # Entry point
│   └── index.css          # Design system
├── supabase-schema.sql    # Database schema
├── vercel.json            # Vercel routing config
└── README.md

📊 Tracking & Analytics

PrepMate tracks the following metrics (stored in Supabase):

• Sessions started — How many users begin an interview
• Sessions completed — How many finish all questions
• Questions answered — Total interactions
• Repeat visitors — Users who come back for more practice
• Waitlist signups — Email captures
• Completion rate — Sessions completed / sessions started

Access the admin dashboard at /#/admin with your ADMIN_KEY. Analytics and waitlist signups show an error until Supabase is configured, rather than displaying mock data.

⚖️ Ground Rules

• ✅ AI disclosure visible on first load
• ✅ Never claims to be human
• ✅ Never guarantees job outcomes
• ✅ Only collects email (for waitlist) — no resumes, no sensitive data
• ✅ All interviews are clearly AI-simulated

📝 License

MIT