-一个仿多邻国的全栈项目

公众号：【可乐前端】，每天3分钟学习一个优秀的开源项目，分享web面试与实战知识，也有全栈交流学习摸鱼群，期待您的关注!

每天3分钟开源

hi，这里是每天3分钟开源，很高兴又跟大家见面了，今天介绍的开源项目简介如下：

仓库名：AntonioErdeljac/next14-duolingo-clone

项目名：next14-duolingo-clone

开源地址：https://github.com/AntonioErdeljac/next14-duolingo-clone

主要语言： TypeScript

stars数量：807

forks数量：149

开源协议：暂无

一句话介绍

这是一个由 Nextjs, React, Drizzle, Stripe 等技术栈打造的 Duolingo 克隆项目。

详细描述

本开源项目是从 YouTube 视频 “Build a Duolingo Clone With Nextjs, React, Drizzle, Stripe (2024)” 中提取的一个实战开发案例，通过 Nextjs, React, Drizzle, Stripe 等前端技术，成功复刻了 Duolingo 这个应用。

代码写得非常清晰易懂，逻辑严谨，值得任何对前端开发感兴趣的小伙伴学习。

具体功能

• 🌐 使用 Next.js 14 & 服务器操作
• 🗣 通过 Elevenlabs AI 实现 AI 语音
• 🎨 使用 Shadcn UI 的美丽组件系统
• 🎭 感谢 KenneyNL 提供的精美角色
• 🔐 使用 Clerk 进行授权
• 🔊 声音效果
• ❤️ 心系统
• 🌟 积分 / 经验值系统
• 💔 没有心弹出窗口
• 🚪 退出确认弹窗
• 🔄 复习旧课程以恢复心
• 🏆 排行榜
• 🗺 任务里程碑
• 🛍 用积分换心的商店系统
• 💳 使用 Stripe 的无限心专业层
• 🏠 登陆页面
• 📊 React Admin 管理员面板
• 🌧 使用 DrizzleORM 的 ORM
• 💾 使用 NeonDB 的 PostgresDB
• 🚀 在 Vercel 上部署
• 📱 移动设备响应

如何使用

首先，您需要 Node.js 的 14.x 版本。然后，克隆这个仓库：

git clone https://github.com/AntonioErdeljac/next14-duolingo-clone.git

安装包

npm i

设置 .env 文件

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=""
CLERK_SECRET_KEY=""
DATABASE_URL="postgresql://..."
STRIPE_API_KEY=""
NEXT_PUBLIC_APP_URL="http://localhost:3000"
STRIPE_WEBHOOK_SECRET=""

设置 Drizzle ORM

npm run db:push

种子应用

npm run db:seed

或者

npm run db:prod

启动应用

npm run dev

让我们一起走进 Nextjs, React, Drizzle, Stripe 的世界，探索更多的可能性吧！

最后

感谢您的阅读，这里每天都会推送优秀的开源项目，如果觉得有帮助的话，一键三连一下吧～