PitchBetter

PitchBetter is a web application that helps startup founders rehearse their pitch by simulating a conversation with an AI investor. Users receive detailed, actionable feedback and a multi-dimensional performance analysis after each session.

The Practices Flow

The application guides the user through a three-step process:

1. Project Setup: To begin, the founder provides the three most essential pieces of their pitch: the project name, the problem it solves, and the proposed solution. This initial context is used to brief the AI investor.

2. AI Investor Conversation: The user engages in a real-time, text-based conversation with an AI designed to act like a demanding, analytical investor. The AI's persona is governed by a detailed system prompt, which is dynamically fed the founder's project details. This allows the AI to ask relevant, probing questions and pressure-test the founder's ideas, just like a real VC would.

3. Performance Analysis & Report: When the founder ends the session, the entire conversation is sent to a specialized AI analyst. This AI evaluates the founder's performance and generates a comprehensive report.

Key Features

• Dynamic AI Investor Persona: The AI maintains a consistent character, never breaking its role as a critical investor, to provide a realistic and challenging practice environment.
• Multi-Dimensional Reporting: The final report features a radar chart (Chart.js) displaying scores across eight key metrics: Clarity, Confidence, Market Knowledge, Business Model, Enthusiasm, Data-Drivenness, Coachability, and Vision.
• Actionable Feedback: Alongside the scores, the AI provides detailed, qualitative feedback for each of the eight areas, highlighting strengths and suggesting specific areas for improvement.
• Full History & Persistence: Complete Practices sessions (including project details, the full conversation transcript, and the final report) are saved to the browser's localStorage.
• Review Past Sessions: Users can browse a list of past Practices on the home page, allowing them to review previous conversation transcripts and view their historical reports to track progress.
• Real-Time Streaming: AI responses are streamed word-by-word using Server-Sent Events (SSE) to create a fluid, natural conversational experience.
• Clean & Responsive UI: The interface is designed to be simple and intuitive, with a consistent theme, custom components like confirmation modals, and improved responsiveness for mobile devices.

Tech Stack

• Frontend: Vue.js 3 (Composition API)
• Routing: Vue Router
• AI Integration: FastGPT (for streaming chat and analysis)
• Authentication: Google Identity Services via vue3-google-login + Supabase for backend authentication
• Charting: Chart.js via vue-chartjs
• UI Icons: Lucide
• Build Tool: Vite

Project Setup

Prerequisites

• Node.js (v18.x or higher)
• npm (included with Node.js)
• Supabase account (for authentication)

Installation

1. Clone the repository:

   git clone <repository-url>
   cd pitch-practice

2. Install dependencies:

   npm install

3. Configure environment variables:

   • Copy the example environment file: cp .env.example .env.local (if available)
   • Or create .env.local with the following variables:

     VITE_SUPABASE_URL=your_supabase_url_here
     VITE_SUPABASE_ANON_KEY=your_supabase_anon_key_here

   • See SUPABASE_SETUP.md for detailed configuration instructions

Running for Development

Start the Vite development server:

npm run dev

The application will be available at http://localhost:5173.

---

This README provides a comprehensive guide for anyone looking to understand, run, or contribute to the project.

PitchBetter AI

Onboarding 付费流程测试指南

流程说明

1. Onboarding 完成检查：用户完成所有 Onboarding 步骤后，系统标记 hasCompletedOnboarding = true
2. 付费状态检查：系统通过 pay.ts 的 hasValidSubscription 检查用户是否已付费 (hasPaid)
3. 付费弹窗显示：如果已完成 Onboarding 但未付费，显示付费弹窗
4. 成功页面：如果已付费，直接显示成功页面

付费状态检查机制

• 使用 usePaymentStore().checkSubscription() 检查用户订阅状态
• 通过 hasValidSubscription 判断用户是否已付费
• 支持 API 调用失败时的 localStorage 回退机制
• 提供 syncPaymentStatus() 方法同步最新付费状态

测试步骤

1. 重置所有状态（开发环境）

• 访问 Onboarding 页面
• 点击 "Reset All Status" 按钮
• 这将重置所有状态，让你可以重新测试整个流程

2. 测试新用户流程

1. 登录后，如果未完成 Onboarding，进入 Onboarding 流程
2. 完成所有 Onboarding 步骤
3. 系统检查付费状态
4. 如果未付费，显示付费弹窗
5. 支付成功后，标记为已付费，显示成功页面

3. 测试已付费用户流程

1. 使用 "Show Current Status" 查看当前状态
2. 使用 "Reset Payment Status" 重置付费状态
3. 访问主页，应该被重定向到 Onboarding 的付费步骤
4. 支付成功后，应该能正常访问主页

4. 测试付费状态检查机制

1. 使用 "Sync Payment Status" 手动同步付费状态
2. 使用 "Show Current Status" 查看同步后的状态
3. 验证付费状态是否正确反映在 hasValidSubscription 中
4. 测试 API 调用失败时的 localStorage 回退机制

5. 开发者工具（仅开发环境）

• Show Current Status：显示当前所有状态（会自动同步付费状态）
• Sync Payment Status：手动同步付费状态
• Reset Onboarding Status：重置 Onboarding 完成状态
• Reset Payment Status：重置付费状态
• Reset All Status：重置所有状态
• Show Payment Modal：强制显示付费弹窗

状态说明

• hasCompletedOnboarding：标记用户是否完成 Onboarding
• hasPaid：标记用户是否已付费
• shouldShowPaymentModal()：检查是否需要显示付费弹窗

路由逻辑

• 登录后：检查 Onboarding 完成状态和付费状态
• 访问主页时：如果已完成 Onboarding 但未付费，重定向到 Onboarding 的付费步骤
• 访问 Onboarding 时：如果已完成且已付费，重定向到主页