个人习惯打卡器产品系统Vibe Coding

我要开发同款
Halashao02012026年11月11日
6阅读

技术信息

语言技术
React、TypeScript
系统类型
Web
行业分类
生活旅游

作品详情

行业场景

个人效率 / 习惯养成工具(Self-improvement / Habit Tracking)。
典型用户可通过「每日打卡 + 连续天数 +完成率」形成正反馈、培养长期习惯的个人用户。产品形态类似于 Habitica、Streaks 这类轻量打卡产品,但更简单纯粹。

功能介绍

- 添加习惯:支持颜色标签,不选则自动轮转分配
- 近 7 天打卡视图:点击切换某天的完成/未完成状态
- 统计:当前连续天数 / 历史最长连续天数 / 近 30 天完成率(带进度条)
- 本地持久化:数据存 localStorage
- 导出 JSON 备份(文件名带日期)
- 删除习惯:二次确认的破坏性操作保护

项目实现

架构分层(依赖严格单向向下):
src/app/ Server Component 外壳(layout、page、metadata)
src/components/ Client Components("use client")
src/lib/use-habit-store.ts React 桥(唯一接 store 的地方)
src/lib/store.ts 内存快照 + 订阅 + mutate() 唯一写入口

示例图片

声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论