📖 LISTENLY

1. 简介

LISTENLY 是一款基于英语在线学习网站，专注 「听」，「单词听写」、「句子听写」 和 「影子跟读」 单个板块。旨在帮助用户提高英语听力和拼写能力。

2. 项目启动流程

1️⃣ 环境要求

• Node.js 18+
• PostgreSQL 14+
• pnpm (推荐) 或 npm

2️⃣ 安装依赖

pnpm install

3️⃣ 配置环境变量

在项目根目录创建 .env.local，添加以下内容：

DATABASE_URL="postgresql://username:password@localhost:5432/listenly"

4️⃣ 运行数据库迁移

npx prisma migrate dev --name init

5️⃣ 启动项目

pnpm run dev

项目默认运行在 http://localhost:3000 🚀

---

3. 线上部署

初始化部署

# 安装依赖
pnpm install

# 生成 Prisma Client
pnpm prisma generate

# 构建
pnpm build

# 启动 PM2
pm2 start npm --name "listenly" -- start

更新部署

# 拉取最新代码
git pull

# 安装依赖（如果 package.json 有更新）
pnpm install

# 构建项目
pnpm build

# 重启应用（优雅重启，不会导致服务中断）
pm2 reload listenly

数据库表更新后，阿里云ECS部署流程

# 1. 拉取最新代码
git pull

# 2. 安装依赖（确保 Prisma 等依赖是最新的）
pnpm install

# 3. 先执行数据库迁移（在构建之前！）
npx prisma migrate deploy

# 4. 生成 Prisma Client
npx prisma generate

# 5. 然后才构建项目
pnpm run build

# 6. 最后重启应用
pm2 reload listenly

---

4. 技术栈

技术	说明
Next.js 15 (App Router)	服务端渲染 (SSR) + 前端 UI 交互
Next.js API Routes	Next.js接口服务
React 19	前端框架
Tailwind CSS	UI 样式管理
Prisma ORM	数据库管理
PostgreSQL	数据库
shadcn/ui	现代化 UI 组件库
Microsoft edge_tts	文字转声音TTS服务
faker-js	随机生成姓名
Dicebear	随机头像生成
@uiw/react-heat-map	学习日历热力图

---

5. 项目功能介绍

🅰️ 单词拼写

• 支持 美式/英式 发音
• 选中词库，展示未拼写的单词
• 支持加入生词本
• 正确/错误音效 提示
• 查看 拼写正确/错误统计

🎧 句子精听

• 本地同步获取句子听力材料到数据库
• 支持 调整语速
• 多次播放
• 支持加入生词本
• 句子填空听抄模式

🗣️ 影子跟读

• 听完句子后，读出来
• AI 打分
• 高亮发音 不准确 的单词

---

6. 功能进度

✅ 已完成功能

• 单词拼写

  • 本地 40000+单词 json 同步数据库
  • 记录用户拼写历史，并记录到数据库
  • 确保未拼写成功的单词优先出现
  • 美式/英式发音切换
  • 慢速模式
  • 正确/错误音效
  • 查看音标
  • 拼写正确统计
  • Microsoft Edge TTS 单词发音

• 部署上线

  • 购买域名
  • HTTPS
  • 购买阿里云ECS云服务器
  • 购买阿里云数据库RDS
  • 部署阿里云

• 句子精听

  • OSS 读取听力句子数据
  • 句子听写抄写功能
  • 语速调整
  • 句子回放

• 影子跟读

  • 单词或句子阅读一遍后
  • 按空格键，开始跟读一遍
  • 给出读音打分

• 用户登录

  • 手机号验证码登录
  • 阿里云滑动条验证
  • 微信扫码登录
  • 个人学习记录存储
  • 用户信息修改
  • 个人学习热力图
  • 学习排行榜

• 移动端适配、Windows适配

  • 适配 Windows 交互和样式
  • 响应式优化-支持手机移动端尺寸交互

• 其他功能

  • 用户反馈

🚀 待完成功能

• 我的页面

  • 我的主页，整体布局优化

• 充值功能

  • 微信和支付宝扫码充值
  • 个人中心-充值记录

---

📢 贡献 & 反馈

欢迎提交 Issue 或 PR 来优化本项目 🎉
如果你有任何建议，请联系 609370075@qq.com 😊