PrepWise

PrepWise is an AI-powered interview preparation platform for Service Based Company designed to help users master their interview skills. It allows users to practice, prepare, and perfect their responses through realistic AI-driven interview simulations and receive detailed feedback.

Features

• AI Interview Simulation: Engage with a realistic AI interviewer for various job roles, industries, and difficulty levels. The AI leverages Google Gemini for question generation and Vapi AI for voice interaction.
• Personalized Feedback: After each interview, receive comprehensive feedback generated by AI, including:
  • Overall Score
  • Scores and comments for categories like Communication, Technical Knowledge, Problem Solving, Cultural Fit, and Confidence.
  • (If applicable) Code Evaluation: Analysis of submitted code for correctness, efficiency, readability, and style.
  • Identified Strengths
  • Areas for Improvement
  • A final assessment summary.
• Performance Tracking: Monitor your progress over time with detailed analytics and reports on your dashboard.
• Customizable Interviews: Create interviews tailored to specific job roles (e.g., Frontend Developer, SDE), tech stacks (e.g., React, Node.js, Python), experience levels, and even specific companies (e.g., TCS, Infosys) for context-aware questions.
• In-Call Code Editor: For technical interviews, a Monaco-based editor allows for live coding practice. Code can be executed using the Piston API, and the submission is considered in the feedback. (Currently triggered by specific AI cues, supports JavaScript, Python, Java, C++).
• Authentication: Secure sign-up and sign-in with:
  • Email/Password (requires email verification)
  • Google OAuth
  • GitHub OAuth
• Credit System: Interviews are managed through a credit system. New users receive an initial credit balance, and credits are consumed when generating interview questions.
• Dashboard: A central hub to view scheduled and completed interviews, track performance statistics, manage account settings, and access billing information.
• Retake Attempts: Interviews can be retaken a limited number of times (typically 2 attempts) to improve performance.

Tech Stack

• Frontend: Next.js (v15 with Turbopack), React (v19), TypeScript
• Styling: Tailwind CSS (v4), Shadcn UI, Radix UI primitives, PostCSS, tailwindcss-animate
• AI & Voice:
  • Vapi AI: For real-time voice conversations with the AI interviewer.
  • Google Gemini (via @ai-sdk/google): For generating interview questions and feedback.
• Backend & Database: Firebase
  • Firebase Authentication: For user sign-up, sign-in, and session management.
  • Cloud Firestore: As the primary database for storing user data, interviews, and feedback.
