CASE STUDY · 经典作品

把一群朋友的酒局
做成可以翻看的故事

干杯日记 · 一个朋友之间的酒局打卡 PWA · 从一个想法到上线 · 全栈交付 · 真实运营中

✦ React 19 + TypeScript ✦ Cloudflare Workers ✦ PWA · 可装到手机 ✦ 全球访问 <100ms ✦ 已上线运行
9:41● ● ●
晚上好,老张
今晚干杯?
23
本月酒局
11
饭搭子
5
连续打卡
小李
2h 前
在「老味道」干了 3 杯山崎 · 配了刺身拼盘 🍣
🍻 5 · 🔥 3 · 💬 2
阿志
昨天
公司团建 · 第 47 场 · 还是没躲过茅台 😅
🍻 8 · 😂 4

↑ 干杯日记真实界面·脱敏样例

起点 · 客户痛点

为什么需要这样一个工具?

客户找到我们的时候,问题不是"我想做一个 App"·而是这些日常的、说不出口的遗憾——

🤔

上次和谁喝的,喝的什么
—— 全忘了

聚会当时很热闹·过了两周想分享给新朋友·只记得"上次那家不错"·细节全无

🧩

朋友圈分散
—— 没法串起来

同事圈、发小圈、新认识的圈·每个圈子都有酒局·但彼此的故事被切成碎片

📱

截图发群报告
—— 沉淀不下来

聚会照片在不同手机·想做个年终回顾·要翻 8 个微信群·还总有漏的

设计取舍 · 我们为什么这样做

每一个选择都有舍弃

做产品最难的不是"做什么"·是"不做什么"。我们和客户一起·在每个分叉口做了 4 个关键决定——

01
我们选了
做 PWA · 不做原生 App
用户在手机浏览器打开·一键"添加到主屏幕"·像 App 一样用
我们舍弃了
应用商店流量 + 推送通知能力·换来「即装即用·零审核·零更新等待」
02
我们选了
邮箱验证 · 不要手机号
注册只填邮箱·收一封验证邮件·进入产品
我们舍弃了
手机号实名 + 短信验证的转化率优势·换来「隐私优先·不收实名信息·境外可用」
03
我们选了
离线优先架构
本地 IndexedDB 先存·联网再同步·KTV/酒馆地下层信号差也能记
我们舍弃了
"一定要联网"的简单做法·多写了 30% 的同步逻辑·换来「在场实时记录·不丢一条」
04
我们选了
琥珀金 + 深棕主题
威士忌酒色 + 老木色·配色取自夜场酒馆灯光
我们舍弃了
流行的「极简白」「莫兰迪」风格·换来「氛围感·一打开就有酒局心情」
功能地图 · 16 个核心模块

完整的酒局社交闭环

不是简单的"打卡"·是「记录 → 连接 → 互动 → 沉淀」一整套·覆盖一场酒局从约局到回忆的所有动作。

🍻
CHECK-IN

酒局打卡

地点·酒品·同行人·照片·一气呵成

👥
CREW

饭搭子圈

把常一起喝的朋友圈起来·形成专属社群

🚪
ROOM

实时同桌房间

扫码进同一场酒局·所有人同步打卡

🎲
DICE

色子游戏

线下"骰盅"数字化·助兴酒桌

📔
HISTORY

历史时间线

所有酒局按日期回看·年度回忆神器

🏆
ACHIEVEMENT

成就徽章

"周末战士"·"威士忌猎人"·游戏化打卡

📊
STATS

数据统计

本月几场·哪种酒最多·哪个搭子最铁

🤖
AI · 小皮

AI 助手「小皮」

聊天伴侣·帮你写酒局文案 + 发朋友圈

💬
CHAT

聊天 / 私信

饭搭子之间私聊·约下一场

🍸
BARS

酒吧地点库

常去的酒馆收藏·导航 + 评分

🎉
REACTION

表情反应

给搭子的酒局点赞·🍻🔥💪😂

📲
SHARE

一键分享

生成酒局海报·支持发朋友圈 / 微信

🩺
CARE

宿醉提醒

记下喝太多·第二天弹"喝水多休息"

📨
INVITE

邀请机制

朋友带朋友·二维码 + 邀请链接

🔐
PIN GATE

PIN 码保护

手机被借走·隐私酒局不被看见

🌐
OFFLINE

离线可用

酒馆没信号·照样记录·联网自动同步

技术架构 · 现代化全栈

这套技术架构·我们用了什么

我们不用"老技术 + 大公司"路线·选了「Cloudflare 全栈」+「React 19」+「现代 TypeScript」·结果就是:零运维成本·全球访问快·一行代码部署到 320 个城市。

React 19
用户界面·主流最新·5 年内不过时
TypeScript
全栈强类型·写出来基本不会有低级错误
Vite + Tailwind 4
构建工具 + 样式系统·开发快 · 加载也快
PWA
网页装到手机变 App·零审核 · 即时更新
Cloudflare Workers
后端·全球 320 个城市边缘运行·延迟 <100ms
Cloudflare D1
数据库·全球分布的 SQLite·零运维
Hono + Drizzle
API 框架 + ORM·写法简洁·类型安全
Resend
邮件验证·99.9% 投递率·不进垃圾箱
Dexie (IndexedDB)
离线数据库·浏览器本地存储·断网照样用
Zustand
状态管理·轻量 · 比 Redux 省 90% 代码
Sentry
线上错误监控·有 bug 我们比客户先知道
Playwright + Vitest
自动化测试·每次更新前自动跑一遍
0
服务器运维成本
没有服务器·没有人月运维
<100ms
全球任何地方打开
用户在港/京/沪/纽约同样快
5y+
技术栈生命周期
主流 + 持续维护 · 不会被淘汰
30 天交付 · 真实时间线

