---
title: InterviewAI Platform
emoji: 🧠
colorFrom: indigo
colorTo: purple
sdk: docker
pinned: false
app_port: 7860
---

# 🧠 InterviewAI — AI-Powered Mock Interview Platform

A premium, full-stack mock interview platform powered by **Google Gemini AI** that simulates real interview experiences with dynamic question generation, real-time evaluation, and comprehensive performance analytics.

![Next.js](https://img.shields.io/badge/Next.js-16-black?style=flat-square)
![React](https://img.shields.io/badge/React-19-blue?style=flat-square)
![Tailwind CSS](https://img.shields.io/badge/Tailwind-v4-38bdf8?style=flat-square)
![Gemini AI](https://img.shields.io/badge/Gemini-2.0_Flash-4285f4?style=flat-square)

## ✨ Features

### Core
- **AI Interview Simulation** — Role-based, difficulty-adaptive question generation
- **Real-Time Chat Interface** — Natural conversation flow with the AI interviewer
- **Multi-Dimensional Evaluation** — Scored on Relevance, Clarity, Technical Accuracy & Confidence
- **Instant Feedback** — Strengths, weaknesses, suggestions & sample answers per question
- **Session Summary** — Overall grade, category breakdown, and actionable recommendations

### Advanced
- **8+ Interview Roles** — Software Engineer, Frontend Dev, Backend Dev, Data Scientist, DevOps, PM, UI/UX Designer, HR/Behavioral
- **3 Difficulty Levels** — Beginner, Intermediate, Advanced
- **Voice Input** — Web Speech API integration for hands-free answering
- **Animated UI** — Framer Motion animations, glassmorphism, and micro-interactions
- **Score Rings** — Visual circular score indicators with color-coded thresholds
- **Question Drill-Down** — Expand any question in the dashboard to see detailed feedback
- **Timer** — Track interview duration in real-time
- **Skip & End** — Skip questions or end the interview early

## 🛠️ Tech Stack

| Layer | Technology |
|-------|-----------|
| Framework | Next.js 16 (App Router) |
| Frontend | React 19, TypeScript |
| Styling | Tailwind CSS v4 |
| AI Engine | Google Gemini 2.0 Flash |
| Animations | Framer Motion |
| Icons | Lucide React |
| Voice | Web Speech API |

## 🚀 Getting Started

### Prerequisites
- Node.js 18+ installed
- A Google Gemini API key ([Get one here](https://aistudio.google.com/apikey))

### Installation

```bash
# 1. Clone the repository
git clone <your-repo-url>
cd AIPoweredMockInterviewPlatform

# 2. Install dependencies
npm install

# 3. Configure your API key
# Edit .env.local and replace the placeholder:
GEMINI_API_KEY=your_actual_api_key_here

# 4. Start the development server
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) in your browser.

## 📁 Project Structure

```
src/
├── app/
│   ├── api/
│   │   ├── generate-questions/route.ts   # AI question generation
│   │   ├── evaluate-answer/route.ts      # AI answer evaluation
│   │   └── session-summary/route.ts      # AI session summary
│   ├── interview/
│   │   ├── page.tsx                      # Role selection & config
│   │   └── session/page.tsx              # Chat interview interface
│   ├── dashboard/page.tsx                # Performance analytics
│   ├── settings/page.tsx                 # API key configuration
│   ├── globals.css                       # Design system
│   ├── layout.tsx                        # Root layout
│   └── page.tsx                          # Landing page
├── components/
│   ├── Navbar.tsx                        # Navigation bar
│   ├── ScoreRing.tsx                     # Circular score component
│   └── LoadingScreen.tsx                 # Animated loading screen
├── context/
│   └── InterviewContext.tsx              # Global state management
├── lib/
│   └── roles.ts                         # Interview role definitions
└── types/
    └── interview.ts                     # TypeScript type definitions
```

## 🔄 Core Workflow

1. **Select Role** → Choose from 8+ professional roles
2. **Configure** → Set difficulty and question count
3. **Interview** → AI generates questions, you answer via text or voice
4. **Evaluate** → Each answer is scored across 5 dimensions
5. **Review** → Comprehensive dashboard with analytics & recommendations

## 📊 Evaluation Metrics

Each answer is evaluated on:
- **Relevance** — How well the answer addresses the question
- **Clarity** — How clearly the response is communicated
- **Technical Accuracy** — Correctness of technical content
- **Confidence** — Apparent confidence level in delivery
- **Overall Score** — Weighted composite score (0-10)

## 🎨 Design Features

- Dark mode with premium glassmorphism effects
- Animated background mesh with floating gradient orbs
- Smooth page transitions with Framer Motion
- Color-coded score indicators
- Responsive design for all screen sizes
- Custom scrollbar styling

## 📝 License

MIT License — Built for educational purposes.