用Claude Code做全栈项目开发：从需求到上线实战教程

export ANTHROPIC_API_KEY="sk-你的jiekouKey"
export ANTHROPIC_BASE_URL="https://api.highwayapi.ai/anthropic "

mkdir task-manager && cd task-manager
git init

# Task Manager 项目
全栈任务管理系统，前后端分离。
## 技术栈
- 后端：Node.js 20 + Express + TypeScript + Prisma + PostgreSQL
- 前端：React 18 + Vite + TypeScript + Tailwind CSS
- 部署：Docker Compose
## 目录结构
- /backend: 后端代码
- /frontend: 前端代码
- /docker: Docker 配置
## 代码规范
- TypeScript 严格模式
- ESLint + Prettier
- 接口统一返回 { success, data, message }

claude "按照 CLAUDE.md 的说明，帮我初始化后端项目。在 backend 目录下创建：
1. package.json（依赖：express, typescript, prisma, @prisma/client, jsonwebtoken, bcryptjs）
2. tsconfig.json
3. .eslintrc.json
4. src/app.ts（Express 应用入口）
5. src/server.ts（启动文件）"

claude "在 backend/prisma/schema.prisma 中定义数据模型：
- User: id, email, password, name, createdAt
- Task: id, title, description?, status(TODO/IN_PROGRESS/DONE), userId, createdAt, updatedAt
用 PostgreSQL datasource"

claude "基于 Prisma schema，在 backend/src/routes 下生成：
1. auth.ts - 注册(/register)和登录(/login)接口，密码用 bcrypt 加密，登录返回 JWT
2. tasks.ts - CRUD 接口，需要 JWT 中间件验证，只能操作自己的任务"

claude "在 frontend 目录下初始化 Vite + React + TypeScript 项目，
安装 tailwindcss、axios、react-router-dom，
配置 tailwind，
创建基础目录结构：src/pages, src/components, src/hooks, src/api"

claude "创建以下页面：
1. src/pages/Login.tsx - 登录表单，调用 POST /api/auth/login，成功后存 JWT 到 localStorage
2. src/pages/Register.tsx - 注册表单
3. src/pages/Tasks.tsx - 任务列表页，支持新增、编辑状态、删除操作
用 Tailwind 做简洁美观的 UI，支持响应式布局"

claude "创建 src/api/index.ts，用 axios 封装所有后端接口：
- 请求拦截器：自动携带 Authorization: Bearer <token>
- 响应拦截器：401 时自动跳转到登录页
- 封装 authApi（login, register）和 tasksApi（list, create, update, delete）"

claude "运行后端测试。如果有失败，分析原因并修复"

claude "src/middlewares/auth.ts 的 JWT 验证中间件没有把 userId 正确挂载到 req.user，
导致 tasks 路由里拿不到当前用户 ID。帮我分析并修复，
同时更新 TypeScript 类型声明，扩展 Request 接口"

claude "为项目创建 Docker 配置：
1. backend/Dockerfile - 多阶段构建，生产环境镜像
2. frontend/Dockerfile - Nginx 托管静态资源
3. docker-compose.yml - 包含 postgres, backend, frontend 三个服务，
   配置环境变量和健康检查"

docker compose up --build

claude "创建 .github/workflows/deploy.yml，实现：
1. push 到 main 分支时触发
2. 运行 TypeScript 类型检查
3. 运行单元测试
4. 构建 Docker 镜像并推送到 Docker Hub
5. SSH 到服务器执行 docker compose pull && docker compose up -d"