MVPCode - 新一代 AI 文档生成平台

MVPCode 是新一代 AI 辅助产品开发工具，旨在帮助独立开发者和初创团队快速生成高质量的产品文档，加速 MVP（最小可行产品）开发流程。

🌟 功能特点

• 💡 智能文档生成：基于DeepSeek API，自动生成7种专业的产品开发文档
• 📝 交互式问答引导：通过结构化问题深入挖掘产品需求，确保文档全面性
• 🔄 实时进度反馈：SSE（Server-Sent Events）实时更新文档生成进度，提供流畅的用户体验
• 📤 灵活文档管理：支持预览、下载单份或全部文档，满足多种协作需求
• 🎨 现代化界面：采用响应式设计，提供直观流畅的操作体验

🛠️ 技术栈

前端技术

• 框架：React 18
• UI组件：Material-UI (MUI)
• 路由管理：React Router 6
• 构建工具：Create React App
• 代码规范：ESLint + Prettier
• 测试工具：Jest
• 样式工具：Tailwind CSS + PostCSS
• 开发工具：VSCode 配置
• API集成：Axios + 自定义请求封装
• 状态管理：React Hooks + Context

后端技术

• 框架：Node.js + Express.js
• 实时通信：Server-Sent Events (SSE)
• AI 集成：DeepSeek API（流式响应）
• 日志系统：Winston + winston-daily-rotate-file
• 错误处理：
  • 统一错误处理中间件
  • 自定义错误类（AppError）
  • 异步错误捕获包装器
• 安全：
  • Helmet（HTTP 头部安全）
  • CORS 配置
  • Rate Limiting
• 请求处理：
  • UUID 请求追踪
  • 请求状态管理
  • 自动资源清理

🚀 快速开始

环境要求

• Node.js >= 16.0.0
• npm >= 8.0.0

前端安装

# 安装前端依赖
cd frontend
npm install

# 创建环境配置文件
cp .env.example .env
# 编辑.env文件，设置必要的环境变量

# 启动开发服务器
npm start

后端安装

# 安装后端依赖
cd backend
npm install

# 创建环境配置文件
cp .env.example .env
# 编辑.env文件，设置必要的环境变量

# 启动后端服务
npm start

📂 项目结构

mvpcode/
├── frontend/                # 前端React应用
│   ├── src/
│   │   ├── components/     # 可复用组件
│   │   │   ├── Layout/    # 布局组件
│   │   │   ├── Common/    # 通用组件
│   │   │   └── Documents/ # 文档相关组件
│   │   ├── pages/         # 页面组件
│   │   ├── services/      # API服务
│   │   │   └── documentService.js # 文档服务API封装
│   │   ├── utils/         # 工具函数
│   │   ├── hooks/         # 自定义Hooks
│   │   ├── constants/     # 常量定义
│   │   └── types/         # TypeScript类型定义
│   ├── public/            # 静态资源
│   ├── config/           # 项目配置
│   │   └── jest.config.js # Jest测试配置
│   ├── .env.example      # 环境变量示例
│   ├── .eslintrc.js     # ESLint配置
│   ├── .prettierrc      # Prettier配置
│   ├── tailwind.config.js # Tailwind CSS配置
│   ├── postcss.config.js  # PostCSS配置
│   └── jsconfig.json    # JavaScript配置
│
├── backend/                # 后端Node.js应用
│   ├── routes/            # 路由定义
│   │   └── documentRoutes.js # 文档相关路由
│   ├── services/          # 业务服务
│   │   ├── documentService.js    # 文档生成主服务
│   │   ├── deepseekService.js    # DeepSeek服务
│   │   ├── deepseekClient.js     # DeepSeek API客户端
│   │   └── sseService.js         # SSE服务
│   ├── middleware/        # 中间件
│   │   ├── errorHandler.js      # 错误处理中间件
│   │   └── asyncHandler.js      # 异步处理包装器
│   ├── utils/            # 工具函数
│   │   ├── logger.js           # 日志工具
│   │   └── AppError.js         # 自定义错误类
│   ├── constants/        # 常量定义
│   ├── types/           # 类型定义
│   ├── models/          # 数据模型
│   ├── logs/           # 日志文件目录
│   ├── app.js          # Express应用配置
│   ├── server.js       # 服务器启动
│   └── .env.example    # 环境变量示例
│
└── README.md            # 项目文档

## 🔧 环境配置

### 前端环境变量 (.env)

