Skip to content

AI Mock Interview App with Performance analytics, feedback, question generator AI, etc.

Notifications You must be signed in to change notification settings

whd793/AI-Interview-App

Repository files navigation

InterviewAI - AI-Powered Mock Interview Platform


English

🌟 Overview

InterviewAI is an innovative platform that leverages artificial intelligence to provide personalized mock interview experiences. Built with modern web technologies, it helps users practice and improve their interview skills through AI-generated questions, real-time feedback, and comprehensive analytics.

🚀 Features

AI-Powered Interviews

  • Custom Questions: Generates relevant questions based on job position and experience
  • Multi-language Support: Available in English, Korean, Japanese, and Chinese
  • Real-time Feedback: Instant AI evaluation of responses
  • Voice Recognition: Automatic speech-to-text conversion

Smart Credit System

  • Credit Management: 5 credits per user with automatic regeneration
  • Real-time Timer: Visual countdown for next credit
  • Automatic Regeneration: 1 credit per minute
  • Visual Indicators: Dynamic credit display

Analytics Dashboard

  • Performance Tracking: Comprehensive view of interview history
  • Progress Charts: Visual representation of improvement
  • Role-based Analysis: Performance metrics by job type
  • Improvement Suggestions: AI-powered recommendations

🛠️ Technology Stack

Frontend

  • Next.js 13 (App Router)
  • React
  • Tailwind CSS
  • Shadcn UI
  • Clerk Authentication

Backend

  • PostgreSQL
  • Drizzle ORM
  • Google Gemini AI
  • WebRTC

🔧 Installation

  1. Clone the repository
git clone https://github.com/yourusername/interview-ai.git
  1. Install dependencies
cd interview-ai
npm install
  1. Set up environment variables
cp .env.example .env.local
# Add your environment variables
  1. Run database migrations
npm run db:migrate
  1. Start the development server
npm run dev

📦 Project Structure

interview-ai/
├── app/
│   ├── dashboard/
│   ├── providers/
│   └── ...
├── components/
│   ├── ui/
│   └── ...
├── utils/
│   ├── db.js
│   └── schema.js
└── ...

💾 Database Schema

Table UserCredits {
  id          Serial    Primary Key
  userEmail   String    
  credits     Integer   Default(5)
  lastUpdated DateTime  
}

Table MockInterview {
  id          Serial    Primary Key
  mockId      String    
  jsonMockResp Text     
  jobPosition String    
  jobDesc     String    
  language    String    
}

Table UserAnswer {
  id          Serial    Primary Key
  mockIdRef   String    
  question    String    
  answer      Text      
  feedback    Text      
  rating      String    
}

🔐 Environment Variables

DATABASE_URL=your_database_url
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_key
CLERK_SECRET_KEY=your_clerk_secret
NEXT_PUBLIC_GEMINI_API_KEY=your_gemini_key

🌊 Features Flow

Interview Creation

  1. User spends one credit to create new interview
  2. AI generates questions based on job details
  3. User records answers
  4. AI provides instant feedback
  5. Results are saved for analytics

Credit System

  1. Users start with 5 credits
  2. One credit regenerates every minute
  3. Real-time timer shows countdown to next credit
  4. Visual indicators show current credit status

📱 Screenshots

홈 화면 면접 준비 질문 화면

답변 녹음 피드백 대시보드

🧪 Testing

# Run unit tests
npm run test

# Run integration tests
npm run test:integration

# Run e2e tests
npm run test:e2e

🔄 API Routes

Interview Management

  • POST /api/interviews/create
  • GET /api/interviews/:id
  • GET /api/interviews/feedback/:id

Credit System

  • GET /api/credits
  • POST /api/credits/use

🤝 Contributing

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

📜 License

This project is licensed under the MIT License - see the LICENSE.md file for details.

🙏 Acknowledgments

  • Shadcn UI for the component library
  • Google Gemini AI for powering our interview questions
  • Clerk for authentication services
  • The open-source community for inspiration and support

📧 Contact

Won Lee - whd793@gmail.com

Project Link: https://ai-interview-app-u24p.vercel.app/


⭐️ Star us on GitHub — it helps!


한국어

인터뷰 AI 도우미

소개

취업 준비 과정에서 면접은 가장 중요한 관문임에도 불구하고, 효과적인 연습 방법이 부족하다는 점을 직접 경험했습니다. 특히 혼자서는 객관적인 피드백을 받기 어렵고, 직무에 특화된 질문을 준비하는 데 한계가 있다는 점이 가장 큰 문제였습니다.

이러한 문제를 해결하기 위해 AI 기술을 활용한 모의면접 플랫폼을 개발하게 되었습니다. 단순히 정해진 질문을 반복하는 것이 아닌, 사용자의 직무와 경력 수준에 맞춘 맞춤형 질문을 제공하고, 실시간으로 피드백을 제공하는 것을 목표로 했습니다.

주요 기능

AI 면접 시스템

  • Google Gemini AI를 활용한 직무별 맞춤형 면접 질문 생성
  • 음성 인식 API를 통한 실시간 답변 수집 및 텍스트 변환
  • 다국어 지원 시스템 설계 및 구현 (한국어, 영어, 일본어, 중국어)
  • 답변에 대한 AI 기반 실시간 평가 및 피드백 제공

