# ProofPrep

![ProofPrep Logo](https://2595916823-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FveOiwOpC8uQN1kOTsXT2%2Fuploads%2Fgit-blob-a6c093b8a48e79e4dd4ca032b39e358d9456796d%2Flogo.png?alt=media)

#### 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:

* <https://proofprep.druxamb.dev>
* <https://proofprep.vercel.app/>

Watch a video demo:

* [YouTube Demo](https://youtu.be/C8KdmWDGYNw?si=amdmSjzCIBi-mbov)

## 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

* [Terms of Use](https://proofprep.gitbook.io/docs/terms_of_use) - User guidelines and platform usage terms
* [Terms and Conditions](https://proofprep.gitbook.io/docs/terms_and_conditions) - Comprehensive legal agreement

## Installation

```bash
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](https://github.com/DruxAMB/ProofPrep/blob/main/LICENSE/README.md) file for details.

## Acknowledgments

* [Lemon Squeezy](https://www.lemonsqueezy.com/) for subscription management services
* [Base](https://base.org/) for providing the blockchain infrastructure for additional credit purchases
* [Daimo Pay](https://www.daimo.com/) for the payment processing SDK for one-off credit purchases
* [Coinbase](https://www.coinbase.com/) for the Wallet API v2 integration
* [Vapi](https://vapi.ai/) for the voice AI integration
* [Firebase](https://firebase.google.com/) for authentication and database services
* [Next.js](https://nextjs.org/) for the React framework
* [Tailwind CSS](https://tailwindcss.com/) for the utility-first CSS framework