Lingo - 语言学习的互动平台。

:notebook_with_decorative_cover: 目录

• 文件夹结构
• 快速开始
• 截图
• 技术栈
• 统计数据
• 贡献
• 致谢
• 请我喝杯咖啡
• 关注我
• 了解更多
• 在 Vercel 部署
• 给个 Star
• Star 历史
• 给个 Star

:bangbang: 文件夹结构

以下是本应用的文件夹结构。

duolingo-clone/
  |- actions/
    |-- challenge-progress.ts
    |-- user-progress.ts
    |-- user-subscription.ts
  |- app/
    |-- (auth)/
    |-- (main)/
    |-- (marketing)/
    |-- admin/
    |-- api/
    |-- lesson/
    |-- apple-icon.png
    |-- favicon.ico
    |-- globals.css
    |-- icon1.png
    |-- icon2.png
    |-- layout.tsx
  |- components/
    |-- modals/
    |-- ui/
    |-- banner.tsx
    |-- feed-wrapper.tsx
    |-- mobile-header.tsx
    |-- mobile-sidebar.tsx
    |-- promo.tsx
    |-- quests.tsx
    |-- sidebar-item.tsx
    |-- sidebar.tsx
    |-- sticky-wrapper.tsx
    |-- user-progress.tsx
  |- config/
    |-- index.ts
  |- db/
    |-- drizzle.ts
    |-- queries.ts
    |-- schema.ts
  |- lib/
    |-- admin.ts
    |-- stripe.ts
    |-- utils.ts
  |- public/
  |- scripts/
    |-- prod.ts
  |- store/
    |-- use-exit-modal.ts
    |-- use-hearts-modal.ts
    |-- use-practice-modal.ts
  |- .env.example
  |- .env/.env.local
  |- .gitignore
  |- .prettierrc.json
  |- bun.lock
  |- components.json
  |- constants.ts
  |- drizzle.config.ts
  |- environment.d.ts
  |- eslint.config.mjs
  |- next.config.ts
  |- package.json
  |- postcss.config.js
  |- proxy.ts
  |- tailwind.config.ts
  |- tsconfig.json
  |- vercel.ts

:toolbox: 快速开始

1. 确保已安装 Git 和 NodeJS。
2. 将此仓库克隆到您的本地计算机。
3. 在 根目录 下创建 .env 文件。
4. .env 文件内容如下：

# .env

# 禁用 Next.js 的遥测功能
NEXT_TELEMETRY_DISABLED=1

# Clerk 身份验证密钥
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
CLERK_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# Neon 数据库连接字符串
DATABASE_URL="postgresql://<user>:<password>@<host>:<post>/lingo?sslmode=require"

# Stripe API 密钥和 Webhook
STRIPE_API_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
STRIPE_WEBHOOK_SECRET=whsec_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# 公开的应用程序 URL
NEXT_PUBLIC_APP_URL=http://localhost:3000

# Clerk 管理员用户 ID（用逗号和空格分隔）
CLERK_ADMIN_IDS="user_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

# 或者对于多个管理员，使用 CLERK_ADMIN_IDS="user_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx, user_xxxxxxxxxxxxxxxxxxxxxx"。

5. 获取 Clerk 认证密钥

   1. 来源：Clerk 控制台或设置页面
   2. 步骤：
      • 登录您的 Clerk 账户。
      • 导航到控制台或设置页面。
      • 查找与认证密钥相关的部分。
      • 复制该部分提供的 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY 和 CLERK_SECRET_KEY。

6. 获取 Neon 数据库 URI

   1. 来源：数据库提供商（如 Neon、PostgreSQL）
   2. 步骤：
      • 访问您的数据库提供商的平台或配置。
      • 找到数据库连接详情。
      • 将 URI 中的 <user>、<password>、<host> 和 <port> 占位符替换为您实际的数据库凭据。
      • 确保在 URI 末尾添加 ?sslmode=require 以满足 SSL 模式要求。

