Job Prep | AI Mock Interview Practice
A case study of an AI mock interview prototype built with Next.js, Gemini, Clerk, Drizzle ORM, Neon PostgreSQL, browser speech recognition, and webcam preview.
Project Overview
Job Prep is an AI mock interview prototype designed to make interview practice more specific to the role a person wants. Instead of presenting the same fixed set of questions to everyone, the application asks for a job position, a short description of the role, and years of experience. The current question prompt uses the position and description, while the experience value is saved with the session for reference. Gemini generates questions and suggested answers before the user begins practicing.
During an interview, the user can listen to each question, speak an answer, and receive individual feedback. The application saves interview sessions and responses so the user can return to previous practice and review areas for improvement.
I built this project to explore how a conversational AI model, browser speech features, authentication, and persistent data can work together in one focused learning experience. The current repository implements mock interview practice. A resume builder appears in some landing page copy, but it is not part of the implemented workflow.
The Problem
Preparing for an interview is difficult when practice questions do not reflect the actual position. A general list can help someone get started, but it does not account for the technologies in a job description or the expectations associated with experience level.
Practice is also more useful when a person can answer aloud and examine the answer afterward. Job Prep brings these steps into one workflow: describe the target role, generate relevant questions, respond verbally, and review feedback for each answer.
The project had three practical goals:
-
Make interview questions responsive to the role and description supplied by the user.
-
Let users practice speaking instead of only reading or typing answers.
-
Preserve questions, answers, and feedback so each session can be reviewed later.
The Interview Workflow
The application has two separate AI calls. The first creates a question set. The second evaluates one spoken answer at a time. The diagram shows where browser speech transcription and saved records connect those steps.
Creating a session
The dashboard contains a form for the job position, job description or technology stack, and years of experience. After submission, the application sends the position and description to Gemini with instructions to produce interview questions and suggested answers in JSON format. The experience value is stored with the interview, but the present prompt does not yet use it to adjust question difficulty.
The resulting response is saved as a new interview record with a unique session identifier. The user is then taken to a preparation screen that repeats the job details before the practice begins.
Practicing questions
The interview screen presents one question at a time. Users can move backward and forward through the generated questions. A browser speech synthesis control can read the active question aloud, which makes the experience closer to a spoken interview than a static questionnaire.
The practice area displays a live webcam preview and a button for spoken answers. The browser speech recognition integration converts speech into text. The current implementation does not save a video recording or an audio file. The answer that is stored is the transcribed text.
Reviewing feedback
After a spoken answer is transcribed, the application sends the active question and the user's answer to Gemini. It requests a rating and a short explanation of what could be improved. The question, suggested answer, user answer, rating, and feedback are then stored together.
The feedback page displays each saved response in an expandable section. This lets the user compare what they said with the generated reference answer and read the feedback for that particular question. The dashboard also lists previous interview sessions, making it possible to reopen a session or revisit its feedback.
My Implementation
I developed Job Prep as a Next.js 15 application using React 19 and JavaScript. The App Router organizes the public landing page, authentication screens, dashboard, interview session, question practice, and feedback view.
Clerk provides sign in and account information. Middleware protects the dashboard routes, and the user identity is attached to stored interview data. The dashboard retrieves the interview records associated with the signed in user's email address.
For persistence, the project uses Neon PostgreSQL with Drizzle ORM. Two tables support the core experience. One stores the interview context and AI generated question set. The other stores each spoken answer, its associated question, a suggested answer, the AI rating, and written feedback. A unique identifier connects the question set to its responses and allows the application to open a specific interview by URL.
Gemini 2.0 Flash powers both AI steps. One prompt generates questions from the job context. Another prompt evaluates the transcript for an individual question. Keeping those steps separate makes the workflow understandable: question generation happens when a session is created, while answer feedback is produced during practice.
The interface uses Tailwind CSS and reusable interface components for forms, dialogs, buttons, and expandable feedback sections. The design supports the transition from creating a session to practicing and reviewing it without requiring a separate tool for each step.
Technical Decisions
Role specific questions instead of a fixed question bank
The application builds a prompt from the user's job position and description. This allows a single flow to support different roles without maintaining a large hand written question catalog. The tradeoff is that generated questions can vary between sessions and must be treated as AI output rather than guaranteed interview standards.
Speech transcription instead of media storage
The practice interface uses browser speech recognition to turn a spoken response into text. Text is enough for the current feedback and review experience, while avoiding a media upload and storage workflow. The webcam provides a visual practice aid but is not a recording feature.
Separate records for sessions and answers
The database keeps the generated interview context separate from individual responses. This makes it possible to list previous sessions quickly and load the answers for one selected interview when the user opens its feedback page.
Feedback for each question
Each response has its own rating and written feedback. This gives the user concrete areas to review instead of only an interview level result. The overall rating currently shown on the feedback screen is a fixed display value, so the case study does not present it as a calculated score.
Engineering Challenges
Working with generated JSON
The question generation step asks Gemini for JSON, strips possible code fences, and stores the response. The practice screen then handles either a JSON string or an object when loading questions. This shows how an AI response format can affect several parts of an application, from generation to persistence to rendering.
The current implementation relies on response formatting rather than a formal output schema. Adding explicit validation would make the application more resilient to malformed or incomplete AI responses.
Connecting speech output to the active question
An interview can contain several questions, but feedback must be attached to the one the user is answering. The practice view tracks an active question index and passes the corresponding question and suggested answer to the recording component. The transcript is then submitted with that context.
Keeping the practice history useful
Interview sessions and answers have different lifecycles. A new session exists before any answer has been recorded. The feedback page therefore needs to handle an empty response list and show saved feedback only when answers are available.
Current Scope and Next Steps
Job Prep is a working prototype of an AI mock interview flow, not a completed hiring platform. The public landing page still contains template marketing material, and its resume builder message is ahead of the implemented features. I would replace that material with accurate product copy before presenting the application as a finished public service. I would also put the saved experience value into the question prompt if the goal is to adapt question difficulty to the candidate's level.
The next engineering step would be to move Gemini requests and database access out of client components and into server controlled operations. The current code uses public environment variables for the Gemini key and database URL, which is not an appropriate boundary for a production deployment. Server side access, input validation, and ownership checks would better protect the service and stored interview records.
I would also validate Gemini responses against a defined schema, calculate any overall rating from real answer data, and add automated tests for session creation, answer storage, and feedback retrieval. These improvements would turn the prototype into a more reliable application without changing its central experience.
Outcome
Job Prep demonstrates a complete practice loop in the repository: a user can create a role specific interview, work through generated questions, answer with speech transcription, receive feedback for individual answers, and revisit previous sessions.
The project helped me connect AI generation with an interactive user journey and a persistent data model. It also made the limits of a prototype visible. A useful AI feature requires more than a model call; the surrounding application must handle identity, response formats, saved context, feedback presentation, and failure cases carefully.
Conclusion
Job Prep is a focused exploration of AI assisted interview practice. Its strongest feature is the connection between job context, generated questions, spoken answers, and saved feedback. The project shows how modern web tools can support a personalized learning flow while leaving clear opportunities to improve validation, security, scoring, and product polish.