https://github.com/pengxiaohua/listenly
英语在线单词和句子听写
https://github.com/pengxiaohua/listenly
authjs nextjs postgresql prisma react shadcn-ui tailwindcss typescript zod zustand
Last synced: 8 months ago
JSON representation
英语在线单词和句子听写
- Host: GitHub
- URL: https://github.com/pengxiaohua/listenly
- Owner: pengxiaohua
- Created: 2025-03-06T09:14:47.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-13T16:25:22.000Z (12 months ago)
- Last Synced: 2025-07-13T18:29:04.435Z (12 months ago)
- Topics: authjs, nextjs, postgresql, prisma, react, shadcn-ui, tailwindcss, typescript, zod, zustand
- Language: TypeScript
- Homepage: https://listenly.cn
- Size: 25.9 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📖 LISTENLY
## 1. 简介
**[LISTENLY](https://listenly.cn)** 是一款基于英语在线学习网站，专注 **「听」**，**「单词听写」**、**「句子听写」** 和 **「影子跟读」** 单个板块。旨在帮助用户提高英语听力和拼写能力。
## 2. 项目启动流程
### **1️⃣ 环境要求**
- **Node.js 18+**
- **PostgreSQL 14+**
- **pnpm (推荐) 或 npm**
### **2️⃣ 安装依赖**
```bash
pnpm install
```
### **3️⃣ 配置环境变量**
在项目根目录创建 `.env.local`，添加以下内容：
```env
DATABASE_URL="postgresql://username:password@localhost:5432/listenly"
```
### **4️⃣ 运行数据库迁移**
```bash
npx prisma migrate dev --name init
```
### **5️⃣ 启动项目**
```bash
pnpm run dev
```
项目默认运行在 `http://localhost:3000` 🚀
---
## 3. 线上部署
### 初始化部署
```bash
# 安装依赖
pnpm install
# 生成 Prisma Client
pnpm prisma generate
# 构建
pnpm build
# 启动 PM2
pm2 start npm --name "listenly" -- start
```
### 更新部署
```bash
# 拉取最新代码
git pull
# 安装依赖（如果 package.json 有更新）
pnpm install
# 构建项目
pnpm build
# 重启应用（优雅重启，不会导致服务中断）
pm2 reload listenly
```
### 数据库表更新后，阿里云ECS部署流程
```bash
# 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. 功能进度
### ✅ **已完成功能**
- **单词拼写**
- [x] **本地 40000+单词 json 同步数据库**
- [x] **记录用户拼写历史，并记录到数据库**
- [x] **确保未拼写成功的单词优先出现**
- [x] **美式/英式发音切换**
- [x] **慢速模式**
- [x] **正确/错误音效**
- [x] **查看音标**
- [x] **拼写正确统计**
- [x] **Microsoft Edge TTS 单词发音**
- **部署上线**
- [x] 购买域名
- [x] HTTPS
- [x] 购买阿里云ECS云服务器
- [x] 购买阿里云数据库RDS
- [x] 部署阿里云
- **句子精听**
- [x] OSS 读取听力句子数据
- [x] 句子听写抄写功能
- [x] 语速调整
- [x] 句子回放
- **影子跟读**
- [x] 单词或句子阅读一遍后
- [x] 按空格键，开始跟读一遍
- [x] 给出读音打分
- **用户登录**
- [ ] 手机号验证码登录
- [ ] 阿里云滑动条验证
- [x] 微信扫码登录
- [x] 个人学习记录存储
- [x] 用户信息修改
- [x] 个人学习热力图
- [x] 学习排行榜
- **移动端适配、Windows适配**
- [x] 适配 Windows 交互和样式
- [x] 响应式优化-支持手机移动端尺寸交互
- **其他功能**
- [x] 用户反馈
### 🚀 **待完成功能**
- **我的页面**
- [x] 我的主页，整体布局优化
- **充值功能**
- [ ] 微信和支付宝扫码充值
- [ ] 个人中心-充值记录
---
## 📢 贡献 & 反馈
欢迎提交 Issue 或 PR 来优化本项目 🎉
如果你有任何建议，请联系 [609370075@qq.com](mailto:609370075@qq.com) 😊