Full Stack AI App: Build a Real-Time Voice Agent Interview Platform

What the video builds (product concept)

A “full stack AI app” called Interview Prep / Mock Interview Platform that lets users:

• Sign up / log in securely
• Create real-time, voice-based mock interviews using an AI voice agent
• Generate interview questions with Gemini based on user-selected parameters
• Take mock interviews in a conversational voice UI
• Automatically produce detailed feedback (scores + strengths + improvement areas) with Gemini
• Display generated interviews and feedback on the dashboard/homepage

Tech stack & major features taught

1) Web app foundation (Next.js + UI system)

• Next.js (TypeScript) with:

  • Server-rendered approach (“server rendered web apps”, Next.js)
  • Tailwind CSS + responsive design
  • shadcn/ui components for consistent, accessible UI

• Setup includes:

  • Project scaffolding with create-next-app at the appropriate Next.js version
  • Cleaning default files, fonts (Google font import), and global dark theme handling
  • Defining a design system via globals.css (theme tokens, utilities, background patterns)

2) Secure authentication & data (Firebase)

• Uses Firebase Authentication (email/password).
• Stores user profiles and interview data in Firestore.

• Demonstrates both:

  • Firebase client SDK for client-side auth
  • Firebase Admin SDK for server-side verification and database writes

• Implements authentication flow via:

  • Server actions to sign up, sign in, and create session cookies
  • Server-side getCurrentUser by reading the session cookie and verifying it
  • Route protection:
    • Redirect unauthenticated users to /auth/sign-in
    • Redirect authenticated users away from auth pages to /

3) AI voice agent (Vapi)

• Uses Vapi voice platform:

  • Create an assistant + workflow
  • Configure voice behavior (emotion/backchanneling/speech parameters)
  • Real-time calls with transcripts and speaking indicators

• Agent lifecycle handled in the frontend with state:

  • inactive / connecting / active / finished
• transcript handling:
  • transcript messages appended during the call
  • transcript “final” triggers downstream actions (e.g., feedback generation)

4) Interview generation (Gemini via Vercel AI SDK / Next AI route)

• Uses Gemini to generate interview questions:

  • A server API route handler (Next.js route) receives parameters:
    • role/type/level/textStack/amount/userId
  • Calls Gemini model using the AI SDK (generateText)
  • Prompts for output in a voice-friendly format (questions only)

• Saves generated interviews to Firestore:

  • Parses question list using JSON.parse
  • Stores role/type/level/tech stack, a cover image, createdAt, and finalized

5) Feedback generation (Gemini “structured output”)

• Adds a feedback page and server action to generate feedback from the full transcript:

  • Uses Gemini generateObject with a defined feedback schema
  • Produces:
    • totalScore
    • categoryScores (e.g., communication skills, technical knowledge, problem solving, cultural fit, confidence/clarity)
    • strengths, areasForImprovement
    • finalAssessment

• Stores feedback in Firestore (collection like feedback)

• Feedback UI is built by mapping over the structured results (scores + comments + lists)

Real-time mock interview flow (end-to-end analysis)

1. User signs in
2. On dashboard/homepage, user can:
   • Take existing generated interviews, or
   • Create a new one via the voice agent interview generator flow
3. Vapi workflow collects answers (role, interview type, level, tech stack, question count)
4. Workflow calls the deployed API endpoint (/api/vapi/generate) to generate the interview via Gemini
5. App redirects user to the homepage once generation is done
6. User selects an interview card → opens interview detail page
7. User clicks Call to start the voice mock interview session
8. When conversation ends, app triggers feedback generation:
   • generates structured rubric-based feedback
9. User sees feedback page with overall score and breakdown

Tutorial emphasis: guides, patterns, and pitfalls addressed

Guides / walkthrough components

• “Build from scratch” routing + route groups in Next.js:

  • (auth) group for /sign-in and /sign-up with different layout
  • (root) group for navbar layout

• Form handling:

  • react-hook-form + Zod schema validation
  • reusable form field components using shadcn patterns

• Firestore querying + index issues:

  • demonstrates errors like “query required index” and fixing by creating indices

• UI composition:

  • Interview card component with:
    • normalized type (technical vs mixed)
    • random cover image selection
    • Devicon-based tech icons (via utility function)
    • buttons routing to interview view vs feedback view depending on whether feedback exists

Key implementation details noted

• Password input type toggling (type="password") after an error.
• Session cookie security:
  • httpOnly, secure based on env, sameSite
• Frontend transcript handling:
  • only act when Vapi message has { type: transcript, transcriptType: final }

Reviews / results / demo outcomes mentioned

• The video frames an “interview system” concept and highlights:
  • realistic, lifelike voice interview experience via Vapi
  • detailed feedback with actionable rubric categories
• In testing, the presenter verifies:
  • interview generation appears in Firestore
  • taking an interview redirects to feedback
  • feedback documents are created with structured outputs

Main speakers / sources (as stated)

• Speaker/creator: Adrian (explicitly: “hi there I’m Adrian”)

• Product/platform sources referenced:

  • Vapi (voice agent)
  • Firebase (auth + Firestore)
  • Gemini (LLM question + feedback generation)
  • Next.js / Tailwind CSS / shadcn/ui (web app stack)
  • Vercel AI SDK (AI SDK integration)
  • JS Mastery Pro (course/product reference)