每个系统从零依赖开始,逐步演进到十万级用户规模。每一步新增依赖都有「不得不引入的理由」。
V1: 1 人用 — 纯前端 / localStorage / 单 HTML 文件,零后端依赖
V2: 10 人用 — 需要共享/持久化,才加最小后端(文件/SQLite)
V3: 100 人用 — 并发/一致性问题出现,引入数据库 + 事务
V4: 1000 人用 — 性能瓶颈,加缓存、异步处理、索引优化
V5: 1 万人用 — 单机极限,水平扩展、读写分离、集群
V6: 10 万+ 用 — 全国/全球规模,分片、CDN、微服务拆分
AI 时代原则: 引入的依赖越少越好。很多功能 AI 可以直接做,不需要传统的重型基础设施。
| # | 系统 | 难度 | V1 零依赖 | V2 最小后端 | V3 生产化 | V4 千人 | V5 万人 | V6 十万+ |
|---|
| 6 | News Feed | ⭐⭐⭐⭐ | localStorage动态 | SQLite timeline | PostgreSQL推拉模式 | 个性化过滤 | Redis混合推拉 | AI推荐引擎 |
| 7 | Chat System | ⭐⭐⭐⭐ | BroadcastChannel | WebSocket+文件 | DB+ACK机制 | 群聊扩展 | 多WS节点 | 文件/消息搜索 |
| 8 | YouTube | ⭐⭐⭐⭐⭐ | HTML5本地播放 | 上传+本地存储 | 转码+CDN | 自适应码率 | 转码队列 | 多CDN+冷存储 |
| 9 | Instagram | ⭐⭐⭐⭐ | 本地图片+滤镜 | 上传+SQLite | 对象存储+CDN | 关注推荐 | 图片处理集群 | 全球分发 |
| 10 | Twitter/X | ⭐⭐⭐⭐ | localStorage推文 | SQLite+关注表 | PostgreSQL+Fan-out | 热点话题 | 读写分离 | 全球分片 |
| 11 | Spotify | ⭐⭐⭐⭐ | HTML5音频播放 | 音频上传+SQLite | 流媒体+CDN | 播放列表同步 | 音频转码集群 | 全球低延迟 |
| 12 | TikTok | ⭐⭐⭐⭐⭐ | 本地视频滚动 | 上传+简单推荐 | 短视频转码+AI推荐 | 实时互动 | 推荐模型更新 | 全球内容分发 |
| # | 系统 | 难度 | V1 零依赖 | V2 最小后端 | V3 生产化 | V4 千人 | V5 万人 | V6 十万+ |
|---|
| 17 | Hotel Reservation | ⭐⭐⭐⭐ | localStorage预订 | SQLite库存 | PostgreSQL悲观锁 | 搜索缓存 | 多实例+队列 | 分片+动态定价 |
| 18 | E-commerce | ⭐⭐⭐⭐⭐ | 商品展示+购物车 | SQLite商品库 | PostgreSQL+事务 | 搜索+推荐 | 订单异步处理 | 全球多仓库 |
| 19 | Payment System | ⭐⭐⭐⭐ | 模拟支付UI | 第三方支付集成 | 事务+幂等+对账 | 风控规则 | 多支付渠道 | 全球货币支持 |
| 20 | Flash Sale | ⭐⭐⭐⭐ | 倒计时+抢购UI | SQLite库存扣减 | Redis原子操作 | 预热+限流 | 消息队列削峰 | 多机房容灾 |
| # | 系统 | 难度 | V1 零依赖 | V2 最小后端 | V3 生产化 | V4 千人 | V5 万人 | V6 十万+ |
|---|
| 21 | Proximity Service | ⭐⭐⭐ | 硬编码JSON+定位 | SQLite+距离计算 | PostGIS空间索引 | 实时状态 | 评分排序 | 全国分片 |
| 22 | Google Maps | ⭐⭐⭐⭐ | Leaflet标记 | 路线规划API | 实时路况 | 实时追踪 | 路线缓存 | 瓦片+流处理 |
| 23 | Uber/滴滴 | ⭐⭐⭐⭐⭐ | 地图选点模拟 | 派单+SQLite | 实时匹配+WebSocket | 动态定价 | 多城市调度 | 全球多区域 |
| 24 | Food Delivery | ⭐⭐⭐⭐⭐ | 菜单+购物车 | 订单+SQLite | 实时配送追踪 | 骑手调度 | 多商家平台 | 城市级分片 |
| # | 系统 | 难度 | V1 零依赖 | V2 最小后端 | V3 生产化 | V4 千人 | V5 万人 | V6 十万+ |
|---|
| 25 | Google Drive | ⭐⭐⭐⭐ | 拖拽+localStorage | 本地文件系统 | 版本控制+锁 | 分块上传 | 去重+分层存储 | 实时协作(CRDT) |
| 26 | Google Docs | ⭐⭐⭐⭐⭐ | contenteditable+localStorage | WebSocket同步 | OT/CRDT实时协作 | 评论+历史 | 多人同时编辑 | 离线合并 |
| 27 | Dropbox | ⭐⭐⭐⭐ | 文件夹监听+JSON | 文件同步+SQLite | 增量同步+冲突解决 | 带宽优化 | 客户端缓存 | 全球CDN同步 |
| # | 系统 | 难度 | V1 零依赖 | V2 最小后端 | V3 生产化 | V4 千人 | V5 万人 | V6 十万+ |
|---|
| 28 | Gaming Leaderboard | ⭐⭐⭐ | localStorage排名 | JSON文件存分数 | Redis SortedSet | 多维排行 | 批量+SSE优化 | 好友/地区排名 |
| 29 | Multiplayer Game | ⭐⭐⭐⭐⭐ | 本地双人对战 | WebSocket房间 | 状态同步+预测 | 反作弊 | 游戏服务器集群 | 全球大区路由 |
| 30 | Live Streaming | ⭐⭐⭐⭐ | HTML5本地视频 | RTMP推流+HLS | 转码+CDN分发 | 弹幕互动 | 多码率+低延迟 | 全球直播网络 |
| # | 系统 | 难度 | V1 零依赖 | V2 最小后端 | V3 生产化 | V4 千人 | V5 万人 | V6 十万+ |
|---|
| 31 | Email System | ⭐⭐⭐⭐ | mailto链接 | SMTP+SQLite | 邮件队列+IMAP | 附件+搜索 | 反垃圾系统 | 全球邮件路由 |
| 32 | Calendar System | ⭐⭐⭐ | HTML日历+localStorage | SQLite事件 | 冲突检测+提醒 | 共享日历 | 多时区同步 | 企业级权限 |
| 33 | CRM | ⭐⭐⭐ | Excel导入+展示 | SQLite客户库 | PostgreSQL+全文搜索 | 销售漏斗 | 多租户SaaS | 数据分析集成 |
| 34 | Monitoring & Alerting | ⭐⭐⭐⭐ | 前端健康检查 | HTTP健康端点 | Prometheus+Grafana | 多维告警 | 分布式追踪 | 全链路可观测 |
| # | 系统 | 难度 | V1 零依赖 | V2 最小后端 | V3 生产化 | V4 千人 | V5 万人 | V6 十万+ |
|---|
| 35 | Stock Trading | ⭐⭐⭐⭐⭐ | 模拟行情+本地交易 | SQLite持仓+订单 | 撮合引擎+事务 | 实时行情推送 | 高频订单处理 | 全球交易所接入 |
| 36 | Digital Wallet | ⭐⭐⭐⭐ | 本地余额记录 | SQLite账本 | 双向记账+幂等 | 风控+限额 | 清算系统 | 跨境支付 |
- 选一个感兴趣的系统
- 从 V1 开始做——用 AI 10 分钟就能搞定
- 体验 V1 的局限,理解为什么需要 V2
- 逐步演进,每个版本在前一个基础上迭代
- 不需要做完所有版本 —— V1-V3 覆盖基础,V4-V6 是进阶挑战
- 遇到不懂的知识点,查 深度参考模块
入门(V1-V3 就够):URL Shortener → Gaming Leaderboard → Proximity Service
进阶(挑战 V4-V5):Hotel Reservation → News Feed → Chat System
深度(完整 V1-V6):YouTube → Search Engine → Google Drive
金融/企业挑战:Payment System → Stock Trading → Digital Wallet