个人健身网站

基于 Next.js 15、Tailwind CSS、Framer Motion 和 Recharts 构建的免费、免账号个人健身追踪器。

演示链接

概览

• 角色：全栈开发者与 UI/UX 设计师
• 技术栈：Next.js 15、TypeScript、Tailwind CSS v4、shadcn/ui、Framer Motion、Recharts、Vitest、Playwright
• 关键成果：100% 无服务器，纯客户端私有数据架构，零数据库设置成本
• 摘要：一个免费、免账号的个人健身平台，具有个性化锻炼计划、卡路里目标、进度追踪和营养记录功能。为个人使用而创建，以绕过臃肿的商业工具，它将所有数据严格存储在客户端浏览器的本地存储（local storage）中，完全无需创建账户。

待解决问题

• 挑战：商业健身平台将基本的追踪功能（如自定义每日目标、常量营养素细分和锻炼记录）锁定在昂贵的订阅付费墙后。
• 受众群体：主要为个人日常使用而构建，提供一个干净、尊重隐私且完全免费的替代商业追踪器的方案。
• 约束条件：在没有后端数据库的情况下，存储关联结构（如锻炼计划、活动日志和自定义食物）需要可靠的客户端序列化方案。

解决方案与决策

• 架构：本地优先的 React SPA 模式，利用 Next.js App Router 进行初始布局的服务端生成和动态客户端状态钩子。
• 关键决策：使用 8 个独立的浏览器本地存储（local storage）键作为独立的关联架构表，而不是集成外部数据库。
• 权衡：牺牲了原生的跨设备同步，换取了完全即时的隐私和零托管维护成本（提供手动 JSON 导出/导入作为后备方案）。
• 数据流：用户交互 -> React hook 状态 -> localStorage 同步 -> 动态 UI 布局更新与 Recharts 可视化。

关键成果与影响

• 结果：一个完全针对我自己锻炼和营养工作流定制的日常工具。
• 对比：避免了主流商业追踪器的付费墙、注册障碍和高昂订阅费用。
• 影响：完全取代了日常个人使用中的商业卡路里和锻炼追踪器，将所有健康指标完全保留在本地。

技术深度解析

• 值得注意的细节：自定义 React hooks 安全地解析 localStorage 序列化数据，以避免 Next.js 中的 SSR 不匹配/水合（hydration）错误。
• 验证：使用 Playwright E2E 测试在各个视口尺寸下验证了 UI 流程和响应式布局。
• 优化：对重量级的 Recharts 图表模块进行懒加载，保持初始页面包轻量，并确保在 Google PageSpeed 中获得高分。
• 代码质量：严格模式的 TypeScript 编译、基于路径的模块别名和模块化布局架构。

总结反思

• 不同做法：在未来的迭代中，我会实施 WebRTC 点对点数据同步，以允许在不将个人指标存储在第三方服务器上的情况下实现跨设备同步。
• 成功之处：交付了一个使用 Tailwind v4 和 shadcn/ui 的美观、响应式的深色主题仪表板，感觉就像一个原生应用。
• 经验教训：加深了对处理持久性浏览器状态模式以及在布局架构发生变化时的客户端数据迁移策略的理解。

---

我的贡献

• 全栈开发：使用 Next.js 15 构建了引导问卷、个性化计划计算、卡路里日志追踪和自定义营养输入表单。
• UI/UX 设计：精心制作了深色主题的用户界面、响应式网格、交互式仪表板卡片和流畅的 Framer Motion 动画。
• 架构与性能：设计了 localStorage 键策略、数据验证包装器并优化了图表渲染管道。

---

项目架构

本应用程序遵循建立在 Next.js 15 上的现代、以客户端为中心的模块化架构。

• 分层结构：将原始追踪逻辑（自定义 hooks）与视觉呈现组件分离。
• 功能模块：按功能进行逻辑组织，例如引导流程、锻炼、营养追踪和进度图表。
• 状态管理：React 状态 hooks 使用自定义包装器与浏览器存储层进行响应式同步。
• 重构与改进：对重量级图表库实施了动态导入，以优化性能和核心 Web 指标（Core Web Vitals）。

---

演示预览

• 仪表板视图：每日卡路里摄入量、有效锻炼计划检查表和可视化每周进度图表的概览。
• 锻炼计划器：自定义例程创建器和程序选择器。
• 卡路里追踪器：带有自定义添加食物列表的常量营养素追踪器。

托管说明：
实时应用程序部署在 Vercel 上，可以在无需注册的情况下立即访问：pfwfm.vercel.app。