🏞️5款精美的开源Web应用，供你学习和汲取灵感🙇‍♀️💡

正如标题所示，本文将介绍一些开源 Web 应用程序，您可以从中学习并以此为起点开展下一个项目。请务必阅读到最后，因为那里有惊喜彩蛋等着您！

在正式开始之前，先给大家一些忠告（希望有用😅）：

（开源）榜样的重要性

从零开始启动一个新项目时，最有帮助的做法之一就是选择一个或多个榜样。例如，如果你正在开发一款新的效率应用，可以参考 Trello 或 Asana 等产品。当然，你的应用肯定不会完全相同，你可能也考虑了一些核心差异来使你的应用独一无二，但其中仍然会有很多共通的概念和机制，你肯定不想重复发明轮子。

即使你的榜样是一款闭源应用，仅仅通过观察它的实际应用，你仍然可以从中获得很多价值——设计元素、用户界面、用户旅程和使用的术语……

但现在想象一下，如果你选择学习的应用是开源的，而且你可以在 GitHub 上轻松访问它的完整源代码——这将开启一个全新的世界！你不再只是从“外部”观察应用的工作原理，猜测其底层机制，而是可以看到每一个细节，理解每一个决策。架构、部署、API 设计、使用的库和算法——所有的一切都一目了然！

注意规模（即不要过度设计）

还有一点需要注意的是你的项目目前所处的阶段。下面我们将看到一些开源 SaaS 应用的例子，从独立开发者的“周末速成”项目到企业级 Web 平台，应有尽有。虽然拥有数百万用户的项目可能是一个绝佳的学习资源，但请记住，他们的做法并非你必须完全照搬。由于规模庞大，用户数量惊人，他们的架构和设计决策通常会更加复杂。如果你刚刚起步，最好坚持使用最简单（但仍然可靠）的方法，直到你需要更高级的方案为止。

从现在开始，对于我们提到的每个应用程序，我们将使用“T恤尺码”方法（S、M、L……）来让您大致了解其规模和复杂程度，包括功能和用户数量。

现在，前言完毕，让我们一起来看看一些你可以立即开始学习的优秀开源应用程序：

CoverLetterGPT——人工智能驱动的SaaS的完美起点

💾 源代码：https://github.com/vincanger/coverlettergpt
👕 尺寸：S
🛠️ 技术栈：Chakra UI、React、Node.js 和 Prisma，由Wasp提供技术支持

CoverLetterGPT.xyz是每个独立开发者的梦想——它是一款基于 GPT 算法的 SaaS 服务，完全开源，最重要的是，它是一款真正有人每天使用并付费的真实产品！只需提供您的简历和职位描述，这款工具就能生成一份专业撰写的求职信。之后，您还可以进一步调整每个段落的语气，或者手动编辑。

它非常适合学习，因为它规模不大，架构也很简单，但它具备应用程序可能需要的所有功能——社交身份验证（Google）、定时任务、文件上传、GPT 集成、通过 Stripe 集成支付，甚至通过比特币支付！

CoverLetterGPT 使用 React、Node.js 和 Prisma 构建，并由Wasp 框架提供支持，该框架负责所有底层工作并消除大量样板代码。最棒的是，您只需运行一个 CLI 命令即可在准备就绪后免费部署您的应用程序：wasp deploy。

提示：Wasp 团队最近发布了OpenSaaS，这是一个完全免费开源的 React 和 Node.js 样板启动器。它包含了上述所有内容，外加 Tailwind、管理后台、落地页、博客等等。点击此处查看，更快上手。

Supabase Studio——一款精美的控制面板🖼️

GIF

💾 源代码：https://github.com/supabase/supabase/tree/master/apps/studio
👕 大小：M/L
🛠️ 技术栈： Next.js (React)、Tailwind

Supabase是一个知名的开源项目，其核心是用 Elixir 编写的。但由于本文重点关注 Web 应用程序，我们将着重介绍Supabase Studio——一个可以查看和管理所有项目的控制面板。它本身就是一个杰作，而且也是完全开源的！

