-
-
Banner
-
Landing Page
-
Company Problem Selection
-
Active Interview
-
Post-Interview Evaluation
Inspiration
The idea for Offscript came from a painful realization: talented engineers were failing interviews not because they couldn't solve problems, but because they couldn't explain their solutions. We watched friends ace LeetCode problems in silence, then freeze when asked to talk through their approach in real interviews. Traditional platforms prepare you for the problems, but not the performance. We built Offscript to bridge this gap—because landing your dream job shouldn't depend on whether you're naturally good at thinking out loud.
What it does
Offscript is a voice-based technical interview simulator that helps engineers practice the way interviews actually happen—through conversation. Users can:
- Practice coding problems while speaking their thought process aloud
- Receive real-time AI feedback on communication clarity and problem-solving approach
- Choose company-specific problem sets (Google, Meta, Amazon, etc.)
- Review detailed performance analytics including scores for communication, problem-solving, and implementation
- Access full interview transcripts with timestamped feedback
- Track progress over time with a personalized dashboard
How we built it
Frontend Architecture: Built on Next.js 15 with TypeScript, our interface features a three-panel interview environment with Monaco Code Editor for professional-grade coding, real-time transcript visualization, and collapsible problem panels. We integrated Vapi AI’s Web SDK seamlessly into React contexts, implementing debounced code synchronization to prevent overwhelming the AI with rapid typing changes. The UI includes mobile detection with desktop-only warnings, dark/light theme switching, and responsive design using Tailwind CSS and shadcn/ui components. Implemented Cloudflare CDN caching to ensure everyone has a fast and consistent experience.
Backend Services: Our FastAPI backend serves as the orchestration layer with four specialized endpoints: random LeetCode problem generation, Vapi webhook handling, comprehensive transcript management, and AI-powered rating services. We built a SQLite database with automatic transcript storage, including metadata tracking and performance analytics. The system handles 81 commits worth of iterative refinement, showing our rapid development and testing cycle.
AI Integration Layer: The most challenging piece was creating invisible code context sharing. We developed a metadata streaming system that sends code updates to the Vapi AI without cluttering the conversation transcript. This required implementing speaking detection, debounced updates (2-second delay), and careful state management to coordinate between voice AI, code editor changes, and conversation flow.
Intelligent Rating System: We integrated Google’s Gemini AI to automatically analyze interview transcripts and provide detailed grades across Communication, Problem Solving, and Implementation categories. This system generates structured feedback with letter grades, specific improvement points, and actionable suggestions—all happening automatically after each interview session.
Challenges we ran into
The Invisible Code Context Problem: Our biggest technical hurdle was maintaining AI awareness of code changes without disrupting natural conversation flow. Traditional approaches would spam the transcript with code updates, making conversations unreadable. We solved this by discovering Vapi’s metadata field capabilities, allowing us to stream code context invisibly to the AI while keeping the conversation clean. This required extensive experimentation with Vapi’s API and careful timing coordination.
Real-Time State Synchronization: Coordinating state between voice AI (speaking/listening), live code editing (Monaco), and transcript management proved incredibly complex. We had to prevent code updates while the AI was speaking, handle rapid typing without overwhelming the system, and maintain conversation continuity. Our solution involved React refs, debounced hooks, and careful effect dependency management across multiple components.
Voice AI Integration Complexity: Getting Vapi to work seamlessly with our custom interview flow required deep understanding of their event system. We faced issues with call initialization timing, metadata handling, transcript formatting, and error recovery. The 81 commits in our repository tell the story of iterative debugging and refinement to achieve smooth voice interactions.
Cross-Service Architecture: Building reliable communication between Next.js frontend, FastAPI backend, Vapi AI, and Gemini rating services created numerous integration challenges. We implemented comprehensive error handling, automatic transcript uploads, rating pipeline automation, and database transaction management to ensure no interview data was lost.
Performance Under Pressure: Interview environments demand zero-latency interactions. We optimized debounce timing, implemented efficient transcript storage, added desktop-only warnings for performance, and created loading states that don't interrupt the interview flow.
Accomplishments that we're proud of
- Breakthrough in Conversational Coding: First platform that maintains natural interview conversation while invisibly tracking live code changes.
- Production-Grade Voice Integration: Vapi AI integration handles interruptions, code updates, and error recovery gracefully over 45-minute sessions.
- Intelligent Automatic Assessment: Gemini AI analyzes communication, problem-solving, and implementation to generate actionable feedback.
- Polished User Experience: Mobile detection, theme switching, collapsible panels, and three-panel layout create an authentic interview atmosphere.
- Robust Data Architecture: SQLite database captures complete interview sessions with metadata, ratings, and searchable transcripts.
What we learned
- Voice UI Design Principles: Crafting interfaces that support simultaneous voice and visual interaction taught us new design paradigms.
- Real-Time AI Coordination: Managing multiple AI services while maintaining data consistency and UX required sophisticated state management.
- Interview Psychology: Testing revealed how UI elements affect candidate stress—collapsible panels reduce overwhelm, timer placement impacts anxiety, and transcript visibility provides reassurance.
- Hackathon Scale Engineering: Building production-quality integrations under time pressure taught us prioritization and modular architecture.
What's next for Offscript
- Advanced AI Interviewer Personalities: Develop specialized AI interviewers trained on different company cultures.
- Comprehensive Analytics Dashboard: Build detailed performance tracking, improvement trends, and personalized learning paths.
- Expanded Problem Database: Scale to 500+ questions across system design, behavioral scenarios, and domain-specific challenges.
- Enterprise Integration: Create company-specific preparation aligned with hiring processes, ATS integration, and white-label solutions.
