JavaScript / TypeScript · 框架阶段 35 项必做
全栈笔记应用（SSR + 数据库 + 登录）
掌握现代前端开发范式
难度
建议投入 40–70 小时· 6 条需求验收权重
能说清 Server/Client Component 的区别；页面有加载与错误态40%
核心功能可独立跑通，无阻断性 bug25%
关键路径有测试或可复现的验收脚本15%
README 写清运行方式、架构与踩坑10%
能在 5 分钟内讲清设计与取舍10%
总分 100。低于 60 分说明这个阶段还没过，回去补知识点，不丢人。
项目背景
这是「JavaScript / TypeScript」路径第 3 阶段（阶段三 · 框架）的验收项目。本阶段目标是：掌握现代前端开发范式。项目不是练习题的堆砌，而是把这一阶段的知识点压缩成一个能演示、能讲清楚取舍的成品。
MVP 目标
- 掌握现代前端开发范式
- 做出可运行、可演示的「全栈笔记应用」
- 把 React 组件与状态、Hooks 与副作用、路由与数据请求 真正用进项目，而不是停在笔记里
功能需求清单
5 项必做 · 1 项建议- 1SSR必做
围绕「SSR」做出可演示的最小实现，覆盖正常流程与至少一条异常流程。
- 2数据库必做
围绕「数据库」做出可演示的最小实现，覆盖正常流程与至少一条异常流程。
- 3登录必做
围绕「登录」做出可演示的最小实现，覆盖正常流程与至少一条异常流程。
- 4可运行与可复现必做
提供一条命令或脚本，在干净环境（或 Docker）里能跑起来；把依赖版本写清楚。
- 5异常与边界必做
至少处理 3 类异常或边界输入（空数据、超长输入、网络失败、并发冲突等），并说明处理策略。
- 6测试或验收脚本建议
对核心路径写至少 3 个自动化测试，或提供可重复执行的验收脚本（含预期输出）。
技术约束
React 组件与状态Hooks 与副作用路由与数据请求状态管理（Zustand）Next.js App Router
交付物
- Git 仓库（含分阶段提交记录，不是最后一次性上传）
- README：项目简介、架构/流程图、运行方式、已知限制
- 演示材料：截图，或 1–2 分钟录屏
- 复盘：做错的 3 个决定与改进方案
加分项
- 在「全栈笔记应用」基础上加一层持久化或缓存
- 补 CI（lint + test）与一键部署脚本
- 做一次性能或质量对比，用数据说明改进
最容易翻车的地方
- 先学框架再学语言 —— React 三年一换，闭包、原型链与事件循环十年不变
- 只写浏览器端 —— 不会 Node、不会构建工具，就永远停在切图
- 只做到「能跑」，没有异常处理与边界用例
- README 只写一句「装依赖后运行」，别人跑不起来
做完之后，简历怎么写
「全栈笔记应用」：独立完成 SSR、数据库、登录，使用 React 组件与状态、Hooks 与副作用、路由与数据请求；通过「能说清 Server/Client Component 的区别」验收。
写「做了什么 + 用了什么 + 结果如何」，不要写「参与了 XX 系统」。