The AI Mock Interview Project is a full-stack web application designed to help users practice interviews using AI-generated questions, example answers, and interactive feedback. It also provides resume analysis and AI avatars for a realistic interview experience.
Live Demo: (https://youtu.be/HtzbjTdvFsw)
- User Authentication & Subscription: Secure login via OAuth using Clerk.
- AI-Powered Interview Generation: Generate personalized interview questions and example answers with Google Gemini NLP.
- Resume Analysis: Scan and process resumes using Python for tailored interview preparation.
- Interactive AI Avatar: HeyGen-powered AI-generated videos for immersive interview practice.
- Smooth Animations: GSAP animations for smooth page transitions and interactions.
- Resume Cloud Archive: Store resumes safely using ImageKit.
- Real-Time Feedback: Track past interviews, feedback, and performance.
- Rate Limit Protection: Secure APIs with ArcJet.
- Workflow Automation: Integrate AI pipelines using Pipedream.
| Layer | Technology |
|---|---|
| Frontend | Next.js, Shadcn UI, Aceternity UI, GSAP |
| Backend & DB | Convex |
| LLM & RAG | Google Gemini, Python, Pipedream |
| Authentication | Clerk |
| Media & Video | ImageKit, HeyGen |
| Security & Rate Limit | ArcJet |
Before running the project locally, make sure you have API keys for the following services:
- Google Gemini – AI-generated questions and answers
- ArcJet – Rate limit protection
- Clerk – Authentication & subscription management
- Convex – Database access
- Pipedream – AI workflow automation
- ImageKit – Cloud storage of resumes
- HeyGen – AI-generated interactive video avatars
Create a .env.local file in your project root and add all required keys:
NEXT_PUBLIC_CLERK_FRONTEND_API=<your-clerk-frontend-api>
CLERK_API_KEY=<your-clerk-api-key>
CONVEX_URL=<your-convex-url>
GOOGLE_GEMINI_KEY=<your-google-gemini-key>
ARCJET_KEY=<your-arcjet-key>
PIPEDREAM_KEY=<your-pipedream-key>
IMAGEKIT_PUBLIC_KEY=<your-imagekit-public-key>
IMAGEKIT_PRIVATE_KEY=<your-imagekit-private-key>
HEYGEN_KEY=<your-heygen-key>
# Clone the repository
git clone <repository-url>
cd <project-directory>
# Install dependencies
npm install
# Run the development server
npm run dev
# Run the development server for the convex db
npx convex dev
Open http://localhost:3000 to see the project in action.
├── app/ # Next.js pages and API routes
├── components/ # Reusable UI components
├── _components/ # Feature-specific components (e.g., InterviewCard, CreateInterviewDialog)
├── convex/ # Database schemas and API queries
├── public/ # Static assets (images, icons)
├── styles/ # Tailwind or custom CSS files
└── utils/ # Utility functions and helpers
Contributions are welcome! Please open an issue or submit a pull request.
For inquiries, contact [Ngo Tran Bao Thach] at [baothach10@gmail.com].