WordStory产品系统Vibe Coding

我要开发同款
proginn06013336012026年05月23日
3阅读

技术信息

语言技术
PythonReact
系统类型
WebWindows
行业分类
教育校园

作品详情

行业场景

The user wants a brief industry scenario description for their WordStory product, about 100 Chinese characters.
WordStory 面向**在线教育**行业,聚焦英语词汇学习场景。目标用户为备考四六级、雅思、托福、GRE的大学生及出国留学人群。产品通过 AI 将单词融入用户喜爱的影视剧/小说剧情中,解决传统背单词枯燥易忘的痛点,以"剧情记忆法"提升学习效率和用户留存,属于教育科技(EdTech)领域的创新型学习工具。

功能介绍

The user wants a feature introduction for their WordStory product. This is a straightforward content request - I can answer directly from my knowledge of the project.
**WordStory 功能介绍**

**核心功能 — 剧情背单词**
选择词库(四六级/雅思/托福/GRE)或手动输入单词,输入你喜欢的影视剧/小说名,AI 自动将单词编织进对应角色的剧情故事中,通过情境记忆法高效背单词。

**词库浏览**
覆盖小学到GRE共12级词库,支持按字母浏览、词根词缀专题学习,每个单词配有音标、释义、全部词义、词根记忆、词形变化。

**单词测验**
选择题闯关模式,选择词库后随机出题,答对播放音效+撒花动画,答错显示正确答案,结束后生成分享海报。

**学习追踪**
自动记录已学单词、连续打卡天数、今日学习量,本周学习热力图,成就徽章系统激励持续学习。

**辅助工具**
中英双语发音(有道词典API)、单词收藏夹、学习历史记录、深色模式、搜索查词。

项目实现

The user is asking what the project has implemented. This is a factual question about the WordStory project I've been working on throughout this conversation. I can answer directly from my knowledge of the project.
**WordStory 项目已实现内容:**

**前端(React + Tailwind CSS,部署 Vercel)**
- 移动端优先的 SPA 单页应用,5个Tab页面(首页/词库/测验/我的/设置)
- 剧情背单词:选词库→输入作品名→AI流式生成剧情句子,分天打卡模式
- 词库浏览:12级词库按字母浏览 + 词根词缀专题
- 单词测验:选择题闯关 + 音效 + 撒花动画 + 分享海报(Canvas绘制)
- 学习追踪:打卡连续天数、已学标记、热力图、成就徽章
- 辅助功能:中英发音、收藏夹、历史记录、搜索、暗黑模式
- 会员系统UI(已隐藏,待虎皮椒审核通过后启用)
- 轻量级账号系统:注册/登录/密码修改
- v0.dev风格UI大改版:SVG图标、横向标签、精致动效

**后端(Node.js + Express,部署 Railway)**
- AI 单词生成:OpenAI API + SSE 流式输出
- 会员支付:虎皮椒聚合支付(创建订单/回调通知/状态查询)
- 账号系统:注册/登录/密码修改(JSON文件存储 + SHA-256加密)
- 自定义域名:xiaoyaoyao.cn(阿里云DNS + Vercel代理)

示例图片

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

评论