构建教程

项目初始化

选择技术栈，搭建目录结构，完成第一次绿色构建。

Monorepo 搭建

用 pnpm/Turborepo workspace 组织 apps + packages，共享构建缓存。

CI/CD 骨架

搭建 GitHub Actions 流水线，在每个 PR 上门控 build + test + lint。

环境配置

加载、验证、分层环境变量，让应用在缺配置时快速失败。

Lint 配置

配置 ESLint + Prettier + TypeScript strict，在提交前捕获风格和类型错误。

Git 工作流

选择从单人到团队可扩展的分支模型和提交约定。

Docker 入门

写多阶段 Dockerfile，产出小且可缓存的生产镜像。

IaC 入门

用 Terraform/Pulumi 定义云基础设施，让环境可复现且可丢弃。

API 集成

用类型化客户端、重试和限流处理调用外部 REST/GraphQL API。

第三方认证

集成认证提供方（Auth0、Clerk、NextAuth）而非自研会话加密。

支付集成

通过 Stripe/RevenueCat 收款，带幂等、webhook 验证和对账。

Webhook 搭建

接收并可靠处理 webhook，带签名验证、幂等和死信队列。

OAuth 2.0 流程

实现带 PKCE 的授权码流程，安全访问第三方 API。

SSO 配置

为企业客户配置 SAML/OIDC 单点登录，带即时配置。

数据同步

用变更数据捕获、冲突解决和回填保持两系统同步。

事件桥接

用事件总线（Kafka/NATS/EventBridge）连接服务，实现解耦可回放通信。

Figma 转代码

把 Figma 画板转成 React 组件而不丢失设计意图。

设计 Token 流水线

搭 CI 流水线把 Figma token 转成 CSS/Tailwind/iOS/Android 格式。

组件生成

从模板脚手架新 UI 组件，带正确结构、测试和 Storybook story。

Storybook 同步

保持 Storybook story 与组件同步，部署活的设计系统文档站。

响应式翻译

把 Figma 响应式变体（移动/平板/桌面）准确翻译成 Tailwind 断点。

动画交接

把 Figma Smart Animate / Lottie 规格翻译成代码中的 Framer Motion 或 CSS 动画。

图标系统

搭可 tree-shake 的图标系统，带 SVG 优化、一致尺寸和可访问性。

主题桥接

用 CSS 变量和主题提供方把设计系统主题（亮/暗/品牌）桥接到代码。

全栈接线

连接前端、API 和数据库，让按钮点击往返 DB 并返回。

数据库搭建

搭建 Postgres 带迁移、种子和连接池，用于本地 + prod。

API 契约

用 OpenAPI/zod 定义版本化 API 契约，客户端和服务端都消费。

状态管理

选正确状态策略——服务端状态 vs 客户端状态——不过度工程化。

路由搭建

配置基于文件的路由，带布局、嵌套路由和类型化参数。

表单流水线

用 schema 验证、可访问输入和渐进增强构建表单。

错误边界

加错误边界和全局错误处理，崩溃显示恢复路径非白屏。

部署准备

为生产准备应用：构建优化、环境变量、健康检查和回滚。

调试策略

采用可复现方法（二分、隔离、假设）而非试错式微调。

日志搭建

第一天装结构化日志带级别、请求 ID 和关联上下文。

Source Map

生成并上传 source map，让生产栈追踪指向原始 TypeScript。

性能剖析

优化前测量——用剖析器找真实瓶颈而非猜测。

内存泄漏

用堆快照和保留路径分析检测并修内存泄漏，防 prod OOM。

竞态条件

用确定性复现找并修并发 bug，非靠运气。

网络调试

读实际请求和响应调试 HTTP/CORS/WebSocket 问题，非生成它们的代码。