跳到正文
余翰林 · 产品作品集
返回

案例研究

情侣心愿 App:我的第一次 vibe coding,3 天从骨架到上线

早期探索作品,功能不完善:一方许愿、一方接单、做完记分的情侣小程序,3 天从空白做到上线。

读法
只留每节结论

一、背景与问题

情侣之间说好的事,散在聊天记录里就等于没说过。我想做个 App:一方许愿,另一方接单,做完记分。

说好的事情会被遗忘,做了的事情没有记录,付出没有被看见——这是三个不同的问题,得用一套闭环一起解。

我想做一个双人闭环产品:一方发心愿,另一方接单完成;完成拿积分,积分在两人之间流转;重要日子上互动日历,日常写共同日记。约束很硬:我只有零碎时间,必须小步快跑;双人数据要真实同步,不能是本地演示。

二、我的角色

一个人做完全程:定需求、拆阶段、写前后端、部署上线;也是我第一次完整走完「先做出来、再接真后端」。

独立开发者,负责需求定义、五阶段任务拆解、全部前后端实现与部署。这是我第一次在单项目里完整走“纯前端 MVP → 真后端化”的两段式路径。

三、过程与关键取舍

先把功能在本地跑通,再接真后端;中间踩了两个坑:本地能跑、线上构建却报错,环境变量也只在部署平台上有。

取舍 1:先闭环,后真实。 MVP 阶段(第二天)我没有先接后端,而是用“身份切换器”模拟双人——心愿发 → 卡片墙 → 接单 → 完成 → 通知的完整闭环先在本地跑通。第三天再把 Supabase 接进来替换存储与 Auth。这样产品逻辑和数据接入两类问题永远不混在一起调试。

取舍 2:注册中心架构 + 单向依赖。 沿用我在其他项目验证过的模块注册中心模式,模块注册先于路由求值;store 之间强制单向依赖(核心心愿 store → 辅助通知 store),确需反向引用时用动态 import 打破循环。跨模块状态同步用 CustomEvent 而不是 store 互引。

取舍 3:本地能跑 ≠ 生产能跑。 部署时踩了一个经典分叉:生产构建报 Vue Router 无限重定向,本地 dev 却正常——根因是 ESM 导入顺序在 Vite dev 与 Rollup 生产构建下求值不同,模块注册晚于路由求值。以及 CI 本地构建时 VITE_* 环境变量为空(它们只配在 Vercel 平台)。解法:注册导入前置 + 改用 vercel deploy 让 Vercel 服务器构建。这两个坑让我把“环境差异”写进了自己的排错清单。

四、结果与量化

3 天上线、5 个功能模块;但功能不完善,也没有真实用户用过——它的价值是留下「从想到做出来」这一步。

  • 3 天完成 5 个阶段(2026-07-26 骨架 → 07-28 部署上线),5 个功能模块:心愿系统、互动日历、积分系统、共同日记、站内通知。
  • Supabase 后端:双人数据云端同步 + Auth 登录;Vercel 部署 + GitHub Actions 流水线。
  • 沉淀 9 篇阶段经验笔记;其中“Vercel 部署 + Supabase Auth 排错”一篇系统整理了环境差异类问题,明确标注跨项目可复用。

五、复盘与反思

现在回看:积分的数值是拍脑袋定的,没画过激励闭环;双人产品最常见的情况(一方长期不活跃)完全没处理。

成立的:两段式交付(先闭环后真实)让 3 天节奏成为可能;阶段笔记当天写,坑当天固化。

要改进的:积分数值一开始凭感觉定,没做任何设计推演——如果重来,我会先画“行为 → 积分 → 兑换”的激励闭环图再定数值;双人产品的边界情况(一方长期不活跃)在 v1 里完全没有处理。

下次会验证的:把积分激励闭环当产品设计练习重新做一版,作为产品方法论的证据补充。


  • 产品设计
  • Vue
  • Supabase