7. 获取 Stripe API 密钥和 Webhook 密钥

   1. 来源：Stripe 控制台
   2. 步骤：
      • 登录您的 Stripe 账户。
      • 导航到控制台或 API 设置。
      • 找到与 API 密钥和 Webhook 密钥相关的部分。
      • 复制 STRIPE_API_SECRET_KEY 和 STRIPE_WEBHOOK_SECRET。

8. 指定应用的公共 URL

   1. 步骤：
      • 将 http://localhost:3000 替换为您已部署的应用程序的 URL。

9. 确定 Clerk 管理员用户 ID

   1. 来源：Clerk 控制台或设置页面
   2. 步骤：
      • 登录您的 Clerk 账户。
      • 导航到控制台或设置页面。
      • 查找与管理员用户 ID 相关的部分。
      • 复制提供的用户 ID，确保它们之间用逗号和空格分隔。

10. 保存并保护：

    • 将更改保存到 .env 文件中。

11. 使用 bun install --legacy-peer-deps 安装项目依赖项。

12. 运行种子脚本：

在同一终端中，运行以下命令以执行种子脚本：

bun run db:push && bun run db:prod

此命令使用 bun 执行 TypeScript 文件（scripts/prod.ts），并将挑战数据写入数据库。

13. 验证数据库中的数据：

脚本完成后，请检查您的数据库，以确保挑战数据已成功导入。

14. 现在应用程序已完全配置 👍，您可以使用 bun dev 中的任一方式开始使用此应用程序。

注意：请务必妥善保管您的 API 密钥和配置值，切勿将其公开。

:camera: 截图

:gear: 技术栈

:wrench: 统计数据

:raised_hands: 贡献

在使用此应用程序时，您可能会遇到一些问题。我们非常欢迎您贡献代码。只需通过拉取请求提交更改，我将在合并之前进行审核。请确保您遵循社区准则。

:gem: 致谢

Lingo 中使用的有用资源和依赖项。

• 特别感谢 Code with Antonio：https://codewithantonio.com/
• Kenney Assets：https://kenney.nl/
• Freesound：https://freesound.org/
• Elevenlabs AI：https://elevenlabs.io/
• Flagpack：https://flagpack.xyz/

• @clerk/nextjs：^7.0.12
• @eslint/eslintrc：^3
• @neondatabase/serverless：^1.0.2
• @radix-ui/react-avatar：^1.1.11
• @radix-ui/react-dialog：^1.1.15
• @radix-ui/react-progress：^1.1.8
• @radix-ui/react-separator：^1.1.8
• @radix-ui/react-slot：^1.2.4
• @types/node：^25.6.0
• @types/react：^19.2.14
• @types/react-dom：^19.2.3
• @vercel/config：^0.1.0
• autoprefixer：^10.4.27
• class-variance-authority：^0.7.1
• clsx：^2.1.0
• dotenv：^17.4.2
• drizzle-kit：^0.31.10
• drizzle-orm：^0.45.1
• eslint：^10
• eslint-config-next：16.2.3
• eslint-config-prettier：^10.1.8
• lucide-react：^1.7.0
• next：^16.2.1
• pg：^8.20.0
• postcss：^8
• prettier：^3.8.3
• prettier-plugin-tailwindcss：^0.7.2
• ra-data-simple-rest：^5.14.5
• react：^19.2.5
• react-admin：^4.16.20
• react-circular-progressbar：^2.2.0
• react-confetti：^6.4.0
• react-dom：^19.2.5
• react-use：^17.6.0
• sonner：^2.0.7
• stripe：^20.4.1
• tailwind-merge：^3.5.0
• tailwindcss：^3.4.19
• tailwindcss-animate：^1.0.7
• tsx：^4.21.0
• typescript：^6
• zustand：^5.0.12

:coffee: 请我喝杯咖啡

:rocket: 关注我

:books: 了解更多

