开发指南

相关源文件

• .github/workflows/tsc.yml
• apps/portal/next.config.mjs
• apps/portal/package.json
• apps/portal/src/components/questions/filter/FilterSection.tsx
• apps/portal/src/pages/questions/index.tsx
• apps/portal/src/server/router/index.ts
• apps/portal/src/types/questions.d.ts
• package.json
• pnpm-workspace.yaml

本指南为希望为 Tech Interview Handbook 仓库贡献代码的开发者提供了全面的说明。内容涵盖了设置过程、架构概述、开发工作流以及处理此代码库的最佳实践。

有关整体系统架构的信息，请参阅概述。

存储库结构

Tech Interview Handbook 使用由 pnpm workspaces 管理的 monorepo 结构。这允许在不同的应用程序之间共享代码，同时保持关注点分离。

来源：package.json1-33 pnpm-workspace.yaml1-4 apps/portal/src/server/router/index.ts1-78

开发环境设置

先决条件

在开始之前，请确保您已安装以下内容

要求	版本	备注
Node.js	18.19.2	仓库要求的精确版本
pnpm	8.15.8	用于包管理和工作区
Git	最新版	用于版本控制

来源：package.json28-32

安装步骤

1. 克隆仓库

2. 安装依赖项

3. 设置环境变量（对于 portal 应用，在 apps/portal 目录中创建一个 .env 文件）。

4. 运行开发服务器

来源：package.json11-22

项目结构详解

该仓库包含多个应用程序和共享包

应用程序（apps/）

Portal 应用 (Next.js)

Portal 应用包含交互式功能，例如简历审查系统、Offer 系统和问题题库。关键目录包括：

来源：apps/portal/package.json1-70 apps/portal/src/server/router/index.ts1-78 apps/portal/src/pages/questions/index.tsx1-49

共享包（packages/）

• UI：跨应用程序共享的 UI 组件
• tailwind-config：共享的 Tailwind CSS 配置
• tsconfig：共享的 TypeScript 配置

来源：apps/portal/package.json51-65

tRPC API 层

Portal 应用使用 tRPC 进行客户端和服务器之间的类型安全 API 通信。这提供了端到端的类型安全性，无需代码生成。

主路由文件位于 apps/portal/src/server/router/index.ts，作为所有 API 路由的入口点。

来源：apps/portal/src/server/router/index.ts1-78

开发工作流

可用命令

命令	描述
pnpm dev	启动 Portal 开发服务器
pnpm dev:ui	启动 UI 开发环境
pnpm dev:website	启动网站开发服务器
pnpm dev:all	启动所有开发服务器
pnpm build	构建所有包和应用程序
pnpm lint	在仓库中运行 lint
pnpm tsc	运行 TypeScript 类型检查
pnpm test	运行测试
pnpm format	使用 Prettier 格式化代码

针对 Portal 的特定命令

命令	描述
pnpm seed	用初始数据填充数据库
pnpm seed-salaries	填充薪资数据
pnpm seed-analysis	填充分析数据
pnpm seed-questions	填充问题数据
pnpm seed-companies	填充公司数据

来源：package.json11-22 apps/portal/package.json5-16

数据库管理

Portal 应用使用 Prisma 进行数据库访问。在对 Prisma 架构进行更改后，您需要运行迁移。

要使用提供的种子脚本填充数据库的初始数据，请执行以下操作。

来源：apps/portal/package.json5-16

组件开发

问题系统

问题系统由多个组件组成，用于浏览、过滤和显示面试问题。

问题系统使用 TypeScript 接口来确保组件之间的类型安全。

Question
├── id: string
├── content: string
├── type: QuestionsQuestionType
├── numAnswers: number
├── numComments: number
├── numVotes: number
├── updatedAt: Date
└── aggregatedQuestionEncounters: AggregatedQuestionEncounter

来源：apps/portal/src/pages/questions/index.tsx1-49 apps/portal/src/components/questions/filter/FilterSection.tsx1-161 apps/portal/src/types/questions.d.ts1-92

持续集成

该仓库使用 GitHub Actions 进行持续集成。

1. TypeScript 检查：运行 pnpm tsc 以确保代码库的类型安全。
2. Linting：确保代码质量和一致性。

来源：.github/workflows/tsc.yml1-38

最佳实践

代码组织

1. 基于特性的结构：组件按特性（问题、Offer、简历）组织。
2. 类型安全：使用 TypeScript 接口定义共享类型。
3. 路由组织：tRPC 路由按域组织，并遵循一致的命名模式。

性能考量

1. 组件优化：使用 React hook，例如 useMemo 来优化渲染性能。
2. 查询优化：请注意 tRPC 处理程序中的数据库查询。
3. 捆绑包大小：添加新依赖项时要小心，以保持捆绑包大小的最优化。

来源：apps/portal/src/components/questions/filter/FilterSection.tsx60-93

故障排除

常见问题

1. 类型错误：如果遇到 TypeScript 错误，请尝试先运行共享包的 pnpm build。
2. 包解析：如果依赖项未正确解析，请删除 node_modules 并重新安装。
3. 数据库连接：确保在 .env 中正确配置了数据库连接字符串。

有关更详细的故障排除，请查看 GitHub 上的项目问题跟踪器。