• Code Editor: Monaco Editor (@monaco-editor/react) integrated for live coding sessions.
• API for Code Execution: Piston API (via https://emkc.org/api/v2/piston/execute)
• Form Handling & Validation: React Hook Form, Zod
• Linting: ESLint
• Deployment: Vercel and Netlify (recommended)

Getting Started

Prerequisites

• Node.js (v20 or later recommended)
• npm, yarn, pnpm, or bun package manager

Environment Variables

Create a .env.local file in the root of your project and add the following environment variables. You will need to obtain API keys and service account credentials from Firebase and Vapi AI.

# Firebase Admin SDK Configuration (for backend functions)
FIREBASE_PROJECT_ID=your_firebase_project_id
FIREBASE_CLIENT_EMAIL=your_firebase_client_service_account_email
FIREBASE_PRIVATE_KEY="your_firebase_private_key_with_escaped_newlines"

# Firebase Client SDK Configuration
# These values should match your Firebase project's web app configuration.
# The `firebase/client.ts` file currently contains placeholder-like values;
# for a new setup, ensure these are correctly configured for your project.
NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_firebase_project_id_for_client
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_firebase_app_id
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=your_firebase_measurement_id # Optional

# Vapi AI Configuration
NEXT_PUBLIC_VAPI_WEB_TOKEN=your_vapi_ai_public_key
NEXT_PUBLIC_VAPI_WORKFLOW_ID=your_vapi_ai_assistant_id_for_interview_generation
# Note: The main interviewer assistant configuration (`interviewer`) is defined in `constants/index.ts`.
# If you customize this, you might need to update its ID or associated variables.

# Admin Email for Billing/Credit Purchase (used in billing-content.tsx)
NEXT_PUBLIC_ADMIN_EMAIL=your_admin_email_for_credit_purchases

🔐 Firebase & Vapi AI Configuration Setup

📦 Firebase Admin SDK (Backend Use)

Used for secure backend operations like verifying ID tokens or managing Firestore data.

Steps to get credentials:

1. Go to the Firebase Console and select your project.
2. Click the gear icon ⚙️ > Project Settings > Service Accounts.
3. Click Generate new private key and download the JSON file.
4. Open the JSON and copy the following fields:
   • project_id
   • client_email
   • private_key

Add to .env.local:

FIREBASE_PROJECT_ID=your_firebase_project_id
FIREBASE_CLIENT_EMAIL=your_firebase_client_service_account_email
FIREBASE_PRIVATE_KEY="your_firebase_private_key_with_escaped_newlines"  

⚠️ Note: Escape line breaks in the private key using \n:

"-----BEGIN PRIVATE KEY-----\nABCDEF...\n-----END PRIVATE KEY-----\n"

---

🌐 Firebase Client SDK (Frontend Use)

Used for browser-side authentication, Firestore reads, etc.

Steps to get credentials:

1. In the Firebase Console, go to Project Settings > General.
2. Under Your apps, click on the Web app you registered (or create one).
3. Copy the config and map the fields as follows:

Add to .env.local:

NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_firebase_project_id_for_client
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_firebase_app_id
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=your_firebase_measurement_id # Optional

---

🧠 Vapi AI Configuration

Used to integrate voice interview generation.

Steps to get credentials:

1. Sign up at Vapi AI and create a new assistant or workflow.

2. Copy:

   • The Public Web Token
   • The Workflow ID (we are not using it now)

Add to .env.local:

NEXT_PUBLIC_VAPI_WEB_TOKEN=your_vapi_ai_public_key
NEXT_PUBLIC_VAPI_WORKFLOW_ID=your_vapi_ai_assistant_id_for_interview_generation(not needed)

If you customize the interviewer assistant, update the ID in constants/index.ts.

---

📧 Admin Email (Optional)

Used in credit purchase/billing-related UI.

NEXT_PUBLIC_ADMIN_EMAIL=your_admin_email_for_credit_purchases

Installation

1. Clone the repository:

   git clone https://github.com/eahtasham/prepwise.git
   cd prepwise

2. Install dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install
   # or
   bun install

Running the Development Server

Start the development server (uses Turbopack by default):

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the application.

Project Structure

A brief overview of the main directories:

eahtasham-prepwise/
├── app/                                  # Next.js App Router: pages, layouts, API routes
│   ├── (auth)/                           # Authentication pages (sign-in, sign-up)
│   │   ├── sign-in/                      # Sign-in page
│   │   └── sign-up/                      # Sign-up page
│   ├── (root)/                           # Authenticated user dashboard and related pages
│   │   ├── layout.tsx                    # Layout for authenticated routes
│   │   └── dashboard/                    # Main dashboard and sub-sections
│   │       ├── page.tsx                  # Dashboard home
│   │       ├── all-interviews/           # View all past interviews
│   │       ├── billing/                  # Manage credits or purchases
│   │       ├── scheduled/                # Scheduled interviews
│   │       └── settings/                 # User profile and preferences
│   ├── interview/                        # Interview creation and feedback
│   │   ├── page.tsx                      # Create/start interview
│   │   └── [id]/                         # Individual interview session
│   │       ├── page.tsx                  # Active interview view
│   │       └── feedback/                 # Post-interview feedback
│   ├── api/                              # API routes (Edge runtime)
│   │   └── vapi/         
│   │       └── generate/                 # Vapi question generation endpoint
│   │           └── route.ts              # 
│   ├── layout.tsx                        # App-wide layout wrapper
│   └── globals.css                       # Global styles and Tailwind imports
│
├── components/                           # UI components
│   ├── custom/                           # Feature-specific components
│   │   ├── dashboard-content.tsx         # Dashboard layout/content
│   │   ├── billing-content.tsx           # Billing UI
│   │   ├── schedule-interview-modal.tsx  # Schedule modal
│   │   ├── settings-content.tsx          # Settings page content
│   │   └── ...                           # Other feature-specific components
│   ├── ui/                               # Shadcn UI base components (Button, Dialog, etc.)
│   ├── InterviewCard.tsx                 # Interview display card
│   ├── Agent.tsx                         # Vapi voice assistant UI
│   ├── AuthForm.tsx                      # Shared login/signup form
│   └── DisplayTechIcons.tsx              # Renders tech stack icons
│
├── constants/                            # App-wide constants and mappings
│   └── index.ts                          # Vapi config, icon maps, dummy data
│
├── contexts/                             # React context providers
│   └── data-context.tsx                  # Global app data context
│
├── firebase/                             # Firebase configuration
│   ├── admin.ts                          # Firebase Admin SDK (backend)
│   └── client.ts                         # Firebase Client SDK (frontend)
│
├── lib/                                  # Utilities and server-side logic
│   ├── actions/          
│   │   ├── auth.action.ts                # Auth-related server actions
│   │   └── general.action.ts             # Interview, feedback actions
│   ├── utils.ts                          # Common utility functions (cn, helpers)
│   └── vapi.sdk.ts                       # Vapi SDK integration functions
│           
├── types/                                # TypeScript types
│   ├── index.d.ts                        # App models and shared types
│   └── vapi.d.ts                         # Types for Vapi assistant integration
│
├── public/                               # Static assets (logos, images)
│
├── README.md                             # Project overview and instructions
├── .env.local                            # Local environment variables (not committed)
├── next.config.ts                        # Next.js configuration
├── tsconfig.json                         # TypeScript compiler settings
├── package.json                          # Project dependencies and scripts
└── eslint.config.mjs                     # ESLint configuration

Key Functionalities

Authentication

• Users can sign up using email/password, Google, or GitHub.
• Email verification is enforced for email/password sign-ups.
• Session management is handled using HTTP-only cookies.
• Authenticated users access a personalized dashboard.
• Password change functionality is available for users who signed up with email/password.

Interview Lifecycle

1. Scheduling/Creation:
   • Users create new interviews via a detailed form, specifying type (Technical, Behavioral, etc.), role, experience level, target company (for context), tech stack, and number of questions.
   • This process consumes one user credit.
   • Future options may include resume parsing and voice-commanded setup.
2. Taking an Interview:
   • Interviews are conducted via voice with a Vapi AI assistant.
   • Webcam can be enabled for a more immersive experience (video is not recorded or stored).
   • If the interview includes a coding segment, the AI will prompt the user to open the in-call code editor.
3. Coding Section (if applicable):
   • The Monaco editor provides a live coding environment.
   • Supports JavaScript, Python, Java, and C++.
   • Code can be executed against the Piston API to get real-time output.
4. Feedback Generation:
   • Upon completion, the interview transcript (and code submission if applicable) is sent to Google Gemini for analysis.
   • Detailed feedback is generated, covering various performance aspects.
   • The interview is marked as "finalized," and an attempt is consumed.
5. Review & Retake:
   • Users can view their feedback on the dashboard.
   • Interviews can typically be retaken (e.g., 2 attempts allowed), allowing users to practice and improve on the same set of questions.

Dashboard & Account Management

• Overview: Displays key statistics like total interviews, scheduled vs. completed, average scores, and credit balance.
• Interview Lists: Separate views for "Scheduled Interviews" and "All Interviews" (which includes completed ones).
• Performance Analytics: Visualizations of performance trends, including scores in different categories (technical, communication, etc.).
• Billing & Credits: Shows current credit balance. Users can initiate a request to purchase more credits by sending a pre-filled email to an admin address specified in environment variables.
• Settings: Manage profile information (view-only for OAuth users), notification preferences, and account security (password changes for email users).

Deployment

This Next.js application is optimized for deployment on the Vercel Platform.Also, it is deployed on Netlify Ensure all necessary environment variables are configured in your Vercel project settings.