个人健身网站

健身 Web 应用 / Next.js / 锻炼计划 / 卡路里追踪

一句话总结： 一个使用 Next.js 构建的免费、无需账号的个人健身平台——提供个性化锻炼计划、卡路里目标、进度跟踪和营养记录，所有数据均存储在本地，无需注册。

在线站点：pfwfm.vercel.app

---

功能特性

• 根据用户资料和目标量身定制的个性化锻炼计划
• 包含已保存食物和每日日志的卡路里追踪
• 包含宏量营养素分析的营养记录
• 通过可视化图表（Recharts）进行进度跟踪
• 构建个人资料并推荐课程的新手引导流程
• 用于个性化例程的自定义锻炼生成器
• 完整的个人资料导出和分享
• 无需账号——所有数据都存储在 localStorage 中
• 免费，无订阅，无广告

---

我的贡献（角色与职责）

全栈开发：

• 使用 Next.js 15 App Router 和 TypeScript 严格模式构建了整个应用
• 实现了包含预设方案和自定义例程的锻炼计划系统
• 开发了具有本地存储持久性的卡路里和营养追踪功能
• 创建了分步骤设置个人资料的新手引导流程
• 使用 Recharts 构建了进度可视化仪表板

UI/UX 设计：

• 使用 shadcn/ui 组件设计了响应式、移动优先的布局
• 使用 next-themes 实现了深色模式支持
• 使用 Framer Motion 创建了动画落地页和流畅的过渡效果
• 为健身追踪功能开发了可复用的组件系统

架构设计：

• 基于 localStorage 的数据层（8 个 pfw_ 键）——无需后端
• 具有功能特定目录的模块化组件结构
• 使用 TypeScript 严格模式进行类型安全的状态管理
• 具有详细功能规范的规范驱动开发

---

面临的挑战

• 无后端架构： 完全在 localStorage 中管理复杂的关联数据（锻炼计划、日志、营养）需要仔细的键设计和数据迁移策略
• 跨功能一致性： 确保锻炼计划、卡路里追踪和进度图表都能正确引用相同的用户资料数据
• 大规模类型安全： 在不断增长的代码库中，跨越 localStorage 序列化边界保持 TypeScript 严格模式的合规
• 移动优先的响应式设计： 健身追踪表单和图表需要能够在手机和桌面端无缝协作

---

项目架构

• 框架： Next.js 15 App Router 与 TypeScript 5.x (strict: true)
• UI： shadcn/ui, Tailwind CSS v4, Framer Motion, Lucide 图标
• 图表： Recharts v3（为了性能采用延迟加载）
• 数据层： 浏览器 localStorage（8 个键：个人资料、当前计划、锻炼日志、进度、营养、卡路里日志、已保存食物、自定义锻炼）
• Hooks： usehooks-ts (useLocalStorage), 自定义 hooks
• 测试： Playwright (E2E), Vitest (单元测试)
• 部署： Vercel

---

演示预览

• 在线站点： pfwfm.vercel.app
• 平台视图： Web（响应式，移动优先）
• 展示功能：
  • 带有英雄栏目的落地页
  • 设置个人资料和目标的新手引导流程
  • 包含锻炼、营养和进度概览的仪表板
  • 包含预设方案和自定义例程的锻炼页面
  • 包含已保存食物的卡路里和营养追踪
  • 进度图表和统计数据

---

开发资源

• 指南/文档：
  • Next.js, shadcn/ui, Tailwind CSS v4, Framer Motion 文档
  • 代码库中的 CLAUDE.md 开发指南

---

如果您需要更多详情或想查看代码库，请直接联系作者。