[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-sanidhyy--duolingo-clone":3,"tool-sanidhyy--duolingo-clone":62},[4,18,26,36,46,54],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":17},4358,"openclaw","openclaw\u002Fopenclaw","OpenClaw 是一款专为个人打造的本地化 AI 助手，旨在让你在自己的设备上拥有完全可控的智能伙伴。它打破了传统 AI 助手局限于特定网页或应用的束缚，能够直接接入你日常使用的各类通讯渠道，包括微信、WhatsApp、Telegram、Discord、iMessage 等数十种平台。无论你在哪个聊天软件中发送消息，OpenClaw 都能即时响应，甚至支持在 macOS、iOS 和 Android 设备上进行语音交互，并提供实时的画布渲染功能供你操控。\n\n这款工具主要解决了用户对数据隐私、响应速度以及“始终在线”体验的需求。通过将 AI 部署在本地，用户无需依赖云端服务即可享受快速、私密的智能辅助，真正实现了“你的数据，你做主”。其独特的技术亮点在于强大的网关架构，将控制平面与核心助手分离，确保跨平台通信的流畅性与扩展性。\n\nOpenClaw 非常适合希望构建个性化工作流的技术爱好者、开发者，以及注重隐私保护且不愿被单一生态绑定的普通用户。只要具备基础的终端操作能力（支持 macOS、Linux 及 Windows WSL2），即可通过简单的命令行引导完成部署。如果你渴望拥有一个懂你",349277,3,"2026-04-06T06:32:30",[13,14,15,16],"Agent","开发框架","图像","数据工具","ready",{"id":19,"name":20,"github_repo":21,"description_zh":22,"stars":23,"difficulty_score":10,"last_commit_at":24,"category_tags":25,"status":17},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,"2026-04-05T11:01:52",[14,15,13],{"id":27,"name":28,"github_repo":29,"description_zh":30,"stars":31,"difficulty_score":32,"last_commit_at":33,"category_tags":34,"status":17},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",160015,2,"2026-04-18T11:30:52",[14,13,35],"语言模型",{"id":37,"name":38,"github_repo":39,"description_zh":40,"stars":41,"difficulty_score":42,"last_commit_at":43,"category_tags":44,"status":17},8272,"opencode","anomalyco\u002Fopencode","OpenCode 是一款开源的 AI 编程助手（Coding Agent），旨在像一位智能搭档一样融入您的开发流程。它不仅仅是一个代码补全插件，而是一个能够理解项目上下文、自主规划任务并执行复杂编码操作的智能体。无论是生成全新功能、重构现有代码，还是排查难以定位的 Bug，OpenCode 都能通过自然语言交互高效完成，显著减少开发者在重复性劳动和上下文切换上的时间消耗。\n\n这款工具专为软件开发者、工程师及技术研究人员设计，特别适合希望利用大模型能力来提升编码效率、加速原型开发或处理遗留代码维护的专业人群。其核心亮点在于完全开源的架构，这意味着用户可以审查代码逻辑、自定义行为策略，甚至私有化部署以保障数据安全，彻底打破了传统闭源 AI 助手的“黑盒”限制。\n\n在技术体验上，OpenCode 提供了灵活的终端界面（Terminal UI）和正在测试中的桌面应用程序，支持 macOS、Windows 及 Linux 全平台。它兼容多种包管理工具，安装便捷，并能无缝集成到现有的开发环境中。无论您是追求极致控制权的资深极客，还是渴望提升产出的独立开发者，OpenCode 都提供了一个透明、可信",144296,1,"2026-04-16T14:50:03",[13,45],"插件",{"id":47,"name":48,"github_repo":49,"description_zh":50,"stars":51,"difficulty_score":32,"last_commit_at":52,"category_tags":53,"status":17},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",109154,"2026-04-18T11:18:24",[14,15,13],{"id":55,"name":56,"github_repo":57,"description_zh":58,"stars":59,"difficulty_score":32,"last_commit_at":60,"category_tags":61,"status":17},6121,"gemini-cli","google-gemini\u002Fgemini-cli","gemini-cli 是一款由谷歌推出的开源 AI 命令行工具，它将强大的 Gemini 大模型能力直接集成到用户的终端环境中。对于习惯在命令行工作的开发者而言，它提供了一条从输入提示词到获取模型响应的最短路径，无需切换窗口即可享受智能辅助。\n\n这款工具主要解决了开发过程中频繁上下文切换的痛点，让用户能在熟悉的终端界面内直接完成代码理解、生成、调试以及自动化运维任务。无论是查询大型代码库、根据草图生成应用，还是执行复杂的 Git 操作，gemini-cli 都能通过自然语言指令高效处理。\n\n它特别适合广大软件工程师、DevOps 人员及技术研究人员使用。其核心亮点包括支持高达 100 万 token 的超长上下文窗口，具备出色的逻辑推理能力；内置 Google 搜索、文件操作及 Shell 命令执行等实用工具；更独特的是，它支持 MCP（模型上下文协议），允许用户灵活扩展自定义集成，连接如图像生成等外部能力。此外，个人谷歌账号即可享受免费的额度支持，且项目基于 Apache 2.0 协议完全开源，是提升终端工作效率的理想助手。",100752,"2026-04-10T01:20:03",[45,13,15,14],{"id":63,"github_repo":64,"name":65,"description_en":66,"description_zh":67,"ai_summary_zh":67,"readme_en":68,"readme_zh":69,"quickstart_zh":70,"use_case_zh":71,"hero_image_url":72,"owner_login":73,"owner_name":74,"owner_avatar_url":75,"owner_bio":76,"owner_company":77,"owner_location":78,"owner_email":79,"owner_twitter":80,"owner_website":81,"owner_url":82,"languages":83,"stars":96,"forks":97,"last_commit_at":98,"license":99,"difficulty_score":100,"env_os":101,"env_gpu":102,"env_ram":102,"env_deps":103,"category_tags":117,"github_topics":118,"view_count":32,"oss_zip_url":80,"oss_zip_packed_at":80,"status":17,"created_at":135,"updated_at":136,"faqs":137,"releases":168},9036,"sanidhyy\u002Fduolingo-clone","duolingo-clone","Lingo - Interactive platform for language learning.","duolingo-clone（项目名为 Lingo）是一个开源的交互式语言学习平台，旨在复刻多邻国（Duolingo）的核心体验。它通过游戏化的课程设计、进度追踪及奖励机制，帮助用户以轻松有趣的方式掌握新语言，解决了传统语言学习枯燥乏味且缺乏即时反馈的痛点。\n\n该项目主要面向全栈开发者和编程学习者，是研究现代 Web 应用架构与实战开发的绝佳范本。对于希望深入理解教育类应用逻辑或构建个人作品集的技术人员来说，它提供了完整的生产级代码参考。\n\n在技术实现上，duolingo-clone 展现了鲜明的现代技术栈特色：基于 Next.js App Router 构建服务端渲染应用，利用 Drizzle ORM 高效管理数据库模式，并集成 Stripe 处理订阅支付。其清晰的目录结构涵盖了从身份验证、后台管理到课程互动的完整流程，同时支持一键部署至 Vercel。无论是用于学习前沿前端技术，还是作为二次开发的基础框架，duolingo-clone 都提供了一个高质量、可维护且功能完备的起点。","\u003Ca name=\"readme-top\">\u003C\u002Fa>\n\n# Lingo - Interactive platform for language learning.\n\n![Lingo - Interactive platform for language learning.](\u002F.github\u002Fimages\u002Fimg_main.png \"Lingo - Interactive platform for language learning.\")\n\n[![Ask Me Anything!](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fsanidhyy_duolingo-clone_readme_1e593154541d.png)](https:\u002F\u002Fgithub.com\u002Fsanidhyy \"Ask Me Anything!\")\n[![GitHub license](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fsanidhyy_duolingo-clone_readme_419716e74628.png)](https:\u002F\u002Fgithub.com\u002Fsanidhyy\u002Fduolingo-clone\u002Fblob\u002Fmain\u002FLICENSE \"GitHub license\")\n[![Maintenance](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fsanidhyy_duolingo-clone_readme_2ea6a234576c.png)](https:\u002F\u002Fgithub.com\u002Fsanidhyy\u002Fduolingo-clone\u002Fcommits\u002Fmain \"Maintenance\")\n[![GitHub branches](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fsanidhyy_duolingo-clone_readme_13a8a8276953.png)](https:\u002F\u002Fgithub.com\u002Fsanidhyy\u002Fduolingo-clone\u002Fbranches \"GitHub branches\")\n[![Github commits](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fsanidhyy_duolingo-clone_readme_1255c392932b.png)](https:\u002F\u002Fgithub.com\u002Fsanidhyy\u002Fduolingo-clone\u002Fcommits \"Github commits\")\n[![GitHub issues](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fsanidhyy_duolingo-clone_readme_59410b8da3d4.png)](https:\u002F\u002Fgithub.com\u002Fsanidhyy\u002Fduolingo-clone\u002Fissues \"GitHub issues\")\n[![GitHub pull requests](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fsanidhyy_duolingo-clone_readme_79dbbf79039b.png)](https:\u002F\u002Fgithub.com\u002Fsanidhyy\u002Fduolingo-clone\u002Fpulls \"GitHub pull requests\")\n[![Vercel status](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FVercel-000000?style=for-the-badge&logo=vercel&logoColor=white)](https:\u002F\u002Flingo-clone.vercel.app\u002F \"Vercel status\")\n\n\u003C!-- Table of Contents -->\n\u003Cdetails>\n\n\u003Csummary>\n\n# :notebook_with_decorative_cover: Table of Contents\n\n\u003C\u002Fsummary>\n\n- [Folder Structure](#bangbang-folder-structure)\n- [Getting Started](#toolbox-getting-started)\n- [Screenshots](#camera-screenshots)\n- [Tech Stack](#gear-tech-stack)\n- [Stats](#wrench-stats)\n- [Contribute](#raised_hands-contribute)\n- [Acknowledgements](#gem-acknowledgements)\n- [Buy Me a Coffee](#coffee-buy-me-a-coffee)\n- [Follow Me](#rocket-follow-me)\n- [Learn More](#books-learn-more)\n- [Deploy on Vercel](#page_with_curl-deploy-on-vercel)\n- [Give A Star](#star-give-a-star)\n- [Star History](#star2-star-history)\n- [Give A Star](#star-give-a-star)\n\n\u003C\u002Fdetails>\n\n## :bangbang: Folder Structure\n\nHere is the folder structure of this app.\n\n\u003C!--- FOLDER_STRUCTURE_START --->\n```bash\nduolingo-clone\u002F\n  |- actions\u002F\n    |-- challenge-progress.ts\n    |-- user-progress.ts\n    |-- user-subscription.ts\n  |- app\u002F\n    |-- (auth)\u002F\n    |-- (main)\u002F\n    |-- (marketing)\u002F\n    |-- admin\u002F\n    |-- api\u002F\n    |-- lesson\u002F\n    |-- apple-icon.png\n    |-- favicon.ico\n    |-- globals.css\n    |-- icon1.png\n    |-- icon2.png\n    |-- layout.tsx\n  |- components\u002F\n    |-- modals\u002F\n    |-- ui\u002F\n    |-- banner.tsx\n    |-- feed-wrapper.tsx\n    |-- mobile-header.tsx\n    |-- mobile-sidebar.tsx\n    |-- promo.tsx\n    |-- quests.tsx\n    |-- sidebar-item.tsx\n    |-- sidebar.tsx\n    |-- sticky-wrapper.tsx\n    |-- user-progress.tsx\n  |- config\u002F\n    |-- index.ts\n  |- db\u002F\n    |-- drizzle.ts\n    |-- queries.ts\n    |-- schema.ts\n  |- lib\u002F\n    |-- admin.ts\n    |-- stripe.ts\n    |-- utils.ts\n  |- public\u002F\n  |- scripts\u002F\n    |-- prod.ts\n  |- store\u002F\n    |-- use-exit-modal.ts\n    |-- use-hearts-modal.ts\n    |-- use-practice-modal.ts\n  |- .env.example\n  |- .env\u002F.env.local\n  |- .gitignore\n  |- .prettierrc.json\n  |- bun.lock\n  |- components.json\n  |- constants.ts\n  |- drizzle.config.ts\n  |- environment.d.ts\n  |- eslint.config.mjs\n  |- next.config.ts\n  |- package.json\n  |- postcss.config.js\n  |- proxy.ts\n  |- tailwind.config.ts\n  |- tsconfig.json\n  |- vercel.ts\n```\n\u003C!--- FOLDER_STRUCTURE_END --->\n\n\u003Cbr \u002F>\n\n## :toolbox: Getting Started\n\n1. Make sure **Git** and **NodeJS** is installed.\n2. Clone this repository to your local computer.\n3. Create `.env` file in **root** directory.\n4. Contents of `.env`:\n\n```env\n# .env\n\n# disabled next.js telemetry\nNEXT_TELEMETRY_DISABLED=1\n\n# clerk auth keys\nNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\nCLERK_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\n\n# neon db uri\nDATABASE_URL=\"postgresql:\u002F\u002F\u003Cuser>:\u003Cpassword>@\u003Chost>:\u003Cpost>\u002Flingo?sslmode=require\"\n\n# stripe api key and webhook\nSTRIPE_API_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\nSTRIPE_WEBHOOK_SECRET=whsec_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\n\n# public app url\nNEXT_PUBLIC_APP_URL=http:\u002F\u002Flocalhost:3000\n\n# clerk admin user id(s) separated by comma and space (, )\nCLERK_ADMIN_IDS=\"user_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"\n# or CLERK_ADMIN_IDS=\"user_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx, user_xxxxxxxxxxxxxxxxxxxxxx\" for multiple admins.\n\n```\n\n5. Obtain Clerk Authentication Keys\n   1. **Source**: Clerk Dashboard or Settings Page\n   2. **Procedure**:\n      - Log in to your Clerk account.\n      - Navigate to the dashboard or settings page.\n      - Look for the section related to authentication keys.\n      - Copy the `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` and `CLERK_SECRET_KEY` provided in that section.\n\n6. Retrieve Neon Database URI\n   1. **Source**: Database Provider (e.g., Neon, PostgreSQL)\n   2. **Procedure**:\n      - Access your database provider's platform or configuration.\n      - Locate the database connection details.\n      - Replace `\u003Cuser>`, `\u003Cpassword>`, `\u003Chost>`, and `\u003Cport>` placeholders in the URI with your actual database credentials.\n      - Ensure to include `?sslmode=require` at the end of the URI for SSL mode requirement.\n\n7. Fetch Stripe API Key and Webhook Secret\n   1. **Source**: Stripe Dashboard\n   2. **Procedure**:\n      - Log in to your Stripe account.\n      - Navigate to the dashboard or API settings.\n      - Find the section related to API keys and webhook secrets.\n      - Copy the `STRIPE_API_SECRET_KEY` and `STRIPE_WEBHOOK_SECRET`.\n\n8. Specify Public App URL\n   1. **Procedure**:\n      - Replace `http:\u002F\u002Flocalhost:3000` with the URL of your deployed application.\n\n9. Identify Clerk Admin User IDs\n   1. **Source**: Clerk Dashboard or Settings Page\n   2. **Procedure**:\n      - Log in to your Clerk account.\n      - Navigate to the dashboard or settings page.\n      - Find the section related to admin user IDs.\n      - Copy the user IDs provided, ensuring they are separated by commas and spaces.\n\n10. Save and Secure:\n    - Save the changes to the `.env` file.\n\n11. Install Project Dependencies using `bun install --legacy-peer-deps`.\n\n12. Run the Seed Script:\n\nIn the same terminal, run the following command to execute the seed script:\n\n```bash\nbun run db:push && bun run db:prod\n```\n\nThis command uses `bun` to execute the Typescript file (`scripts\u002Fprod.ts`) and writes challenges data in database.\n\n13. Verify Data in Database:\n\nOnce the script completes, check your database to ensure that the challenges data has been successfully seeded.\n\n14. Now app is fully configured 👍 and you can start using this app using either one of `bun dev`.\n\n**NOTE:** Please make sure to keep your API keys and configuration values secure and do not expose them publicly.\n\n## :camera: Screenshots\n\n![Modern UI\u002FUX](\u002F.github\u002Fimages\u002Fimg1.png \"Modern UI\u002FUX\")\n\n![Quests](\u002F.github\u002Fimages\u002Fimg2.png \"Quests\")\n\n![Shop](\u002F.github\u002Fimages\u002Fimg3.png \"Shop\")\n\n## :gear: Tech Stack\n\n[![React JS](https:\u002F\u002Fskillicons.dev\u002Ficons?i=react \"React JS\")](https:\u002F\u002Freact.dev\u002F \"React JS\") [![Next JS](https:\u002F\u002Fskillicons.dev\u002Ficons?i=next \"Next JS\")](https:\u002F\u002Fnextjs.org\u002F \"Next JS\") [![Typescript](https:\u002F\u002Fskillicons.dev\u002Ficons?i=ts \"Typescript\")](https:\u002F\u002Fwww.typescriptlang.org\u002F \"Typescript\") [![Tailwind CSS](https:\u002F\u002Fskillicons.dev\u002Ficons?i=tailwind \"Tailwind CSS\")](https:\u002F\u002Ftailwindcss.com\u002F \"Tailwind CSS\") [![Vercel](https:\u002F\u002Fskillicons.dev\u002Ficons?i=vercel \"Vercel\")](https:\u002F\u002Fvercel.app\u002F \"Vercel\") [![Postgresql](https:\u002F\u002Fskillicons.dev\u002Ficons?i=postgres \"Postgresql\")](https:\u002F\u002Fwww.postgresql.org\u002F \"Postgresql\")\n\n## :wrench: Stats\n\n[![Stats for Lingo](\u002F.github\u002Fimages\u002Fstats.svg \"Stats for Lingo\")](https:\u002F\u002Fpagespeed.web.dev\u002Fanalysis?url=https:\u002F\u002Flingo-clone.vercel.app\u002F \"Stats for Lingo\")\n\n## :raised_hands: Contribute\n\nYou might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.\n\n## :gem: Acknowledgements\n\nUseful resources and dependencies that are used in Lingo.\n\n- Special Thanks to Code with Antonio: https:\u002F\u002Fcodewithantonio.com\u002F\n- Kenney Assets: https:\u002F\u002Fkenney.nl\u002F\n- Freesound: https:\u002F\u002Ffreesound.org\u002F\n- Elevenlabs AI: https:\u002F\u002Felevenlabs.io\u002F\n- Flagpack: https:\u002F\u002Fflagpack.xyz\u002F\n\u003C!--- DEPENDENCIES_START --->\n- [@clerk\u002Fnextjs](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@clerk\u002Fnextjs): ^7.0.12\n- [@eslint\u002Feslintrc](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@eslint\u002Feslintrc): ^3\n- [@neondatabase\u002Fserverless](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@neondatabase\u002Fserverless): ^1.0.2\n- [@radix-ui\u002Freact-avatar](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@radix-ui\u002Freact-avatar): ^1.1.11\n- [@radix-ui\u002Freact-dialog](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@radix-ui\u002Freact-dialog): ^1.1.15\n- [@radix-ui\u002Freact-progress](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@radix-ui\u002Freact-progress): ^1.1.8\n- [@radix-ui\u002Freact-separator](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@radix-ui\u002Freact-separator): ^1.1.8\n- [@radix-ui\u002Freact-slot](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@radix-ui\u002Freact-slot): ^1.2.4\n- [@types\u002Fnode](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@types\u002Fnode): ^25.6.0\n- [@types\u002Freact](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@types\u002Freact): ^19.2.14\n- [@types\u002Freact-dom](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@types\u002Freact-dom): ^19.2.3\n- [@vercel\u002Fconfig](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@vercel\u002Fconfig): ^0.1.0\n- [autoprefixer](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fautoprefixer): ^10.4.27\n- [class-variance-authority](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fclass-variance-authority): ^0.7.1\n- [clsx](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fclsx): ^2.1.0\n- [dotenv](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fdotenv): ^17.4.2\n- [drizzle-kit](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fdrizzle-kit): ^0.31.10\n- [drizzle-orm](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fdrizzle-orm): ^0.45.1\n- [eslint](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Feslint): ^10\n- [eslint-config-next](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Feslint-config-next): 16.2.3\n- [eslint-config-prettier](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Feslint-config-prettier): ^10.1.8\n- [lucide-react](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Flucide-react): ^1.7.0\n- [next](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fnext): ^16.2.1\n- [pg](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fpg): ^8.20.0\n- [postcss](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fpostcss): ^8\n- [prettier](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fprettier): ^3.8.3\n- [prettier-plugin-tailwindcss](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fprettier-plugin-tailwindcss): ^0.7.2\n- [ra-data-simple-rest](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fra-data-simple-rest): ^5.14.5\n- [react](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact): ^19.2.5\n- [react-admin](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact-admin): ^4.16.20\n- [react-circular-progressbar](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact-circular-progressbar): ^2.2.0\n- [react-confetti](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact-confetti): ^6.4.0\n- [react-dom](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact-dom): ^19.2.5\n- [react-use](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact-use): ^17.6.0\n- [sonner](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fsonner): ^2.0.7\n- [stripe](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fstripe): ^20.4.1\n- [tailwind-merge](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Ftailwind-merge): ^3.5.0\n- [tailwindcss](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Ftailwindcss): ^3.4.19\n- [tailwindcss-animate](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Ftailwindcss-animate): ^1.0.7\n- [tsx](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Ftsx): ^4.21.0\n- [typescript](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Ftypescript): ^6\n- [zustand](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fzustand): ^5.0.12\n\n\u003C!--- DEPENDENCIES_END --->\n\n## :coffee: Buy Me a Coffee\n\n[\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FBuy_Me_A_Coffee-FFDD00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black\" width=\"200\" \u002F>](https:\u002F\u002Fwww.buymeacoffee.com\u002Fsanidhy \"Buy me a Coffee\")\n\n## :rocket: Follow Me\n\n[![Follow Me](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Ffollowers\u002Fsanidhyy?style=social&label=Follow&maxAge=2592000)](https:\u002F\u002Fgithub.com\u002Fsanidhyy \"Follow Me\")\n[![Tweet about this project](https:\u002F\u002Fimg.shields.io\u002Ftwitter\u002Furl?style=social&url=https%3A%2F%2Fx.com%2F_sanidhyy)](https:\u002F\u002Fx.com\u002Fintent\u002Ftweet?text=Check+out+this+amazing+app:&url=https%3A%2F%2Fgithub.com%2Fsanidhyy%2Fduolingo-clone \"Tweet about this project\")\n\n## :books: Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https:\u002F\u002Fnextjs.org\u002Fdocs) - learn about Next.js features and API.\n- [Learn Next.js](https:\u002F\u002Fnextjs.org\u002Flearn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https:\u002F\u002Fgithub.com\u002Fvercel\u002Fnext.js\u002F) - your feedback and contributions are welcome!\n\n## :page_with_curl: Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https:\u002F\u002Fvercel.com\u002Fnew?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out [Next.js deployment documentation](https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fdeployment) for more details.\n\n## :star: Give A Star\n\nYou can also give this repository a star to show more people and they can use this repository.\n\n## :star2: Star History\n\n\u003Ca href=\"https:\u002F\u002Fstar-history.com\u002F#sanidhyy\u002Fduolingo-clone&Timeline\">\n\u003Cpicture>\n  \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fsanidhyy_duolingo-clone_readme_3f3fe2fba96a.png&theme=dark\" \u002F>\n  \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fsanidhyy_duolingo-clone_readme_3f3fe2fba96a.png\" \u002F>\n  \u003Cimg alt=\"Star History Chart\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fsanidhyy_duolingo-clone_readme_3f3fe2fba96a.png\" \u002F>\n\u003C\u002Fpicture>\n\u003C\u002Fa>\n\n\u003Cbr \u002F>\n\u003Cp align=\"right\">(\u003Ca href=\"#readme-top\">back to top\u003C\u002Fa>)\u003C\u002Fp>\n","\u003Ca name=\"readme-top\">\u003C\u002Fa>\n\n# Lingo - 语言学习的互动平台。\n\n![Lingo - 语言学习的互动平台。](\u002F.github\u002Fimages\u002Fimg_main.png \"Lingo - 语言学习的互动平台。\")\n\n[![问我任何问题！](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fsanidhyy_duolingo-clone_readme_1e593154541d.png)](https:\u002F\u002Fgithub.com\u002Fsanidhyy \"问我任何问题！\")\n[![GitHub 许可证](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fsanidhyy_duolingo-clone_readme_419716e74628.png)](https:\u002F\u002Fgithub.com\u002Fsanidhyy\u002Fduolingo-clone\u002Fblob\u002Fmain\u002FLICENSE \"GitHub 许可证\")\n[![维护状态](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fsanidhyy_duolingo-clone_readme_2ea6a234576c.png)](https:\u002F\u002Fgithub.com\u002Fsanidhyy\u002Fduolingo-clone\u002Fcommits\u002Fmain \"维护状态\")\n[![GitHub 分支](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fsanidhyy_duolingo-clone_readme_13a8a8276953.png)](https:\u002F\u002Fgithub.com\u002Fsanidhyy\u002Fduolingo-clone\u002Fbranches \"GitHub 分支\")\n[![Github 提交](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fsanidhyy_duolingo-clone_readme_1255c392932b.png)](https:\u002F\u002Fgithub.com\u002Fsanidhyy\u002Fduolingo-clone\u002Fcommits \"Github 提交\")\n[![GitHub 问题](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fsanidhyy_duolingo-clone_readme_59410b8da3d4.png)](https:\u002F\u002Fgithub.com\u002Fsanidhyy\u002Fduolingo-clone\u002Fissues \"GitHub 问题\")\n[![GitHub 拉取请求](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fsanidhyy_duolingo-clone_readme_79dbbf79039b.png)](https:\u002F\u002Fgithub.com\u002Fsanidhyy\u002Fduolingo-clone\u002Fpulls \"GitHub 拉取请求\")\n[![Vercel 状态](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FVercel-000000?style=for-the-badge&logo=vercel&logoColor=white)](https:\u002F\u002Flingo-clone.vercel.app\u002F \"Vercel 状态\")\n\n\u003C!-- 目录 -->\n\u003Cdetails>\n\n\u003Csummary>\n\n# :notebook_with_decorative_cover: 目录\n\n\u003C\u002Fsummary>\n\n- [文件夹结构](#bangbang-folder-structure)\n- [快速开始](#toolbox-getting-started)\n- [截图](#camera-screenshots)\n- [技术栈](#gear-tech-stack)\n- [统计数据](#wrench-stats)\n- [贡献](#raised_hands-contribute)\n- [致谢](#gem-acknowledgements)\n- [请我喝杯咖啡](#coffee-buy-me-a-coffee)\n- [关注我](#rocket-follow-me)\n- [了解更多](#books-learn-more)\n- [在 Vercel 部署](#page_with_curl-deploy-on-vercel)\n- [给个 Star](#star-give-a-star)\n- [Star 历史](#star2-star-history)\n- [给个 Star](#star-give-a-star)\n\n\u003C\u002Fdetails>\n\n## :bangbang: 文件夹结构\n\n以下是本应用的文件夹结构。\n\n\u003C!--- FOLDER_STRUCTURE_START --->\n```bash\nduolingo-clone\u002F\n  |- actions\u002F\n    |-- challenge-progress.ts\n    |-- user-progress.ts\n    |-- user-subscription.ts\n  |- app\u002F\n    |-- (auth)\u002F\n    |-- (main)\u002F\n    |-- (marketing)\u002F\n    |-- admin\u002F\n    |-- api\u002F\n    |-- lesson\u002F\n    |-- apple-icon.png\n    |-- favicon.ico\n    |-- globals.css\n    |-- icon1.png\n    |-- icon2.png\n    |-- layout.tsx\n  |- components\u002F\n    |-- modals\u002F\n    |-- ui\u002F\n    |-- banner.tsx\n    |-- feed-wrapper.tsx\n    |-- mobile-header.tsx\n    |-- mobile-sidebar.tsx\n    |-- promo.tsx\n    |-- quests.tsx\n    |-- sidebar-item.tsx\n    |-- sidebar.tsx\n    |-- sticky-wrapper.tsx\n    |-- user-progress.tsx\n  |- config\u002F\n    |-- index.ts\n  |- db\u002F\n    |-- drizzle.ts\n    |-- queries.ts\n    |-- schema.ts\n  |- lib\u002F\n    |-- admin.ts\n    |-- stripe.ts\n    |-- utils.ts\n  |- public\u002F\n  |- scripts\u002F\n    |-- prod.ts\n  |- store\u002F\n    |-- use-exit-modal.ts\n    |-- use-hearts-modal.ts\n    |-- use-practice-modal.ts\n  |- .env.example\n  |- .env\u002F.env.local\n  |- .gitignore\n  |- .prettierrc.json\n  |- bun.lock\n  |- components.json\n  |- constants.ts\n  |- drizzle.config.ts\n  |- environment.d.ts\n  |- eslint.config.mjs\n  |- next.config.ts\n  |- package.json\n  |- postcss.config.js\n  |- proxy.ts\n  |- tailwind.config.ts\n  |- tsconfig.json\n  |- vercel.ts\n```\n\u003C!--- FOLDER_STRUCTURE_END --->\n\n\u003Cbr \u002F>\n\n## :toolbox: 快速开始\n\n1. 确保已安装 **Git** 和 **NodeJS**。\n2. 将此仓库克隆到您的本地计算机。\n3. 在 **根目录** 下创建 `.env` 文件。\n4. `.env` 文件内容如下：\n\n```env\n# .env\n\n# 禁用 Next.js 的遥测功能\nNEXT_TELEMETRY_DISABLED=1\n\n# Clerk 身份验证密钥\nNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\nCLERK_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\n\n# Neon 数据库连接字符串\nDATABASE_URL=\"postgresql:\u002F\u002F\u003Cuser>:\u003Cpassword>@\u003Chost>:\u003Cpost>\u002Flingo?sslmode=require\"\n\n# Stripe API 密钥和 Webhook\nSTRIPE_API_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\nSTRIPE_WEBHOOK_SECRET=whsec_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\n\n# 公开的应用程序 URL\nNEXT_PUBLIC_APP_URL=http:\u002F\u002Flocalhost:3000\n\n# Clerk 管理员用户 ID（用逗号和空格分隔）\nCLERK_ADMIN_IDS=\"user_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"\n\n# 或者对于多个管理员，使用 CLERK_ADMIN_IDS=\"user_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx, user_xxxxxxxxxxxxxxxxxxxxxx\"。\n\n```\n\n5. 获取 Clerk 认证密钥\n   1. **来源**：Clerk 控制台或设置页面\n   2. **步骤**：\n      - 登录您的 Clerk 账户。\n      - 导航到控制台或设置页面。\n      - 查找与认证密钥相关的部分。\n      - 复制该部分提供的 `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` 和 `CLERK_SECRET_KEY`。\n\n6. 获取 Neon 数据库 URI\n   1. **来源**：数据库提供商（如 Neon、PostgreSQL）\n   2. **步骤**：\n      - 访问您的数据库提供商的平台或配置。\n      - 找到数据库连接详情。\n      - 将 URI 中的 `\u003Cuser>`、`\u003Cpassword>`、`\u003Chost>` 和 `\u003Cport>` 占位符替换为您实际的数据库凭据。\n      - 确保在 URI 末尾添加 `?sslmode=require` 以满足 SSL 模式要求。\n\n7. 获取 Stripe API 密钥和 Webhook 密钥\n   1. **来源**：Stripe 控制台\n   2. **步骤**：\n      - 登录您的 Stripe 账户。\n      - 导航到控制台或 API 设置。\n      - 找到与 API 密钥和 Webhook 密钥相关的部分。\n      - 复制 `STRIPE_API_SECRET_KEY` 和 `STRIPE_WEBHOOK_SECRET`。\n\n8. 指定应用的公共 URL\n   1. **步骤**：\n      - 将 `http:\u002F\u002Flocalhost:3000` 替换为您已部署的应用程序的 URL。\n\n9. 确定 Clerk 管理员用户 ID\n   1. **来源**：Clerk 控制台或设置页面\n   2. **步骤**：\n      - 登录您的 Clerk 账户。\n      - 导航到控制台或设置页面。\n      - 查找与管理员用户 ID 相关的部分。\n      - 复制提供的用户 ID，确保它们之间用逗号和空格分隔。\n\n10. 保存并保护：\n    - 将更改保存到 `.env` 文件中。\n\n11. 使用 `bun install --legacy-peer-deps` 安装项目依赖项。\n\n12. 运行种子脚本：\n\n在同一终端中，运行以下命令以执行种子脚本：\n\n```bash\nbun run db:push && bun run db:prod\n```\n\n此命令使用 `bun` 执行 TypeScript 文件（`scripts\u002Fprod.ts`），并将挑战数据写入数据库。\n\n13. 验证数据库中的数据：\n\n脚本完成后，请检查您的数据库，以确保挑战数据已成功导入。\n\n14. 现在应用程序已完全配置 👍，您可以使用 `bun dev` 中的任一方式开始使用此应用程序。\n\n**注意**：请务必妥善保管您的 API 密钥和配置值，切勿将其公开。\n\n## :camera: 截图\n\n![现代 UI\u002FUX](\u002F.github\u002Fimages\u002Fimg1.png \"现代 UI\u002FUX\")\n\n![任务](\u002F.github\u002Fimages\u002Fimg2.png \"任务\")\n\n![商店](\u002F.github\u002Fimages\u002Fimg3.png \"商店\")\n\n## :gear: 技术栈\n\n[![React JS](https:\u002F\u002Fskillicons.dev\u002Ficons?i=react \"React JS\")](https:\u002F\u002Freact.dev\u002F \"React JS\") [![Next JS](https:\u002F\u002Fskillicons.dev\u002Ficons?i=next \"Next JS\")](https:\u002F\u002Fnextjs.org\u002F \"Next JS\") [![Typescript](https:\u002F\u002Fskillicons.dev\u002Ficons?i=ts \"Typescript\")](https:\u002F\u002Fwww.typescriptlang.org\u002F \"Typescript\") [![Tailwind CSS](https:\u002F\u002Fskillicons.dev\u002Ficons?i=tailwind \"Tailwind CSS\")](https:\u002F\u002Ftailwindcss.com\u002F \"Tailwind CSS\") [![Vercel](https:\u002F\u002Fskillicons.dev\u002Ficons?i=vercel \"Vercel\")](https:\u002F\u002Fvercel.app\u002F \"Vercel\") [![Postgresql](https:\u002F\u002Fskillicons.dev\u002Ficons?i=postgres \"Postgresql\")](https:\u002F\u002Fwww.postgresql.org\u002F \"Postgresql\")\n\n## :wrench: 统计数据\n\n[![Lingo 的统计数据](\u002F.github\u002Fimages\u002Fstats.svg \"Lingo 的统计数据\")](https:\u002F\u002Fpagespeed.web.dev\u002Fanalysis?url=https:\u002F\u002Flingo-clone.vercel.app\u002F \"Lingo 的统计数据\")\n\n## :raised_hands: 贡献\n\n在使用此应用程序时，您可能会遇到一些问题。我们非常欢迎您贡献代码。只需通过拉取请求提交更改，我将在合并之前进行审核。请确保您遵循社区准则。\n\n## :gem: 致谢\n\nLingo 中使用的有用资源和依赖项。\n\n- 特别感谢 Code with Antonio：https:\u002F\u002Fcodewithantonio.com\u002F\n- Kenney Assets：https:\u002F\u002Fkenney.nl\u002F\n- Freesound：https:\u002F\u002Ffreesound.org\u002F\n- Elevenlabs AI：https:\u002F\u002Felevenlabs.io\u002F\n- Flagpack：https:\u002F\u002Fflagpack.xyz\u002F\n\u003C!--- DEPENDENCIES_START --->\n- [@clerk\u002Fnextjs](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@clerk\u002Fnextjs)：^7.0.12\n- [@eslint\u002Feslintrc](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@eslint\u002Feslintrc)：^3\n- [@neondatabase\u002Fserverless](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@neondatabase\u002Fserverless)：^1.0.2\n- [@radix-ui\u002Freact-avatar](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@radix-ui\u002Freact-avatar)：^1.1.11\n- [@radix-ui\u002Freact-dialog](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@radix-ui\u002Freact-dialog)：^1.1.15\n- [@radix-ui\u002Freact-progress](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@radix-ui\u002Freact-progress)：^1.1.8\n- [@radix-ui\u002Freact-separator](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@radix-ui\u002Freact-separator)：^1.1.8\n- [@radix-ui\u002Freact-slot](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@radix-ui\u002Freact-slot)：^1.2.4\n- [@types\u002Fnode](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@types\u002Fnode)：^25.6.0\n- [@types\u002Freact](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@types\u002Freact)：^19.2.14\n- [@types\u002Freact-dom](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@types\u002Freact-dom)：^19.2.3\n- [@vercel\u002Fconfig](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@vercel\u002Fconfig)：^0.1.0\n- [autoprefixer](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fautoprefixer)：^10.4.27\n- [class-variance-authority](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fclass-variance-authority)：^0.7.1\n- [clsx](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fclsx)：^2.1.0\n- [dotenv](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fdotenv)：^17.4.2\n- [drizzle-kit](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fdrizzle-kit)：^0.31.10\n- [drizzle-orm](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fdrizzle-orm)：^0.45.1\n- [eslint](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Feslint)：^10\n- [eslint-config-next](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Feslint-config-next)：16.2.3\n- [eslint-config-prettier](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Feslint-config-prettier)：^10.1.8\n- [lucide-react](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Flucide-react)：^1.7.0\n- [next](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fnext)：^16.2.1\n- [pg](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fpg)：^8.20.0\n- [postcss](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fpostcss)：^8\n- [prettier](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fprettier)：^3.8.3\n- [prettier-plugin-tailwindcss](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fprettier-plugin-tailwindcss)：^0.7.2\n- [ra-data-simple-rest](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fra-data-simple-rest)：^5.14.5\n- [react](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact)：^19.2.5\n- [react-admin](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact-admin)：^4.16.20\n- [react-circular-progressbar](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact-circular-progressbar)：^2.2.0\n- [react-confetti](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact-confetti)：^6.4.0\n- [react-dom](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact-dom)：^19.2.5\n- [react-use](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact-use)：^17.6.0\n- [sonner](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fsonner)：^2.0.7\n- [stripe](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fstripe)：^20.4.1\n- [tailwind-merge](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Ftailwind-merge)：^3.5.0\n- [tailwindcss](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Ftailwindcss)：^3.4.19\n- [tailwindcss-animate](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Ftailwindcss-animate)：^1.0.7\n- [tsx](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Ftsx)：^4.21.0\n- [typescript](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Ftypescript)：^6\n- [zustand](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fzustand)：^5.0.12\n\n\u003C!--- DEPENDENCIES_END --->\n\n## :coffee: 请我喝杯咖啡\n\n[\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FBuy_Me_A_Coffee-FFDD00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black\" width=\"200\" \u002F>](https:\u002F\u002Fwww.buymeacoffee.com\u002Fsanidhy \"请我喝杯咖啡\")\n\n## :rocket: 关注我\n\n[![关注我](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Ffollowers\u002Fsanidhyy?style=social&label=Follow&maxAge=2592000)](https:\u002F\u002Fgithub.com\u002Fsanidhyy \"关注我\")\n[![分享这个项目](https:\u002F\u002Fimg.shields.io\u002Ftwitter\u002Furl?style=social&url=https%3A%2F%2Fx.com%2F_sanidhyy)](https:\u002F\u002Fx.com\u002Fintent\u002Ftweet?text=Check+out+this+amazing+app:&url=https%3A%2F%2Fgithub.com%2Fsanidhyy%2Fduolingo-clone \"分享这个项目\")\n\n## :books: 了解更多\n\n想要深入了解 Next.js，请查看以下资源：\n\n- [Next.js 官方文档](https:\u002F\u002Fnextjs.org\u002Fdocs)：了解 Next.js 的功能和 API。\n- [学习 Next.js](https:\u002F\u002Fnextjs.org\u002Flearn)：一个交互式的 Next.js 教程。\n\n您还可以访问 [Next.js 的 GitHub 仓库](https:\u002F\u002Fgithub.com\u002Fvercel\u002Fnext.js\u002F)——欢迎您的反馈和贡献！\n\n## :page_with_curl: 在 Vercel 上部署\n\n部署 Next.js 应用最简单的方式，就是使用由 Next.js 创建者提供的 [Vercel 平台](https:\u002F\u002Fvercel.com\u002Fnew?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme)。\n\n更多详细信息，请参阅 [Next.js 部署文档](https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fdeployment)。\n\n## :star: 给个 star\n\n您也可以给这个仓库点个 star，让更多人知道并使用它。\n\n## :star2: Star 历史\n\n\u003Ca href=\"https:\u002F\u002Fstar-history.com\u002F#sanidhyy\u002Fduolingo-clone&Timeline\">\n\u003Cpicture>\n  \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fsanidhyy_duolingo-clone_readme_3f3fe2fba96a.png&theme=dark\" \u002F>\n  \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fsanidhyy_duolingo-clone_readme_3f3fe2fba96a.png\" \u002F>\n  \u003Cimg alt=\"Star History Chart\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fsanidhyy_duolingo-clone_readme_3f3fe2fba96a.png\" \u002F>\n\u003C\u002Fpicture>\n\u003C\u002Fa>\n\n\u003Cbr \u002F>\n\u003Cp align=\"right\">(\u003Ca href=\"#readme-top\">返回顶部\u003C\u002Fa>)\u003C\u002Fp>","# Lingo (Duolingo Clone) 快速上手指南\n\nLingo 是一个基于 Next.js 构建的交互式语言学习平台开源项目，功能类似多邻国（Duolingo），包含课程挑战、用户进度追踪、订阅系统及现代化 UI。\n\n## 环境准备\n\n在开始之前，请确保你的开发环境满足以下要求：\n\n*   **操作系统**: Windows, macOS 或 Linux\n*   **Node.js**: 建议安装最新 LTS 版本 (项目依赖较新)\n*   **包管理器**: 本项目推荐使用 **Bun** (需预先安装)，也可尝试 npm\u002Fpnpm (需注意依赖兼容性)\n*   **数据库**: PostgreSQL (推荐使用 [Neon](https:\u002F\u002Fneon.tech) 等云数据库，支持 Serverless)\n*   **第三方服务账号**:\n    *   **Clerk**: 用于用户认证和管理\n    *   **Stripe**: 用于处理支付和订阅 (开发模式可用测试密钥)\n    *   **Vercel**: (可选) 用于部署\n\n## 安装步骤\n\n### 1. 克隆项目\n将代码仓库克隆到本地：\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fsanidhyy\u002Fduolingo-clone.git\ncd duolingo-clone\n```\n\n### 2. 安装依赖\n使用 Bun 安装项目依赖（项目锁定文件为 `bun.lock`）：\n```bash\nbun install --legacy-peer-deps\n```\n> **提示**: 如果在国内下载依赖较慢，可配置 Bun 使用国内镜像源：\n> `bun config set registry https:\u002F\u002Fregistry.npmmirror.com`\n\n### 3. 配置环境变量\n在项目根目录创建 `.env` 文件，并填入以下配置信息。你需要提前在 Clerk、Neon 和 Stripe 的控制台获取相应密钥。\n\n```env\n# .env\n\n# 禁用 Next.js 遥测\nNEXT_TELEMETRY_DISABLED=1\n\n# Clerk 认证密钥 (从 Clerk Dashboard 获取)\nNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\nCLERK_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\n\n# Neon\u002FPostgreSQL 数据库连接 URI\n# 格式: postgresql:\u002F\u002F\u003Cuser>:\u003Cpassword>@\u003Chost>:\u003Cport>\u002Flingo?sslmode=require\nDATABASE_URL=\"postgresql:\u002F\u002F\u003Cuser>:\u003Cpassword>@\u003Chost>:\u003Cport>\u002Flingo?sslmode=require\"\n\n# Stripe API 密钥和 Webhook 秘密 (从 Stripe Dashboard 获取)\nSTRIPE_API_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\nSTRIPE_WEBHOOK_SECRET=whsec_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\n\n# 应用公共 URL (本地开发通常为 localhost:3000)\nNEXT_PUBLIC_APP_URL=http:\u002F\u002Flocalhost:3000\n\n# Clerk 管理员用户 ID (多个 ID 用逗号和空格分隔)\nCLERK_ADMIN_IDS=\"user_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"\n```\n\n### 4. 初始化数据库\n执行以下命令推送数据库架构并种子化初始数据（如课程挑战数据）：\n```bash\nbun run db:push && bun run db:prod\n```\n*注：`db:prod` 会运行 `scripts\u002Fprod.ts` 脚本写入初始数据。执行后请检查数据库确认数据已生成。*\n\n## 基本使用\n\n完成上述配置后，即可启动开发服务器。\n\n### 启动项目\n在终端运行：\n```bash\nbun dev\n```\n\n### 访问应用\n打开浏览器访问 `http:\u002F\u002Flocalhost:3000`。\n\n*   **注册\u002F登录**: 首次使用需通过 Clerk 组件注册账号。\n*   **管理员设置**: 确保你在 `.env` 中配置的 `CLERK_ADMIN_IDS` 对应当前登录的用户 ID，以便访问 `\u002Fadmin` 后台管理界面。\n*   **功能体验**: 你可以浏览课程、参与挑战、查看任务（Quests）以及模拟商店购买流程。\n\n现在你已经成功运行了 Lingo 项目，可以开始探索代码或进行二次开发了。","某初创教育团队希望快速搭建一个具备游戏化机制的在线语言学习平台，以验证其“碎片化学习 + 即时反馈”的教学理念，但面临开发周期紧、互动逻辑复杂的挑战。\n\n### 没有 duolingo-clone 时\n- **重复造轮子耗时久**：团队需从零编写用户进度追踪、连胜奖励（Streak）及 hearts 生命值系统等核心游戏化逻辑，预计耗费数周后端与前端联调时间。\n- **交互体验不统一**：缺乏现成的响应式组件库，导致移动端与桌面端的学习界面风格割裂，答题动画和反馈效果粗糙，难以留住用户。\n- **数据架构设计复杂**：需要手动设计数据库 Schema 来处理课程、关卡、挑战进度等多对多关系，极易出现数据一致性漏洞。\n- **部署运维门槛高**：缺少开箱即用的 Vercel 部署配置和环境变量模板，初期基础设施搭建占用了大量本应用于内容制作的精力。\n\n### 使用 duolingo-clone 后\n- **核心逻辑即插即用**：直接复用 `actions` 目录下的 `challenge-progress.ts` 和 `user-subscription.ts`，半天内即可跑通完整的用户成长与订阅体系。\n- **沉浸式 UI 瞬间落地**：利用内置的 `components` 组件（如 `feed-wrapper`、`quests`），迅速构建出色彩鲜艳、动效流畅的多端一致界面，大幅提升用户参与度。\n- **数据结构清晰可靠**：基于 `drizzle` ORM 和预定义的 `schema.ts`，直接获得经过验证的数据库模型，确保课程进度与用户状态准确同步。\n- **一键部署上线**：遵循标准的文件夹结构与 `.env` 配置指南，团队成员可轻松将项目部署至 Vercel，立即进行内部测试与演示。\n\nduolingo-clone 通过将成熟的游戏化学习架构开源化，帮助团队将原本数月的开发周期压缩至数天，使其能专注于核心教学内容的创新而非底层代码的堆砌。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fsanidhyy_duolingo-clone_ce31ff7e.png","sanidhyy","Sanidhya Kumar Verma","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Fsanidhyy_acfd00af.jpg","I code in JavaScript (mostly React), I am currently a high school student. It's not all fun, but I learn and make awesome things. I'm gonna make big footprint.","@Jaro-dev-studio","Sitapur, UP, India","sanidhya.verma12345@gmail.com",null,"https:\u002F\u002Fsanidhyy.name","https:\u002F\u002Fgithub.com\u002Fsanidhyy",[84,88,92],{"name":85,"color":86,"percentage":87},"TypeScript","#3178c6",98.5,{"name":89,"color":90,"percentage":91},"CSS","#663399",1.1,{"name":93,"color":94,"percentage":95},"JavaScript","#f1e05a",0.4,526,299,"2026-04-17T00:30:56","MIT",4,"Linux, macOS, Windows","未说明",{"notes":104,"python":105,"dependencies":106},"该项目是基于 Next.js 的 Web 应用，不使用 Python。必须安装 Bun 作为包管理器和运行时（使用 'bun install' 和 'bun dev'）。需要配置外部服务：Clerk (身份验证)、Neon (PostgreSQL 数据库) 和 Stripe (支付)。首次运行前需执行数据库迁移和数据种子脚本 ('bun run db:push && bun run db:prod')。","不需要 (基于 Node.js)",[107,108,109,110,111,112,113,114,115,116],"next>=16.2.1","react>=19.2.5","typescript>=6","@clerk\u002Fnextjs>=7.0.12","drizzle-orm>=0.45.1","stripe>=20.4.1","tailwindcss>=3.4.19","zustand>=5.0.12","@neondatabase\u002Fserverless>=1.0.2","bun (运行时)",[13,14,15],[119,120,121,122,65,123,124,125,126,127,128,129,130,131,132,133,134],"ai","css","drizzle","duolingo","html","interactive","js","modern-ui","modern-ux","mysql","next","nextjs","postgresql","react","tailwindcss","typscript","2026-03-27T02:49:30.150509","2026-04-18T22:34:15.034584",[138,143,148,153,158,163],{"id":139,"question_zh":140,"answer_zh":141,"source_url":142},40524,"运行 `npm run db:prod` 时提示关系（relation）不存在报错怎么办？","在执行生产环境脚本之前，必须先运行 `npm run db:push` 命令来推送数据库架构。维护者已更新 README 说明，正确的顺序是：先安装依赖，然后运行 `npm run db:push`，最后再运行 `npm run db:prod`。","https:\u002F\u002Fgithub.com\u002Fsanidhyy\u002Fduolingo-clone\u002Fissues\u002F8",{"id":144,"question_zh":145,"answer_zh":146,"source_url":147},40525,"如何解决 Drizzle Kit Studio 一直提示需要更新或无法连接数据库的问题？","可以尝试以下解决步骤：\n1. 清除缓存或之前的安装，尝试完全卸载后重新安装 Drizzle Kit Studio。\n2. 在终端运行 `drizzle --version` 手动验证版本。\n3. 检查配置，确保环境变量或连接配置中正确设置了 \"url\"、\"host\" 和 \"database\" 参数。\n4. 如果最新版有问题，可以尝试降级到 0.20.0 版本，该版本被其他用户证实可用。","https:\u002F\u002Fgithub.com\u002Fsanidhyy\u002Fduolingo-clone\u002Fissues\u002F11",{"id":149,"question_zh":150,"answer_zh":151,"source_url":152},40526,"如何在 Docker 容器中部署此项目？","维护者推荐参考一篇针对初学者的 Medium 文章，其中提供了将 Next.js 应用容器化的分步指南。你可以搜索标题为 \"Dockerize a Next.js App\" 的相关教程来获取具体的 Dockerfile 编写方法和运行指令。","https:\u002F\u002Fgithub.com\u002Fsanidhyy\u002Fduolingo-clone\u002Fissues\u002F20",{"id":154,"question_zh":155,"answer_zh":156,"source_url":157},40527,"在 Vercel 部署时数据库字符串显示无法连接，但 URL 是正确的，该如何排查？","首先检查 Vercel 仪表板中的日志以获取具体错误信息。如果日志提示 Clerk API 或密钥有误，请仔细核对是否复制粘贴了正确的 Clerk 密钥和 API 地址，确保环境变量配置无误。","https:\u002F\u002Fgithub.com\u002Fsanidhyy\u002Fduolingo-clone\u002Fissues\u002F25",{"id":159,"question_zh":160,"answer_zh":161,"source_url":162},40528,"挑战练习中图片不显示且报错 'Clerk: auth() was called but Clerk can't detect usage of authMiddleware()' 怎么办？","该错误通常与 Clerk 中间件配置有关。请确保：\n1. 在 Next.js 的 Middleware 文件中使用了 `authMiddleware()`。\n2. Middleware 的 matcher 配置包含了当前路由或页面。\n3. 如果项目使用了 `src` 目录，请确保 Middleware 文件位于该目录内。","https:\u002F\u002Fgithub.com\u002Fsanidhyy\u002Fduolingo-clone\u002Fissues\u002F23",{"id":164,"question_zh":165,"answer_zh":166,"source_url":167},40529,"使用 GitHub 登录部署后的网站时出现 'Unable to complete action at this time' 错误是什么原因？","这通常是由于认证提供商（如 Clerk）的配置问题或账户限制导致的。有用户反馈在使用邮箱注册时发现了相关线索，建议检查 Clerk 控制台中的用户数量限制或 OAuth 回调地址配置是否正确。","https:\u002F\u002Fgithub.com\u002Fsanidhyy\u002Fduolingo-clone\u002Fissues\u002F33",[]]