InterviewMate AI provides AI-powered problem explanations, progressive hints, solution approaches, mock interviews, interview evaluation, and interview history — all through a Chrome Side Panel without leaving your coding environment.
Chrome Extension: https://chromewebstore.google.com/detail/interviewmate-ai/bogeljnkhoniabgjpjenhghdpacmmfpp
Backend: Deployed on Render
Repository: https://github.com/humera2211/InterviewMate-AI
Get detailed explanations of coding problems directly in the Chrome Side Panel.
Receive helpful hints without spoiling the solution.
Get step-by-step approaches to solve problems including:
Practice technical interviews using the current problem.
Get detailed feedback on your interview responses:
Users can:
InterviewMate AI automatically detects the coding problem you’re working on:
Access all features without tab switching:
Benefits:
InterviewMate AI follows a full-stack Chrome Extension architecture where the extension frontend (running in Chrome) communicates with a cloud-based backend that handles authentication, database operations, and AI requests.
InterviewMate AI
│
┌───────────────┴────────────────┐
│ │
CHROME EXTENSION BACKEND
(Frontend) (Server)
│ │
▼ ▼
React + Vite Node.js
Tailwind CSS Express.js
Manifest V3 │
Chrome Side Panel │
│ │
│ HTTPS REST API │
└───────────────┬──────────────┘
│
┌─────────────┴─────────────┐
│ │
▼ ▼
MongoDB Google Gemini
Database API
│ │
└─────────────┬─────────────┘
│
▼
AI Generated Response
│
▼
Chrome Side Panel
User
│
├─→ Register
│ │
│ ▼
│ Backend API /auth/register
│ │
│ ▼
│ Validate Email & Password
│ │
│ ▼
│ Hash Password (bcrypt)
│ │
│ ▼
│ Save User to MongoDB
│ │
│ ▼
│ navigate("/login")
│
│
│
└─→ Login
│
▼
Backend API /auth/login
│
▼
Find User by Email
│
▼
Compare Password (bcrypt)
│
┌───┴────┐
│ │
Valid Invalid
│ │
▼ ▼
Generate Return Error
JWT Token
│
└─→ Return Token to Extension
Token Storage & Usage:
▼
Browser Local Storage
│
▼
Protected API Requests
(Authorization: Bearer {token})
│
▼
Backend JWT Verification
│
▼
Authorized Request Processing
User Opens LeetCode Problem
│
▼
Chrome Content Script
│
▼
Extract Problem Details
(Title, Difficulty, URL)
│
▼
Chrome Messaging
│
▼
Extension Frontend
│
▼
Problem Context Available
│
┌───────|───────|────────┐
▼ ▼ ▼ ▼
Explain Hint Interview History
User Opens Problem
│
▼
Problem Data Detected
│
▼
User Clicks "Explain"
│
▼
Extension Frontend
│
▼
Backend API
│
▼
Prompt Construction
│
▼
Google Gemini API
│
▼
AI Generated Explanation
│
▼
Backend Response
│
▼
Chrome Side Panel Display
Coding Problem
│
▼
User Requests Hint
│
▼
Backend API
│
▼
Gemini API (Hint Prompt)
│
▼
Progressive Hint Generated
│
▼
Display in Side Panel
│
▼
User Attempts Problem
│
▼
Can Request Next Hint
Current Coding Problem
│
▼
Select Interview Settings
├─ Difficulty (Easy/Med/Hard)
└─ Duration (5/10/15 mins)
│
▼
Start Interview
│
▼
Generate Interview Questions
(Based on problem & difficulty)
│
▼
User Answers
│
▼
Backend Sends Response to Gemini
│
▼
AI Evaluates
├─ Response Quality
├─ Technical Understanding
├─ Problem Solving
└─ Communication
│
▼
Interview Feedback
│
▼
Store in MongoDB
│
▼
Interview Completed
InterviewMate AI is built using Chrome Extension Manifest V3 for modern, secure extension development.
Chrome Browser
│
┌─────────────┴─────────────┐
│ │
LeetCode / Problem InterviewMate AI
Solving Platform Chrome Extension
│ │
▼ ▼
Content Script Side Panel UI
│ (React App)
│ │
└───────────┬───────────────┘
│
Chrome Messaging
│
▼
Extension Services
│
Message Relay
│
┌──────┴──────┐
▼ ▼
Content Script Background Service
Extracts Data Message Handler
Content Script
Side Panel
Service Worker
User's Chrome Browser
│
┌───────────┴───────────┐
│ │
Chrome Web Store Local Development
(Published Ext) (npm run build)
│ │
▼ ▼
dist/ folder Production Bundle
│ │
└───────────┬───────────┘
│
Backend Cloud Server
│
┌───────────┴───────────┐
│ │
MongoDB Atlas Google Gemini
(Cloud Database) API