从一句"我想做"到 上线运行

不是"半年磨一剑"的传统外包·我们用「小步快跑」的方法·每周都有可以摸到的产品·客户每周都能给反馈。

Day 1-3
DISCOVER
需求沟通 + 设计原型
客户摸到第一张图
Day 4-10
CORE
核心功能开发
登录·打卡·历史·分享·可用
Day 11-20
EXTEND
扩展功能
饭搭子·色子·成就·AI 助手
Day 21-27
POLISH
测试 + 打磨
自动化测试·性能优化
Day 28-30
LAUNCH
上线 + 监控
部署到 Cloudflare·全球可访问
轮到你了 · 客户尝试区

把这个案例·变成你的资产

不用想象·三件事你现在就能做:摸一摸真实产品 / 拿走相似模板 / 跟我们聊定制——

📦 已标准化

看看我们其他的作品

干杯日记是「能力展示作品」·我们日常承接的是已经跑顺的标准化方向:数据看板 D005 / 调研报告 D006 / 自媒体拆解 D007 / 个人作品集网站 D008-S。这些有明确的样章 + 报价。

86 个 SKU·11 大类·¥9.9 起
每款都有真实样章·先看再付
看全部作品 →
✦ 先聊一聊

想做类似的产品?先聊聊

类似干杯日记这种「数据库 + 用户系统 + 多端同步」的全栈产品·复杂度因业务差别巨大。我们不直接挂标价·而是先和你聊 30 分钟·把范围、能做 / 不能做、报价 一起聊清楚再决定。

方案 + 报价 免费
不合适我们直接说不接·不浪费你时间
联系小匠询价 →
为什么相信我们

这四条·写进合同·写进交付文档

💎

源码归你

交付那天·完整代码 + 部署密钥 + 数据库 一起给你·之后你可以换任何团队接手·我们不卡你

📐

分期验收

每个阶段验收通过·才付下一笔款·上线前最多付 70%·上线 + 稳定运行 7 天再付尾款

🛡️

3 个月质保

上线 3 个月内·任何 bug 我们免费修·不限次数·不收"工时费"

📋

透明报价

每个功能多少钱·提前列清楚·不存在"做着做着加钱"·改需求会重新报价·你确认才动手

常见问题 · FAQ

客户问得最多的 6 件事

Q1·我没那么强的技术背景·能拥有一个这样的产品吗?

能。你需要做的只是说清楚"想解决什么问题"·剩下的设计、开发、上线、运维 · 我们打包做。整个过程你只需要做三件事:① 第一周说清需求 · ② 每周看一次进度提反馈 · ③ 上线前最终验收。

Q2·和市面上"模板建站"有什么区别?

模板建站是"框架已经定死·你只能填内容"·适合企业官网。我们做的是"按你的业务流程设计"·适合:① 内部工具 / ② 用户能登录交互的产品 / ③ 需要数据库 + 后端的 Web App。
类比:模板建站像精装修的样板房·我们做的像专门为你需求设计的房子。

Q3·上线后客户多了·会不会卡顿崩溃?

不会。我们用 Cloudflare 的"边缘计算"架构·用户从 1 个到 100 万个·性能基本不变·因为代码运行在全球 320 个城市的边缘节点·会自动按需扩展。
这不是营销话术·而是 Cloudflare 的技术架构本身决定的。

Q4·我中途想改需求怎么办?

每周一固定有一次「改需求确认窗口」·你提出改动·我们 24h 内给「能做 / 不能做 / 加多少时间 / 加多少钱」一个明确的答复·你拍板了我们再动。
不会出现"做着做着突然加钱"的情况·因为我们用合同 + 进度记录约束自己。

Q5·跑路风险?你们小团队会不会做完就消失?

三层保护:① 源码 + 部署密钥归你·我们消失你也能找任何团队接手 · ② 上线前最多收 70%·上线稳定 7 天再付尾款 · ③ 走「引荐人小匠」的下单流程·她是你的客户经理·有问题随时找她不会扯皮。

Q6·想做一个类似干杯日记规模的产品·大概多少钱?

这类「数据库 + 用户系统 + 多端同步」的全栈产品·每个客户的范围差异非常大·我们不直接挂标价。
建议方式:先和我们聊 30 分钟·把"非做不可的功能 / 可选的功能 / 不要的功能"列清楚·我们再给「能做 / 不能做 / 多久 / 多少钱」一个明确答复。
方案 + 报价免费·如果范围超出我们能稳定交付的程度·我们会直接告诉你不接·不会硬接坑你。

下一个经典案例·主角可以是你

你不需要懂技术·你只需要有一个「想解决的问题」
剩下的事·让我们一起·把它变成可以摸到的产品

先去摸一下干杯日记 → 看产品价目