# listenly

**Repository Path**: xiaohua91/listenly

## Basic Information

- **Project Name**: listenly
- **Description**: LISTENLY 是一款基于英语在线学习网站，专注 「听」，「单词听写」、「句子听写」 和 「影子跟读」 三个板块。旨在帮助用户提高英语听力和拼写能力。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 2
- **Created**: 2025-12-06
- **Last Updated**: 2026-02-28

## Categories & Tags

**Categories**: education

**Tags**: None

## 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
npx 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) 😊