ProofPrep

ProofPrep Logo

AI-Powered Interview Preparation Platform

Practice Real Questions. Get Instant Feedback. Land the Job.

Overview

ProofPrep is an AI-powered personal interview coach designed to help users practice real-time, voice-based interview sessions. It simulates live interviews and provides feedback, creating a smart and repeatable prep experience for effective interview preparation.

Features

Core Functionality

  • AI Interview Simulation: Engage in realistic interview scenarios with our AI interviewer that adapts to your responses.

  • Real-time Feedback: Receive immediate feedback on your answers during the interview process.

  • Detailed Performance Analysis: Get comprehensive performance reports with scores across different categories.

  • Interview History: Track your progress over time by reviewing past interview sessions.

  • Interview Recording (Pro Feature): Record your interview sessions for later review and analysis.

  • Subscription Plans: Three-tiered subscription model - Entry (free with 3 credits), Starter, and Pro plans.

  • Flexible Payment Options: Subscription management via Lemon Squeezy plus one-off credit purchases via DaimoPay/Base.

  • Smooth Onboarding: Intuitive welcome experience and guided tutorials for new users.

  • Interactive UI: Engaging animations and micro-interactions throughout the platform for enhanced user experience.

  • Camera Integration: Seamless video recording with preview and embedded modes for interview practice.

  • Responsive Dashboard: Visual metrics to track your progress and usage over time.

Technical Features

  • Next.js Framework: Built with Next.js for server-side rendering and optimal performance.

  • Firebase Authentication: Secure user authentication with email/password and Google Sign-In options.

  • Firestore Database: Scalable NoSQL database for storing user data and interview sessions.

  • Tailwind CSS: Modern, responsive UI with custom design system.

  • Hybrid Payment System: Lemon Squeezy for subscriptions and DaimoPay for cryptocurrency-based credit purchases.

  • Web3 Integration: Base network support and Coinbase Wallet API v2 for one-off credit purchases.

  • Vercel: Cloud platform for deploying and hosting the application.

  • GSAP Animation: Advanced animations including text splitting, interactive elements, and scroll-triggered effects.

  • Interactive Data Visualizations: Chart.js and Recharts for displaying user metrics and progress.

  • Radix UI Components: Accessible UI primitives enhanced with custom styling.

  • Context API: Efficient state management for features like feedback and onboarding.

