Spaces:
Sleeping
Sleeping
| 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](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. | |