该设计采用 Tailwind 定制，其中包含许多您可能希望在自己的项目中重复使用的元素——用户管理、表格、列表等等。它还集成了用于编写 SQL 查询的 AI，而且效果出奇地好。

Papermark——DocSend的开源替代方案✉️

💾 源代码：https://github.com/mfts/papermark
👕 尺寸：M
🛠️ 技术栈：Next.js (React)、Tailwind、Prisma

Papermark近期备受用户好评，尤其以其简洁的设计和直观的界面而闻名。虽然外观看似简单，但这款应用却蕴含着丰富的功能，确保一切运行流畅：文件上传、邮件发送、内置分析和自定义域名……

如果你正在构建一个涉及大量文档管理和用户协作的系统，那么这绝对是一个值得你关注的项目。

Crowd.dev - 基于 Vue 构建的开发者社区数据平台📊👩‍💻

💾 源代码：https://github.com/CrowdDotDev/crowd.dev
👕 大小：M
🛠️ 技术栈： Vue、Node.js

Crowd.dev是 GitHub 上冉冉升起的新星之一，它是一个用于监控社区活动的平台，无论是在 Slack 还是 Discord 上。如果您运营着自己的开发者社区，那么像这样的工具必不可少，它可以帮助您了解社区动态以及哪些成员最为活跃。

它在仪表盘方面功能强大，但它的另一大优势在于集成——如果您正在构建一个需要从外部来源摄取和处理大量数据的应用程序，那么这就是您的理想之选。如果您是 Vue 爱好者，那就更好了，因为这个项目就是用 Vue 构建的！

Habitica - 作为角色扮演游戏的习惯追踪器🐲⚔️

💾 源代码：https://github.com/HabitRPG/habitica
👕 尺寸：L
🛠️ 技术栈： Vue、Bootstrap、SaaS、Node.js、MongoDB

Habitica是我最近见过的最酷的网页应用之一（他们也有iOS和安卓应用）——它通过角色扮演游戏帮助你管理生活、任务和习惯！想象一下类似Trello的看板，但你完成的每个任务都会获得经验值和金币，你甚至可以和朋友组队完成任务。

Habitica 已经走过了 10 年，凭借 Vue、Node.js/Express 和 MongoDB 这套经典技术栈，它经受住了时间的考验，依然表现出色。如果你想了解如何构建丰富且交互性强的用户界面，以及运行如此大规模的项目需要怎样的架构，那么这款应用绝对值得一看。说不定，你最终也会成为一名 Habitica 的一员！

🏆 额外福利🏆 Appflowy - 用 Rust 和 Flutter 开发的 Notion 替代方案 🤯

💾 源代码：https://github.com/AppFlowy-IO/AppFlowy
👕 大小：M
🛠️ 技术栈： Flutter、Rust

既然你都看到这里了，那就值得一份特别的礼物！它虽然不是网页应用，但实在太酷了，我忍不住要推荐给大家——它是一款用 Rust 和 Flutter 构建的 Notion 替代品（功能强大到可以当笔记用）！由于它采用本地优先的设计，用户体验极其流畅，而且它还能将所有内容同步到云端（如果你愿意，也可以自行托管）。

如果你一直在尝试使用 Rust，并且正在寻找一个可以日常使用且愿意贡献代码的项目，那么 Appflowy 或许是你的理想之选。它包含了从数据存储到业务逻辑和用户界面的所有功能，所有组件都集成在一个软件包中，方便你学习并探索自己最感兴趣的部分。

就是这样！我很想收到你的消息🫵

今天的内容就到这里啦（放下麦克风），非常感谢大家的阅读！希望对大家有所帮助或者让大家觉得有趣。

在撰写本文的过程中，我遇到了很多开源网络应用程序，要从中选出 5 个真是太难了。

现在，我很想听听你们的看法——你们最喜欢的开源应用是什么？你们又是如何使用它们的呢？请在下方评论区留言👇

谢谢，下次见！👋