想要深入了解 Next.js，请查看以下资源：

• Next.js 官方文档：了解 Next.js 的功能和 API。
• 学习 Next.js：一个交互式的 Next.js 教程。

您还可以访问 Next.js 的 GitHub 仓库——欢迎您的反馈和贡献！

:page_with_curl: 在 Vercel 上部署

部署 Next.js 应用最简单的方式，就是使用由 Next.js 创建者提供的 Vercel 平台。

更多详细信息，请参阅 Next.js 部署文档。

:star: 给个 star

您也可以给这个仓库点个 star，让更多人知道并使用它。

:star2: Star 历史

(返回顶部)

Lingo (Duolingo Clone) 快速上手指南

Lingo 是一个基于 Next.js 构建的交互式语言学习平台开源项目，功能类似多邻国（Duolingo），包含课程挑战、用户进度追踪、订阅系统及现代化 UI。

环境准备

在开始之前，请确保你的开发环境满足以下要求：

• 操作系统: Windows, macOS 或 Linux
• Node.js: 建议安装最新 LTS 版本 (项目依赖较新)
• 包管理器: 本项目推荐使用 Bun (需预先安装)，也可尝试 npm/pnpm (需注意依赖兼容性)
• 数据库: PostgreSQL (推荐使用 Neon 等云数据库，支持 Serverless)
• 第三方服务账号:
  • Clerk: 用于用户认证和管理
  • Stripe: 用于处理支付和订阅 (开发模式可用测试密钥)
  • Vercel: (可选) 用于部署

安装步骤

1. 克隆项目

将代码仓库克隆到本地：

git clone https://github.com/sanidhyy/duolingo-clone.git
cd duolingo-clone

2. 安装依赖

使用 Bun 安装项目依赖（项目锁定文件为 bun.lock）：

bun install --legacy-peer-deps

提示: 如果在国内下载依赖较慢，可配置 Bun 使用国内镜像源： bun config set registry https://registry.npmmirror.com

3. 配置环境变量

在项目根目录创建 .env 文件，并填入以下配置信息。你需要提前在 Clerk、Neon 和 Stripe 的控制台获取相应密钥。

# .env

# 禁用 Next.js 遥测
NEXT_TELEMETRY_DISABLED=1

# Clerk 认证密钥 (从 Clerk Dashboard 获取)
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
CLERK_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# Neon/PostgreSQL 数据库连接 URI
# 格式: postgresql://<user>:<password>@<host>:<port>/lingo?sslmode=require
DATABASE_URL="postgresql://<user>:<password>@<host>:<port>/lingo?sslmode=require"

# Stripe API 密钥和 Webhook 秘密 (从 Stripe Dashboard 获取)
STRIPE_API_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
STRIPE_WEBHOOK_SECRET=whsec_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# 应用公共 URL (本地开发通常为 localhost:3000)
NEXT_PUBLIC_APP_URL=http://localhost:3000

# Clerk 管理员用户 ID (多个 ID 用逗号和空格分隔)
CLERK_ADMIN_IDS="user_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

4. 初始化数据库

执行以下命令推送数据库架构并种子化初始数据（如课程挑战数据）：

bun run db:push && bun run db:prod

注：db:prod 会运行 scripts/prod.ts 脚本写入初始数据。执行后请检查数据库确认数据已生成。

基本使用

完成上述配置后，即可启动开发服务器。

启动项目

在终端运行：

bun dev

访问应用

打开浏览器访问 http://localhost:3000。

• 注册/登录: 首次使用需通过 Clerk 组件注册账号。
• 管理员设置: 确保你在 .env 中配置的 CLERK_ADMIN_IDS 对应当前登录的用户 ID，以便访问 /admin 后台管理界面。
• 功能体验: 你可以浏览课程、参与挑战、查看任务（Quests）以及模拟商店购买流程。

现在你已经成功运行了 Lingo 项目，可以开始探索代码或进行二次开发了。