阿川私房教材：學程式，拿 offer！

63 個專案實戰，直接上手！
無需補習，按步驟打造你的面試作品。

立即解鎖你的轉職秘笈

小編精選 - 技術文章翻譯 · 01月21日

🏞️5 個可供學習並獲得靈感的開源網路應用程式🙇‍♀️💡

如標題所示，在這篇文章中，我們將介紹您可以學習並用作下一個專案起點的開源 Web 應用程式。堅持到最後，因為那裡有超酷的獎勵等著你！

在我們開始討論之前，先說幾句智慧之言（希望如此）：

（開源）榜樣的重要性

你很漂亮

從頭開始一個新專案時，您可以做的最有幫助的事情之一就是選擇一個或多個角色模型。例如，如果您正在建立一個新的生產力應用程式，您可能會關注Trello 等產品或體式。當然，您的應用程式不會相同，並且您可能會想到一些使您的應用程式獨一無二的核心差異，但仍然會有很多您不想重新發明的共享概念和機制。

即使您的角色模型是一個閉源應用程式，您仍然可以透過在野外觀察它來獲得很多價值 - 設計元素、UI、用戶旅程和使用的術語，...

但是現在想像一下，如果您決定學習的應用程式是開源的，並且您可以輕鬆地在 GitHub 上存取其完整原始程式碼 - 這將打開一個全新的可能性世界！ 接下來只需從“外面」並猜測幕後發生了什麼，現在您可以看到每一個細節並了解所做的每一個決定。架構、部署、API 設計、庫和使用的演算法 - 一切都在那裡供您查看！

注意規模（也就是不要過度設計）

另一件需要記住的事情是您的專案目前所處的階段。下面，我們將看到開源 SaaS 應用程式的不同範例，從獨立駭客、「週末建置」副專案到企業級 Web 平台。儘管您可能會發現擁有數百萬用戶的專案是一個令人驚嘆的學習資源，但請記住，並非他們所做的一切都是您必須嚴格遵循的。由於他們每天遇到的用戶規模和數量龐大，他們的架構和設計決策通常會更加複雜。如果您剛開始，最好堅持使用最簡單（但仍然合理）的方法，直到您希望需要更高級的方法。

從現在開始，對於我們提到的每個應用程式，我們將使用“T 卹尺寸”方法（S、M、L...），讓您大致了解其尺寸和複雜性（無論是在功能還是功能方面）。使用者。

現在，前言結束了，讓我們一起來看看一些令人驚嘆的開源應用程式，您可以立即開始學習：

樂趣現在開始

CoverLetterGPT - 人工智慧驅動的 SaaS 的完美起點

💾 原始碼：https://github.com/vincanger/coverlettergpt

👕 尺寸：S

🛠️ Stack：Chakra UI、React、Node.js 和 Prisma，由 Wasp 提供支持

CoverLetterGPT.xyz 是每個獨立駭客的夢想- 它是一個由GPT 支援的SaaS，完全開源，最重要的是，它是人們每天使用並付費的真實產品為了！根據您的履歷和職位描述，該工具將產生一封專業撰寫的求職信。然後，您可以進一步調整每個段落的語氣或手動編輯。

它非常適合學習，因為它不太大，架構也很簡單，但它具有應用程式中可能需要的所有功能 - 社交身份驗證 (Google)、cron 作業、文件上傳、GPT 集成、透過 Stripe 進行支付集成，甚至可以透過比特幣付款！

CoverLetterGPT 由 React、Node.js 和 Prisma 製成，由 Wasp 框架提供支持，它負責所有管道並刪除大量樣板檔案。 最好的部分是，當您準備好時，可以透過執行單一 CLI 命令來免費部署應用程式：「wasp deploy」。

提示：Wasp 團隊最近發布了 OpenSaaS，一個完全免費且開源的 React 和 Node.js 樣板啟動器。它包含提到的所有內容 + Tailwind、管理儀表板、登陸頁面、部落格等。在此處查看以更快地開始使用。

Supabase Studio - 儀表板傑作🖼️

Supabase 工作室

💾 原始碼：https://github.com/supabase/supabase/tree/master/apps/studio

👕 尺寸：M/L

🛠️ 堆疊： Next.js (React)、Tailwind

Supabase 是一個著名的開源專案，其核心是用 Elixir 編寫的。但是，由於我們在本文中專注於 Web 應用程式，因此我們將看一下 Supabase Studio - 一個儀表板，您可以在其中查看和管理所有專案。它本身就是一部傑作，而且完全開源！

該設計是使用 Tailwind 定制的，您可能希望在自己的專案中重複使用許多元素 - 用戶管理、表格、列表等。它還有自己的 AI 集成，用於編寫 SQL 查詢，效果出奇的好。

Papermark - 開源 DocSend 替代方案 ✉️

papermark_banner

💾 原始碼：https://github.com/mfts/papermark

👕 尺寸：M

🛠️ 堆疊：Next.js (React)、Tailwind、Prisma

Papermark 最近受到社群的廣泛喜愛，尤其是其簡潔的設計和直覺的介面。雖然從外觀上看起來很簡單，但該應用程式包含許多功能，使一切順利執行：文件上傳、電子郵件發送、內建分析和自訂網域...

如果您正在建立涉及大量文件管理和使用者協作的專案，這絕對是您應該考慮的專案。

Crowd.dev - 開發社群資料平台，使用 Vue 製作 📊👩‍💻

crowd_dev_banner

💾 原始碼：https://github.com/CrowdDotDev/crowd.dev

👕 尺寸：M

🛠️ 堆疊： Vue、Node.js

Crowd.dev 是 GitHub 最新的後起之秀之一 - 它是一個用於監控社區活動的平台，無論是在 Slack 還是 Discord 上。如果您正在經營自己的開發者社區，那麼這樣的工具是必須具備的，以便了解正在發生的事情以及最活躍的成員是誰。

它在儀表板方面提供了很多功能，但它的另一個強項是集成 - 如果您正在建置一個從外部源獲取和處理大量資料的應用程式，那麼這是您的首選角色模型。如果你是 Vue 愛好者，那就加分了，因為這個專案就是用它製作的！

Habitica - 作為角色扮演遊戲的習慣追蹤器🐲⚔️

habitica_banner

💾 原始碼：https://github.com/HabitRPG/habitica

👕 尺寸：L

🛠️ 堆疊： Vue、Bootstrap、SAAS、Node.js、MongoDB

Habitica 是我見過的最酷的網頁應用程式之一（他們也有 iOS 和 Android 應用程式） - 它可以幫助您透過角色扮演遊戲！想像 Trello 這樣的看板，但對於您完成的每項任務，您都可以獲得 XP 和金幣，甚至可以與朋友組隊接受任務。

Habitica 已經存在 10 年了，它通過 Vue、Node.js/Express 和 MongoDB 的經典堆疊完美地經受住了時間的考驗。 如果您想了解建立了多麼豐富的互動式 UI，以及執行這種規模的專案需要什麼樣的架構，那麼這個應用程式絕對值得一試。誰知道，您甚至可能最終成為居住自己！