**生产环境必需：**
```env
# API配置
REACT_APP_API_URL=https://your-backend-url.com  # 生产环境后端API地址

本地开发环境：

# API配置
REACT_APP_API_URL=http://localhost:3001
REACT_APP_API_TIMEOUT=5000

# 文档生成配置
REACT_APP_MAX_DOCUMENT_SIZE=5242880
REACT_APP_SUPPORTED_FORMATS=md,txt

# 环境配置
REACT_APP_ENV=development
REACT_APP_DEBUG=true

后端环境变量 (.env)

生产环境必需：

# DeepSeek API配置
OPENAI_API_KEY=your-api-key
OPENAI_BASE_URL=https://api.deepseek.com

# 服务器配置
PORT=3001
NODE_ENV=production
CORS_ORIGIN=https://your-frontend-url.com

本地开发环境：

# DeepSeek API配置
OPENAI_API_KEY=your-api-key
OPENAI_BASE_URL=https://api.deepseek.com

# 服务器配置
PORT=3001
NODE_ENV=development
CORS_ORIGIN=http://localhost:3000

# 日志配置
LOG_LEVEL=debug
LOG_DIR=./logs

🚀 部署

前端部署 (Vercel)

1. 在Vercel上导入GitHub仓库
2. 设置构建命令：npm run build
3. 设置输出目录：build
4. 配置环境变量：
   • REACT_APP_API_URL: 后端API地址

后端部署 (Render)

1. 在Render上创建新的Web Service
2. 连接GitHub仓库
3. 设置构建命令：npm install
4. 设置启动命令：NODE_ENV=production node server.js
5. 配置环境变量：
   • PORT: 服务器端口
   • NODE_ENV: production
   • CORS_ORIGIN: 前端域名
   • OPENAI_API_KEY: DeepSeek API密钥
   • OPENAI_BASE_URL: DeepSeek API基础URL

📱 生成的文档类型

1. 项目需求文档 - 详细的产品规格和功能需求
2. 应用流程文档 - 用户交互和功能流程图
3. 后端开发指南 - API设计和数据模型定义
4. 前端开发指南 - UI/UX组件和状态管理
5. 技术栈文档 - 技术选型和依赖关系
6. 文件结构文档 - 项目目录和文件组织
7. 实施说明文档 - 环境配置和部署指南

🔄 工作流程

1. 用户输入产品描述
2. 系统生成相关问题
3. 用户回答问题，深入思考产品
4. 系统生成全面的开发文档
5. 用户预览、下载或复制文档内容

🤝 贡献指南

1. Fork 项目
2. 创建特性分支 (git checkout -b feature/amazing-feature)
3. 提交改动 (git commit -m 'Add some amazing feature')
4. 推送到分支 (git push origin feature/amazing-feature)
5. 创建 Pull Request

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情

👥 作者

• 开发者名字 - @wowyuarm

🙏 致谢

感谢所有为这个项目做出贡献的开发者！

MVPCode 营销页面

这是 MVPCode 智能文档生成工具的营销着陆页，展示产品特点、使用流程和功能优势。

文件结构

mvpcode-landing/
├── index.html          # 主HTML文件
├── landing-page.css    # 样式表
├── landing-page.js     # 交互脚本
├── assets/             # 静态资源目录
│   ├── logo.svg        # Logo文件
│   ├── logo-icon.svg   # Logo图标
│   └── screenshots/    # 产品截图
│       ├── screenshot-1.jpg
│       ├── screenshot-2.jpg
│       └── screenshot-3.jpg
├── README.md           # 本文件
└── deployment-guide.md # 详细部署指南

快速部署

准备工作

1. 确保所有文件已准备就绪，包括HTML、CSS、JS和所有必要的资源文件
2. 替换 assets/screenshots/ 目录中的示例图片为实际产品截图
3. 更新 index.html 中的所有链接，确保它们指向正确的目标

部署到Vercel

1. 创建一个GitHub仓库并上传所有文件
2. 登录 Vercel 并导入该仓库
3. 导入时不需要特殊配置，保持默认设置
4. 部署完成后，可以在Vercel控制台中添加自定义域名

本地开发

要在本地预览和开发网站：

# 使用任意本地服务器，例如Python的HTTP服务器
python -m http.server 8000

# 或使用Node.js的http-server（需先安装）
npx http-server

然后在浏览器中访问 http://localhost:8000 或相应端口。

自定义

• 在 landing-page.css 中修改颜色变量以匹配品牌风格
• 替换 assets 目录中的Logo和图片
• 编辑 index.html 中的文本内容以匹配产品描述

更多信息

详细的部署说明和自定义选项请参阅 deployment-guide.md。