File size: 5,090 Bytes
dd9a471
 
 
 
 
 
 
a58a46f
dd9a471
 
a0da743
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
---
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.