Design System

  • Color Palette:

    • Primary teal/aqua shades (#b8e8f0, #65bdcc)

    • Very dark backgrounds (#020808, #272f33) for main surfaces

    • Light teal accents (#d9f2f6) for text and highlights

    • Status indicators: Green (#49de50) and red (#f75353)

  • Visual Style:

    • Dark mode focused with light text as the primary theme

    • Custom gradients including dark gradient (#1A1C20 to #08090D), teal gradients, and border gradients for highlights

    • Professional, tech-forward aesthetic that builds user trust

  • UI Elements:

    • Heavy use of rounded corners (rounded-2xl, rounded-full)

    • Card-based design with dark cards and teal accents

    • Subtle animations including border animations and fade effects

    • Modern button styles with teal buttons and dark text for primary actions

    • Mona Sans font family for clean, professional typography

Demo

You can try ProofPrep live here:

Watch a video demo:

Problem Statement

Traditional interview preparation methods often fall short in several ways:

  1. Lack of Realism: Reading interview questions and preparing answers doesn't simulate the pressure of a real interview.

  2. No Immediate Feedback: Practice with friends or mentors doesn't provide objective, consistent feedback.

  3. Limited Accessibility: Professional interview coaching is expensive and not accessible to everyone.

  4. Difficulty Tracking Progress: Most preparation methods don't offer a way to measure improvement over time.

  5. Industry-Specific Preparation: Different roles require different preparation approaches.

Solution

ProofPrep addresses these challenges by:

  1. Creating Realistic Scenarios: Our AI interviewer simulates real interview conditions, including follow-up questions based on your responses.

  2. Providing Objective Feedback: Get consistent, data-driven feedback on your performance.

  3. Making Preparation Accessible: Available 24/7 at a fraction of the cost of professional coaching, with a free tier for everyone.

  4. Enabling Progress Tracking: Review past interviews and see improvement across different skill categories.

  5. Offering Role-Specific Practice: Choose from various job roles and technical stacks for targeted preparation.

Technical Implementation

Architecture

  • Frontend: Next.js with React

  • Authentication: Firebase Auth

  • Database: Firestore

  • AI: Custom LLM implementation for interview simulation

  • Payment: Lemon Squeezy for subscription management + DaimoPay/Base for additional credit purchases

Key Components

  1. Interview Engine: Powers the AI interviewer, generating questions and evaluating responses.

  2. Feedback System: Analyzes interview performance across multiple dimensions.

  3. User Dashboard: Displays interview history and performance metrics.

  4. Authentication System: Manages user accounts and session persistence.

Challenges and Solutions

Challenge 1: Realistic AI Interviewer

Problem: Generating contextually relevant interview questions and maintaining conversation flow.

Solution: Implemented a sophisticated prompt engineering approach with context awareness, allowing the AI to maintain conversation history and adapt questions based on previous answers.

Challenge 2: Payment Integration

Problem: Integrating multiple payment methods for different purchase types.

Solution: Implemented a hybrid payment system using Lemon Squeezy for subscription management and DaimoPay/Base chain for cryptocurrency-based one-off credit purchases, providing flexibility while maintaining a consistent user experience.

Challenge 3: Authentication and Session Management

Problem: Handling user authentication across different parts of the application.

Solution: Implemented Firebase authentication with custom hooks and server-side session validation, ensuring secure access to protected routes and resources.

Challenge 4: Performance Optimization

Problem: Ensuring fast load times and responsive UI despite complex AI operations.

Solution: Utilized Next.js server components, implemented efficient state management, optimized API calls, and employed code splitting to minimize latency. Applied performance optimizations for animations and interactive elements.

Challenge 5: User Onboarding

Problem: Ensuring new users understand how to use the platform without overwhelming them.

Solution: Implemented a welcome modal for first-time users and an on-demand multi-step tutorial accessible via a help button, providing just-in-time guidance with interactive tooltips.

Future Enhancements

  1. Personalized Learning Paths: Customize interview preparation based on user performance and goals.

  2. Industry-Specific Modules: Expand interview types to cover more industries and roles.

  3. Peer Review: Allow users to share interview recordings for feedback from peers.

  4. Advanced Analytics: Provide deeper insights into performance patterns over time.

  5. Mobile Application: Develop native mobile apps for iOS and Android.

  6. Enhanced Interactive Elements: Further expand interactive UI elements and animations.

  7. Customizable Dashboard: Allow users to personalize their dashboard views and widgets.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Environment Setup

Required Environment Variables

Create a .env.local file in the root directory with the following variables:

# Firebase Configuration
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=
FIREBASE_CLIENT_EMAIL=
FIREBASE_PRIVATE_KEY=

# Vapi Configuration
NEXT_PUBLIC_VAPI_WEB_TOKEN=

# Lemon Squeezy Configuration
LEMON_SQUEEZY_API_KEY=
LEMON_SQUEEZY_STORE_ID=
LEMON_SQUEEZY_WEBHOOK_SECRET=

# Coinbase CDP SDK Configuration
CDP_API_KEY_ID=
CDP_API_KEY_SECRET=
CDP_WALLET_SECRET=

Note: Do not use quotes around the environment variable values, especially for FIREBASE_PRIVATE_KEY, as Next.js will interpret them literally.

Documentation

Installation

npm install
npm run dev

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

  1. Fork the repository

  2. Create your feature branch (git checkout -b feature/amazing-feature)

  3. Commit your changes (git commit -m 'Add some amazing feature')

  4. Push to the branch (git push origin feature/amazing-feature)

  5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

  • Lemon Squeezy for subscription management services

  • Base for providing the blockchain infrastructure for additional credit purchases

  • Daimo Pay for the payment processing SDK for one-off credit purchases

  • Coinbase for the Wallet API v2 integration

  • Vapi for the voice AI integration

  • Firebase for authentication and database services

  • Next.js for the React framework

  • Tailwind CSS for the utility-first CSS framework

NextMemo

Last updated