Personal Finance / Product重点项目

Money

A private, local-first personal ledger

把多年真实记账习惯迁移为一个私有、可恢复、本地优先的 PWA:高频移动端录入,跨设备同步,并支持从总览下钻到全部历史明细。

  • PWA
  • Local-first
  • Cloudflare D1
  • Service Design
重点项目Responsive PWA / Private serviceCase study public · Product access privateMobile WebDesktop WebPWA创建于 2026-07-13更新于 2026-07-14
Money cover

概览

这项工作的关键构成

结果

结果与影响

  • 在约 24 小时自然时间内完成从 demo 到生产服务的闭环。
  • 形成可验证、可导出、可恢复且持续使用的私人记账系统。

决策

关键决策与取舍

  • 采用 Worker + D1 作为事实源,IndexedDB 作为本地读取层。
  • 停止扩展功能,优先修复真实使用中的加载与历史浏览。

证据

证据与验证

  • 15 个阶段提交与完整架构、验证、备份文档。
  • 生产站点、移动端截图及自动化发布门禁。

案例

叙事、决策与证据

01

结果

结果与影响

  • 在约 24 小时自然时间内完成从 demo 到生产服务的闭环。
  • 形成可验证、可导出、可恢复且持续使用的私人记账系统。

02

决策

关键决策与取舍

  • 采用 Worker + D1 作为事实源,IndexedDB 作为本地读取层。
  • 停止扩展功能,优先修复真实使用中的加载与历史浏览。

03

证据

证据与验证

  • 15 个阶段提交与完整架构、验证、备份文档。
  • 生产站点、移动端截图及自动化发布门禁。

04

角色

角色与贡献

  • Owner / Product Engineer:从真实个人工作流出发,覆盖产品、设计、前后端、数据迁移与发布。

05

问题

要解决的问题

  • 如何把封闭工具里的多年私人数据,迁移为一个可信、低摩擦且可长期维护的个人产品。

06

约束

约束与边界

  • 真实财务数据必须保持私密。
  • 移动端体验优先,但只维护一套 Web/PWA 代码。

07

背景

为什么做

多年记账数据不该被锁在一个难以演进的封闭工具里。这个项目把真实个人财务记录迁移为自己拥有的长期系统:数据私密、可导出、可恢复,也能持续改进交互。

08

场景

核心场景

  • 手机上快速记一笔,并立即在当天流水中确认结果。
  • 按年、月、周查看趋势,再下钻到类别、日期与具体交易。
  • 通过关键词查找全部历史备注、具体事项和消费类别。
  • 在桌面端整理类别、导出数据与管理私人账户。

09

交付

阶段成果

  • 约 24 小时自然时间、15 个阶段提交,从视觉 demo 收敛为生产可用的私人 PWA。
  • 完成登录、真实数据库、流水 CRUD、类别管理、导出、搜索、PWA 与生产域名。
  • 14 项自动化测试,并将类型检查、构建和敏感信息扫描统一到发布门禁。
  • AI 协作日志累计约 1.398 亿 tokens,其中约 96.5% 为长线程缓存上下文;统一口径估算约 $125.83,并非实际账单。

10

设计

设计过程与取舍

  • 视觉延续黑白工作台,以黄色只标记记账、选中与同步等关键状态。
  • 分类从混合场景与物品的体系,重构为 12 个消费领域和唯一归属的具体事项。
  • 移动端把记账作为全局动作;桌面端承担分析、搜索和批量管理。
  • 把大型 loading 收敛为原位进度线与低对比骨架,内容优先于系统状态。

11

技术

技术实现

  • React、TypeScript 与 Vite 构建响应式 PWA;Cloudflare Worker + D1 提供认证与关系数据。
  • IndexedDB 使用 stale-while-revalidate,让明细、图表、搜索和类别详情本机立即可见。
  • 稳定游标分页支持全部历史与搜索渐进加载,金额使用整数分,写入使用幂等键。
  • Vercel 同源代理连接 Worker API,并保留 migration、备份、恢复与生产 smoke 流程。

12

访问

访问边界

  • 线上产品保持私人登录,不开放注册,也不公开真实账目。
  • 作品集封面来自合成数据环境,只用于展示交互与视觉系统。
  • 公开案例聚焦产品判断、架构与过程,不暴露账户或运维细节。

流程

从进入到完成的路径

这类项目更适合通过产品形态本身来阅读:截图、访问边界与关键任务顺序,比单段描述更能说明体验。

Record / Sync / Review / Search / Own

Money flowRecordSyncReviewSearchOwn

继续探索

继续进入相关材料

Money preview

访问方式

这个条目仍属于持续演进中的实践。公开表面可能是线上网址、导览式预览,或者一组经过整理的界面状态,取决于当前发布形态。