크레딧 시스템

  • 사용자별 크레딧 관리 시스템 구현
  • 실시간 크레딧 자동 충전 기능 (1분당 1크레딧)
  • React Hooks와 Moment.js를 활용한 실시간 타이머 구현
  • 크레딧 사용 및 충전 히스토리 관리

면접 관리 시스템

  • 과거 면접 기록 저장 및 검토 기능
  • 종합적인 피드백 이력 관리
  • 상세한 성과 지표 제공
  • 개선 영역 식별 및 학습 방향 제시

종합 분석 대시보드

  • Recharts 라이브러리를 활용한 면접 데이터 시각화
  • 개인별 면접 성과 추적 및 상세 분석
  • 답변 품질 평가 및 개선점 도출
  • 직무별 성과 분석 및 맞춤형 학습 방향 제시
  • 시간에 따른 성장 과정 모니터링

보안 및 사용자 관리

  • Clerk을 활용한 안전한 사용자 인증 시스템
  • 철저한 개인정보 보호 및 데이터 암호화
  • API 경로 보호 및 접근 제한
  • 입력값 검증 및 보안 데이터베이스 쿼리 적용
  • 사용자 활동 기록 및 모니터링

기술 스택

Frontend

  • Next.js 13: App Router를 활용한 서버 사이드 렌더링 및 라우팅 구현
  • React: 컴포넌트 기반 UI 개발 및 Hooks를 활용한 상태 관리
  • Tailwind CSS: 반응형 디자인 및 커스텀 UI 구현
  • Lucide React: 아이콘 시스템
  • Clerk: 사용자 인증 시스템
  • Shadcn UI: 재사용 가능한 컴포넌트 라이브러리 활용
  • 모바일 지원 반응형 디자인

Backend

  • PostgreSQL: 관계형 데이터베이스 설계 및 구현
  • Drizzle ORM: 타입 안전성이 보장된 데이터베이스 쿼리 작성

State Management

  • React Context를 활용한 언어 설정 관리
  • useState를 통한 로컬 상태 관리
  • useEffect를 활용한 실시간 업데이트

DevOps & Tools

  • Git & GitHub: 버전 관리 및 협업
  • Vercel: 자동화된 배포 및 호스팅
  • ESLint & Prettier: 코드 품질 관리

APIs and Integration

  • Google Gemini AI API: 맞춤형 면접 질문 생성 및 답변 평가
  • 음성 입력을 위한 Speech Recognition API
  • WebRTC: 실시간 음성 인식 및 처리

스크린샷

홈 화면 면접 준비 질문 화면

답변 녹음 피드백 대시보드

설치 방법

# 저장소 클론
git clone https://github.com/yourusername/interview-ai-assistant.git

# 디렉토리 이동
cd interview-ai-assistant

# 의존성 설치
npm install

# 개발 서버 실행
npm run dev

환경 변수 설정

.env.local 파일을 생성하고 다음 변수를 설정해주세요:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
NEXT_PUBLIC_GEMINI_API_KEY=your_gemini_api_key
NEXT_PUBLIC_INTERVIEW_QUESTION_COUNT=5

사용 방법

  1. 회원가입/로그인 후 대시보드로 이동합니다.
  2. "새 면접 추가" 버튼을 클릭합니다.
  3. 직무 포지션, 직무 설명, 경력 연차를 입력하고 원하는 언어를 선택합니다.
  4. AI가 생성한 면접 질문에 음성으로 답변합니다.
  5. 각 답변에 대한 AI의 피드백과 평가를 확인합니다.
  6. 이전 면접 기록은 대시보드에서 확인 가능합니다.

크레딧 시스템

  • 새 사용자에게는 5개의 크레딧이 자동 부여됩니다.
  • 면접 생성마다 1개의 크레딧이 소모됩니다.
  • 크레딧은 일정 시간마다 자동으로 충전됩니다(최대 5개).

프로젝트 구조

app/
├── _components/           # 공통 컴포넌트
├── (auth)/                # 인증 관련 페이지
├── dashboard/             # 대시보드 및 주요 기능
│   ├── _components/       # 대시보드 컴포넌트
│   ├── interview/         # 면접 진행 페이지
│   ├── analytics/         # 분석 페이지
│   ├── questions/         # 질문 모음 페이지
│   └── upgrade/           # 업그레이드 페이지
├── providers/             # 전역 프로바이더
└── utils/                 # 유틸리티 함수

다국어 지원

현재 지원하는 언어:

  • 한국어 (ko)
  • 영어 (en)
  • 일본어 (ja)
  • 중국어 (zh)

언어는 헤더의 언어 선택기를 통해 변경할 수 있습니다.

향후 계획

  • 더 많은 언어 지원
  • 화상 면접 분석 기능
  • 업계별 특화 질문 제공
  • 구독 기반 프리미엄 플랜
  • 면접 통계 및 분석 개선

라이선스

이 프로젝트는 MIT 라이선스를 따릅니다.

About

AI Mock Interview App with Performance analytics, feedback, question generator AI, etc.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published