🐾

宠物学习 APP

Pet Learning Quest

让孩子通过「养宠物」爱上学习 —— 完成任务喂养宠物、积累经验进化成长。一份状态,四端协同。

React 19Vite 8四端协同纯前端 · 可离线MIT 开源
演示视频

项目演示

作者亲自制作的项目介绍视频(约 2 分钟)。

界面预览

四端协同

同一套宠物养成系统,面向四类用户的四种界面,共享同一份状态、实时同步。

孩子端养成 + 学习
家长端布置 + 确认
教师端带班 + 统计
手表端随手打卡
项目简介

把「催作业」变成「想学习」

这是一款面向 6–12 岁儿童家庭学习场景的宠物养成激励 App。孩子完成每日学习与生活任务来喂养、进化自己的虚拟宠物; 家长负责布置与确认任务、查看成长报告;老师可以按班级布置作业并追踪完成情况;甚至还有一个儿童手表端,可以戴在手腕上随手打卡。 四个端共享同一套本地状态,改一处、全同步。

产品采用纯正向激励(只有奖励、没有惩罚),把宠物的饥饿、情绪、进化与孩子的学习行为绑定, 让孩子「为了照顾宠物而主动完成任务」。技术上是纯前端实现,用 localStorage 持久化,无需后端即可完整运行,可离线、可安装为 PWA。

核心特性

麻雀虽小,五脏俱全

从养成机制到家校协作,从无障碍到工程化,覆盖一个完整产品该有的方方面面。

🐣

8 阶段进化体系

每只宠物 lv1→lv8 八段成长,经验阈值驱动,高阶附带光环 / 光芒特效。

🎮

多重激励

连续打卡奖励、经验里程碑、成就系统、每日登录、周挑战。

🧩

三种使用模式

家庭(家长确认)/ 校园(完成即结算)/ 家校联合。

🐉

10+ 宠物

4 免费基础宠 + 2 会员稀有神兽(白虎/朱雀)+ 4 节日限定宠。

💰

会员付费墙

借鉴 Prodigy 模式:稀有宠解锁的 C 端变现设计。

📚

学习内容引擎

口算 / 闪卡 / 计时任务,可扩展的学习模块。

无障碍 & PWA

键盘焦点环、减动效、44px+ 触控目标、可安装离线。

🔒

家长 PIN

Web Crypto(SHA-256 + PBKDF2)保护家长端。

孩子端 · 养成主界面

完成任务 → 喂养 → 进化

  • 经验驱动 8 阶段进化,形态差异显著
  • 连续打卡、成就、每日故事多重激励
  • 饱食度 / 情绪让宠物「活」起来
  • 超大点按、即时反馈,专为儿童设计
教师端 · 班级管理台(Web)

带班、布置、追踪一站式

  • 班级名册、布置作业、完成率统计与排行
  • 班级宠物墙:全班宠物匿名展示,不攀比
  • 生成班级码连接家长,进度自动回流
  • 独立版 / 家校联合版双模式
玩法亮点 · 成长

8 阶段进化,看得见的成长

经验阈值「前期快、后期慢」,每次进化全屏庆祝并可分享,高阶神兽附带神圣光效。

Lv1 幼崽
Lv4 成长
Lv8 金翼柯基王 👑
内容 · 图鉴

10+ 只宠物

免费
金翼柯基王
免费
圣翼天使
免费
神话飞马
免费
神龙至尊
会员
金翅神兽 · 白虎
会员
神火天尊 · 朱雀
商业设计 · 变现

稀有宠会员付费墙

  • 借鉴 Prodigy:基础宠免费,稀有 / 限定宠需会员
  • 「孩子主动要家长开会员解锁神兽」= 最强 C 端飞轮
  • 含装扮商店、多孩子档案、月度成长报告
  • 纯 C 端订阅,不依赖学校采购,政策风险低
技术与工程

技术栈 & 工程亮点

React 19Vite 8localStoragePWAVitestESLintWeb Crypto
🧱

四端一状态

核心状态 hook(useAppStore)+ 班级码共享桥,四端实时同源同步。

性能优化

代码分割,应用主包 367KB → 93KB;vendor/stories 长缓存。

质量保障

vitest 27 个单测全过 · ESLint 0 问题 · schema 版本迁移。

🎨

视觉细节

宠物图抠透明底,在浅色卡片 / 深色手表屏均自然融合。

竞品对比

差异化定位

填补「家庭端 × 强宠物养成 × 6–12 岁」的全球空白。

产品主场景宠物进化家庭端
酷课堂宠物园课堂8 级
ClassDojo课堂 + 家庭❌ 无进化✅ 弱
Prodigy Math学生(仅数学)进化链
Duolingo个人❌ 无进化
🎯 本产品家庭(全科)8 阶 · 10+ 种✅ 核心
🚀

一个完整的产品作品

从市场调研、产品设计、四端实现,到 8 阶养成、会员变现、工程化与无障碍 —— 一套设计系统贯穿始终。