The Challenge
The main challenge was handling real-time browser-native speech recognition while ensuring seamless synchronization with the AI backend. Additionally, minimizing latency for AI responses and managing strict type safety across the new Next.js 16 Server Actions ecosystem was critical.
Tech Stack
The Solution
Implemented Next.js 16 Server Actions to directly mutate data in MongoDB, eliminating the need for intermediate API routes. Used `react-speech-recognition` for client-side audio capture and Google Gemini 1.5 Flash model for rapid feedback generation. The UI was built with Tailwind CSS v4 and Shadcn components for a modern, responsive feel.
1// AI Feedback Logic using Server Actions & Gemini
2export async function saveUserAnswer(data: UserAnswerProps) {
3 const user = await currentUser();
4
5 // 1. Construct Prompt for AI Analysis
6 const feedbackPrompt = `Question: ${data.question}, User Answer: ${data.userAnswer}.
7 Please give a rating (1-10) and feedback for improvement in JSON format.`;
8
9 // 2. Generate Feedback via Gemini AI
10 const result = await chatSession.sendMessage(feedbackPrompt);
11 const mockJsonResp = JSON.parse(result.response.text());
12
13 // 3. Store Result in MongoDB (Zero API Latency)
14 await connectDB();
15 return await UserAnswer.create({
16 mockIdRef: data.mockIdRef,
17 question: data.question,
18 userAnswer: data.userAnswer,
19 feedback: mockJsonResp.feedback,
20 rating: mockJsonResp.rating,
21 userEmail: user?.emailAddresses[0]?.emailAddress,
22 });
23}Server Side Logic
AI Latency
Performance Score
Key Highlights
AI Question Generation
Generates 5 unique technical questions based on Job Role & Tech Stack.
Voice-to-Text Engine
Records user answers in real-time using browser-native Speech API.
Instant AI Feedback
Analyzes answers to provide 1-10 ratings and improvement tips.
Interview History
Dashboard to track performance trends and review past feedback.
Next Project