Spaces:
Sleeping
Sleeping
metadata
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.
✨ 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)
Installation
# 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 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
- Select Role → Choose from 8+ professional roles
- Configure → Set difficulty and question count
- Interview → AI generates questions, you answer via text or voice
- Evaluate → Each answer is scored across 5 dimensions
- 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.