介紹

您準備好進入現實專案的程式設計世界了嗎?無論您是想要學習基礎知識的初學者,還是尋求具有挑戰性的新嘗試的經驗豐富的開發人員,這份包含 200 個專案創意的精選清單都適合每個人。每個專案都旨在提高您的技術技能並加深您對現代框架和工具的理解。從個人作品集到複雜的應用程式,這些專案涵蓋了廣泛的困難和技術,幫助您成為全面發展的開發人員。

此清單旨在為您提供全面的學習和實踐路徑,每個專案都包含詳細描述、建議的技術堆疊、關鍵功能、學習目標以及您對開源開發感興趣時的貢獻方式。開始建置,讓這些專案帶您踏上 Web 開發、行動應用程式、資料科學等領域的令人興奮的旅程!

您也可以訂閱我的 YouTube 頻道以了解全端專案實作。

Kishan Sheth YouTube 頻道

{% 嵌入 https://www.youtube.com/@KishanSheth21 %}


| #|專案名稱 |水平|連結至說明 |

| ---| -------------------------------------------------- - | ----------------- | ------------------------------------------ |

| 1 |帶有部落格的個人作品集|初學者 |查看詳情|

| 2 |電商平台|中級|查看詳情|

| 3 |社群媒體儀表板|高級初學者 |查看詳情|

| 4 |即時聊天應用程式 |中級|查看詳情|

| 5 |全端視訊串流平台|高級|查看詳情|

| 6 |具有看板和即時協作功能的任務管理應用程式 |高級|查看詳情|

| 7 |區塊鏈上的去中心化市場 |專家|查看詳情|

| 8 |人工智慧驅動的圖像和影片編輯器 |專家|查看詳情|

| 9 | SaaS 專案管理工具 |專家|查看詳情|

| 10 | 10天氣儀錶板 |初學者 |查看詳情|

| 11 | 11食譜分享應用程式|中級|查看詳情|

| 12 | 12即時多人遊戲|高級|查看詳情|

| 13 |帶有 Markdown 編輯器的部落格平台 |中級|查看詳情|

| 14 | 14具有任務管理功能的番茄計時器|高級初學者 |查看詳情|

| 15 | 15全端社群媒體平台|高級|查看詳情|

| 16 | 16帶有預算分析功能的費用追蹤器|中級|查看詳情|

| 17 | 17帶有類別過濾器的新聞聚合器|高級初學者 |查看詳情|

| 18 | 18加密貨幣作品集追蹤器 |專家|查看詳情|

| 19 | 19具有歷史的語言翻譯應用程式 |中級|查看詳情|

| 20 |人工智慧驅動的文件掃描器和分析儀 |高級|查看詳情|

| 21 | 21具有進度分析功能的習慣追蹤器 |初學者 |查看詳情|

| 22 | 22健身與運動計畫|中級|查看詳情|

| 23 | 23個人財務追蹤與預算|高級初學者 |查看詳情|

| 24 |圖書推薦系統|中級|查看詳情|

| 25 | 25螢幕分享視訊會議平台|高級|查看詳情|

| 26 | 26帶有日曆整合的每日日記應用程式 |高級初學者 |查看詳情|

| 27 | 27餐廳預約系統 |中級|查看詳情|

| 28 | 28與物聯網整合的健康資料儀表板 |專家|查看詳情|

| 29 | 29具有語音辨識功能的食譜共享應用程式 |高級初學者 |查看詳情|

| 30|人工智慧驅動的語言學習平台 |專家|查看詳情|

| 31 |帶有推薦的音樂播放清單產生器 |中級|查看詳情|

| 32 | 32職位申請追蹤器 |高級|查看詳情|

| 33 | 33即時加密貨幣交易模擬器 |專家|查看詳情|

| 34 | 34附提醒的待辦事項清單 |初學者 |查看詳情|

| 35 | 35帶有每月分析的個人預算追蹤器|中級|查看詳情|

| 36 | 36番茄工作法的任務計時器|高級初學者 |查看詳情|

| 37 | 37帶有加密功能的個人文件庫 |高級|查看詳情|

| 38 | 38具有自訂過濾器的職位搜尋引擎|專家|查看詳情|

| 39 | 39帶有食材購物清單的食譜盒|中級|查看詳情|

| 40 | 40點對點檔案分享應用程式 |高級|查看詳情|

| 41 | 41 AI驅動的電影推薦系統|專家|查看詳情|

| 42 | 42具有地圖整合功能的旅行行程規劃器 |中級|查看詳情|

| 43 | 43帶有線上閱讀追蹤器的圖書圖書館|高級初學者 |查看詳情|

| 44 | 44整合 GPS 的健身追蹤應用程式 |中級|查看詳情|

| 45 | 45具有人工智慧驅動的產品推薦的電子商務平台|專家|查看詳情|

| 46 | 46遠端團隊協作板|中級|查看詳情|

| 47 | 47具有富文本編輯功能的 Notes 應用程式 |高級初學者 |查看詳情|

| 48 | 48即時股票市場儀表板|專家|查看詳情|

| 49 | 49帶有情緒追蹤功能的心理健康日記|中級|查看詳情|

| 50 | 50物聯網家庭自動化儀表板 |高級|查看詳情|

| 51 | 51具有間隔重複功能的抽認卡應用程式 |初學者 |查看詳情|

| 52 | 52具備社群分享功能的部落格平台|中級|查看詳情|

| 53 | 53帶模板的模因生成器 |高級初學者 |查看詳情|

| 54 | 54多人問答遊戲 |高級|查看詳情|

| 55 | 55虛擬實境旅遊體驗|專家|查看詳情|

| 56 | 56具備人工智慧分析功能的個人理財顧問 |中級|查看詳情|

| 57 | 57具有情緒追蹤功能的虛擬日記|高級初學者 |查看詳情|

| 58 | 58擴增實境 (AR) 電子商務商店 |高級|查看詳情|

| 59 | 59具有情境理解功能的人工智慧聊天機器人 |中級|查看詳情|

| 60|區塊鏈上的去中心化投票系統 |專家|查看詳情|

| 61 | 61每日肯定應用程式 |初學者 |查看詳情|

| 62 | 62 Markdown 筆記應用程式 |高級初學者 |查看詳情|

| 63 | 63房地產上市平台|中級|查看詳情|

| 64 | 64使用 GraphQL 的動態資料儀表板 |高級|查看詳情|

| 65 | 65健身挑戰應用程式|中級|查看詳情|

| 66 | 66 IPFS 上的去中心化檔案儲存 |專家|查看詳情|

| 67 | 67個人圖書館目錄|高級初學者 |查看詳情|

| 68 | 68客戶關係管理 (CRM) 工具 |中級|查看詳情|

| 69 | 69具有人工智慧預測功能的股票交易模擬器 |專家|查看詳情|

| 70 | 70帶有收藏夾的食譜查找器 |初學者 |查看詳情|

| 71 | 71具有每月分析功能的預算規劃器|中級|查看詳情|

| 72 | 72極簡習慣追蹤器|高級初學者 |查看詳情|

| 73 | 73即時體育記分板|專家|查看詳情|

| 74 | 74個人理財和投資追蹤器|中級|查看詳情|

| 75 | 75帶有類別的任務管理器|高級初學者 |查看詳情|

| 76 | 76基於區塊鏈的文件認證系統|專家|查看詳情|

| 77 | 77帶有每週見解的情緒追蹤器 |高級初學者 |查看詳情|

| 78 | 78旅行計劃和費用追蹤|中級|查看詳情|

| 79 | 79具有分析功能的社群媒體儀表板 |高級|查看詳情|

| 80|聲控個人助理 |中級|查看詳情|

| 81 | 81極簡預算追蹤器|高級初學者 |查看詳情|

| 82 | 82自動化職位申請追蹤器 |專家|查看詳情|

| 83 | 83具有媒體上傳功能的部落格平台|中級|查看詳情|

| 84 | 84具有進度分析功能的目標追蹤器 |高級初學者 |查看詳情|

| 85 | 85具有拍賣機制的NFT市場|專家|查看詳情|

| 86 | 86具有日曆整合功能的學習規劃器 |中級|查看詳情|

| 87 | 87帶有表情符號的簡單聊天應用程式 |高級初學者 |查看詳情|

| 88 | 88人工智慧驅動的虛擬造型師 |高級|查看詳情|

| 89 | 89線上白板與協作繪圖|中級|查看詳情|

| 90 | 90冥想和放鬆應用程式|初學者 |查看詳情|

| 91 | 91智慧家庭自動化控制面板|專家|查看詳情|

| 92 | 92帶有類別的購物清單應用程式 |高級初學者 |查看詳情|

| 93 | 93帶有章節亮點的有聲讀物播放器 |中級|查看詳情|

| 94 | 94區塊鏈上的去中心化眾籌平台 |專家|查看詳情|

| 95 | 95每日行情產生器 |初學者 |查看詳情|

| 96 | 96帶有聊天功能的視訊串流平台|中級|查看詳情|

| 97 | 97簡單的食譜書|高級初學者 |查看詳情|

| 98 | 98去中心化身分驗證系統 |專家|查看詳情|

| 99 | 99具有 API 整合的音樂播放清單管理器 |中級|查看詳情|

| 100 | 100帶計時器的鍛鍊記錄器|高級初學者 |查看詳情|

| 101 | 101人工智慧驅動的履歷掃描器和工作匹配器 |高級|查看詳情|

| 102 | 102個人食譜產生器|中級|查看詳情|

| 103 | 103帶有情緒分析的每日日記|高級初學者 |查看詳情|

| 104 | 104即時股市交易模擬器|專家|查看詳情|

| 105 | 105可自訂的目標設定應用程式|中級|查看詳情|

| 106 | 106帶有日曆視圖的每日計劃|初學者 |查看詳情|

| 107 | 107帶有排行榜的測驗平台|中級|查看詳情|

| 108 | 108帶有警報的加密貨幣價格追蹤器 |高級|查看詳情|

| 109 | 109簡單的計時器和秒錶|高級初學者 |查看詳情|

| 110 | 110人工智慧驅動的語法檢查器 |專家|查看詳情|

| 111 | 111評分食譜分享平台 |中級|查看詳情|

| 112 | 112具有地理定位功能的天氣應用程式 |高級初學者 |查看詳情|

| 113 | 113具有地圖整合的房地產市場|高級|查看詳情|

| 114 | 114基於區塊鏈的文件公證平台|專家|查看詳情|

| 115 | 115具有簡單分析功能的費用追蹤器 |初學者 |查看詳情|

| 116 | 116帶有抽認卡的詞彙生成器|高級初學者 |查看詳情|

| 117 | 117去中心化社群媒體平台 |專家|查看詳情|

| 118 | 118協作任務管理工具|中級|查看詳情|

| 119 | 119習慣追蹤器|高級初學者 |查看詳情|

| 120 | 120基於人工智慧的健康分析儀表板 |專家|查看詳情|

| 121 | 121即時聊天支援小部件 |中級|查看詳情|

| 122 | 122日常運動計畫 |初學者 |查看詳情|

| 123 | 123點對點加密貨幣交易 |專家|查看詳情|

| 124 | 124活動管理和票務系統|中級|查看詳情|

| 125 | 125人工智慧驅動的銷售預測平台 |高級|查看詳情|

| 126 | 126倒數計時器應用程式|初學者 |查看詳情|

| 127 | 127具有多貨幣支持的個人預算工具|中級|查看詳情|

| 128 | 128人工智慧驅動的語言翻譯器 |專家|查看詳情|

| 129 | 129習慣日曆|高級初學者 |查看詳情|

| 130 | 130支援 Markdown 的協作筆記 |中級|查看詳情|

| 131 | 131具有隱私協議的去中心化投票應用程式 |專家|查看詳情|

| 132 | 132間隔重複的數字抽認卡|初學者 |查看詳情|

| 133 | 133適合小型企業的可客製化 CRM |中級|查看詳情|

| 134 | 134具有分析功能的自動化電子郵件行銷平台|專家|查看詳情|

| 135 | 135具有任務整合功能的番茄計時器 |高級初學者 |查看詳情|

| 136 | 136具有市場洞察力的個人投資儀表板|中級|查看詳情|

| 137 | 137人工智慧驅動的內容創作平台|高級|查看詳情|

| 138 | 138個人圖書館|初學者 |查看詳情|

| 139 | 139團隊即時協作平台 |中級|查看詳情|

| 140 | 140基於NFT的美術館平台|專家|查看詳情|

| 141 | 141人工智慧個人理財助理|中級|查看詳情|

| 142 | 142物聯網智慧園林管理系統|專家|查看詳情|

| 143 | 143帶有情緒追蹤器的個人日記|初學者 |查看詳情|

| 144 | 144帶通知的即時招聘板 |中級|查看詳情|

| 145 | 145個人營養追蹤器|高級初學者 |查看詳情|

| 146 | 146社群媒體內容調度器|中級|查看詳情|

| 147 | 147數位商品的去中心化市場 |專家|查看詳情|

| 148 | 148帶有分類物品的購物清單|初學者 |查看詳情|

| 149 | 149小型企業庫存管理系統|中級|查看詳情|

| 150 | 150人工智慧驅動的招募平台 |專家|查看詳情|

| 151 | 151附有每日提示的虛擬心情日記|初學者 |查看詳情|

| 152 | 152具有二維碼驗證的活動票務系統 |中級|查看詳情|

| 153 | 153人工智慧驅動的社群媒體情緒分析 |高級|查看詳情|

| 154 | 154帶條紋的極簡習慣追蹤器|初學者 |查看詳情|

| 155 | 155家庭協作購物清單|中級|查看詳情|

| 156 | 156具有人工智慧預測功能的即時加密貨幣作品集 |專家|查看詳情|

| 157 | 157個人食譜管理器|初學者 |查看詳情|

| 158 | 158可自訂的預算計劃|中級|查看詳情|

| 159 | 159去中心化借貸平台 |專家|查看詳情|

| 160 | 160帶有每日提醒的學習計劃表 |初學者 |查看詳情|

| 161 | 161即時流量監控儀表板 |中級|查看詳情|

| 162 | 162人工智慧驅動的鍛鍊計畫 |專家|查看詳情|

| 163 | 163簡單的工作申請追蹤器 |高級初學者 |查看詳情|

| 164 | 164具有用戶審核功能的社群論壇 |中級|查看詳情|

| 165 | 165人工智慧驅動的文件摘要器 |專家|查看詳情|

| 166 | 166與匯入/匯出聯繫的經理 |初學者 |查看詳情|

| 167 | 167基於人工智慧的股票交易助理|中級|查看詳情|

| 168 | 168區塊鏈供應鏈管理系統|高級|查看詳情|

| 169 | 169具有進度分析功能的鍛鍊記錄器 |初學者 |查看詳情|

| 170 | 170具有預測功能的個人理財儀表板|中級|查看詳情|

| 171 | 171帶有審計日誌的去中心化投票平台 |專家|查看詳情|

| 172 | 172個人電影觀看清單|初學者 |查看詳情|

| 173 | 173人工智慧簡歷分析器 |中級|查看詳情|

| 174 | 174基於區塊鏈的公司投票系統|專家|查看詳情|

| 175 | 175具有語音辨識功能的語言學習應用程式 |中級|查看詳情|

| 176 | 176以人工智慧為基礎的 SEO 內容分析工具 |專家|查看詳情|

| 177 | 177具有視訊聊天功能的虛擬學習群組平台|中級|查看詳情|

| 178 | 178數位食譜卡整理器|初學者 |查看詳情|

| 179 | 179帶有照片條目的個人日記|高級初學者 |查看詳情|

| 180 | 180具有分析功能的即時外匯交易平台 |專家|查看詳情|

| 181 | 181家庭食譜分享應用程式|中級|查看詳情|

| 182 | 182基於心情的音樂推薦|高級初學者 |查看詳情|

| 183 | 183使用甘特圖進行團隊專案管理|中級|查看詳情|

| 184 | 184人工智慧驅動的電子郵件分類工具 |專家|查看詳情|

| 185 | 185虛擬抽認卡學習工具|初學者 |查看詳情|

| 186 | 186具有即時評論功能的部落格平台|中級|查看詳情|

| 187 | 187保險理賠智能合約 |專家|查看詳情|

| 188 | 188目標設定和追蹤應用程式 |初學者 |查看詳情|

| 189 | 189與穿戴式裝置整合的健康資料追蹤器|中級|查看詳情|

| 190 | 190多幣種電子商務平台 |專家|查看詳情|

| 191 | 191極簡每日計劃|初學者 |查看詳情|

| 192 | 192附視訊課程的電子學習平台|中級|查看詳情|

| 193 | 193提供虛擬旅遊的房地產市場|專家|查看詳情|

| 194 | 194帶歌詞顯示的音樂播放器|高級初學者 |查看詳情|

| 195 | 195智慧家庭控制儀表板|中級|查看詳情|

| 196 | 196去中心化內容分享平台 |專家|查看詳情|

| 197 | 197活動倒數|初學者 |查看詳情|

| 198 | 198帶有照片比較的健身進度追蹤器 |中級|查看詳情|

| 199 | 199人工智慧驅動的法律文件分析工具 |專家|查看詳情|

| 200 | 200基於區塊鏈的供應鏈管理|專家|查看詳情|


{% youtube W3sOezpkGWI %}


1.初學者:帶有部落格的個人作品集<a name="1"></a>

  • 描述:建立一個帶有整合部落格的個人作品集網站,使用者可以在其中新增、編輯和刪除貼文。這是一個學習前端和後端開發基礎知識並獲得 React 和 Next.js 基礎經驗的優秀專案。

  • 技術堆疊:Next.js、Tailwind CSS、用於部落格的 Markdown、用於資料儲存的 Firebase。

  • 特徵

 - User-friendly UI with responsive design
 - Basic authentication for blog management
 - Markdown editor for creating blog posts
 - Dynamic routing for blog posts and pages
  • 學習路徑:HTML/CSS 基礎、React 元件、Next.js 路由、Firebase 基礎。

  • 開源焦點:提供初學者友善的開源專案,供新開發人員貢獻和學習。


2.中級:電商平台<a name="2"></a>

  • 說明:建立一個功能齊全的電子商務網站,其中包含產品清單、購物車和支付網關。該專案引入了更複雜的前端功能和後端集成,非常適合擴展 JS 和 React 技能。

  • 技術堆疊:React、Next.js、Node.js、MongoDB、用於支付的 Stripe、用於狀態管理的 Zustand。

  • 特徵

 - Product search, filter, and sorting
 - Shopping cart and checkout process
 - Payment integration with Stripe
 - User profiles with order history
  • 學習路徑:使用 Node.js 進行 API 開發、使用 Zustand 管理狀態以及整合支付系統。

  • 開源聚焦:旨在展示 Node.js 和 MongoDB 的全端架構,為電商開發提供有益的參考。


3.高級初學者:社群媒體儀表板<a name="3"></a>

  • 描述:一個輕量級的社群媒體儀表板,用戶可以在其中追蹤來自各種社群媒體平台的分析。該應用程式專注於 API 整合和非同步資料處理的前端技能。

  • 技術堆疊:React、Tailwind CSS、REST API(Twitter、YouTube、Instagram)。

  • 特徵

 - Data visualization with charts (using Chart.js)
 - OAuth authentication for connecting social accounts
 - Summary metrics for followers, views, likes, etc.
 - Dark mode and user-friendly UI
  • 學習路徑:RESTful API 處理、OAuth 基礎知識、資料視覺化。

  • 開源焦點:建立有關使用社群媒體 API 和處理使用者身份驗證的知識,非常適合學習前端開發的貢獻者。


4.中級:即時聊天應用程式<a name="4"></a>

  • 描述:開發具有即時訊息、頻道和私人訊息的聊天應用程式。使用者可以發送文件並建立群組,使其成為理解 websocket 和處理非同步事件的理想專案。

  • 技術堆疊:MERN(MongoDB、Express、React、Node.js)、用於即時訊息傳遞的 Socket.IO、用於身份驗證的 JWT。

  • 特徵

 - Real-time messaging and file sharing
 - Channel creation and group chats
 - Typing indicators and user online status
 - User authentication and profile management
  • 學習路徑:Socket.IO、JWT、MongoDB CRUD 和前端狀態管理。

  • 開源焦點:為開源聊天專案做出貢獻,並提供即時資料的實務經驗。


5.進階:全端視訊串流平台<a name="5"></a>

  • 描述:建立一個類似 YouTube 的影片串流平台,提供影片上傳、串流和推薦。該專案涵蓋先進的前端和後端概念,例如媒體處理、資料流和視訊編碼。

  • 技術堆疊:Next.js、Node.js、MongoDB、用於視訊串流的 HLS、用於儲存的 AWS S3。

  • 特徵

 - Video upload and encoding with HLS
 - Content search, recommendations, and categories
 - Commenting and likes/dislikes on videos
 - User authentication and video history tracking
  • 學習路徑:媒體儲存與處理、MongoDB聚合、CDN整合。

  • 開源焦點:介紹視訊串流、儲存和編碼技術的貢獻者,這對於媒體密集型應用程式很有價值。


6.高階:具有看板和即時協作的任務管理應用程式<a name="6"></a>

  • 描述:建立一個帶有看板的任務管理平台,支援使用者之間的即時協作。該應用程式應允許用戶分配任務、設定截止日期並協作追蹤進度。

  • 技術堆疊:React、Node.js、GraphQL、Apollo、WebSockets 用於即時協作。

  • 特徵

 - Task creation, assignment, and tracking
 - Real-time collaboration and notifications
 - Kanban board and drag-and-drop functionality
 - Team member roles and permissions
  • 學習路徑:GraphQL 和 Apollo、WebSockets、進階 React 狀態管理。

  • 開源焦點:作為協作生產力工具很有用,向貢獻者介紹了 GraphQL 和即時功能。


7.專家:區塊鏈上的去中心化市場<a name="7"></a>

  • 描述:開發一個去中心化市場,用戶可以在其中列出待售、競價或使用加密貨幣購買的商品。該專案提供區塊鏈、智慧合約和去中心化應用程式 (dApp) 的實務經驗。

  • 技術堆疊:Solidity、Next.js、用於錢包整合的 MetaMask、ethers.js、用於去中心化儲存的 IPFS。

  • 特徵

 - Smart contracts for item listings, bidding, and transactions
 - User wallet integration and profile management
 - Transaction history with blockchain integration
 - Secure storage for assets with IPFS
  • 學習路徑:Solidity 智慧合約、Web3 整合以及 IPFS 的去中心化儲存。

  • 開源焦點:支援區塊鏈和Web3開源社區,使貢獻者能夠學習去中心化市場的基礎知識。


8.專家:人工智慧驅動的影像和影片編輯器<a name="8"></a>

  • 描述:建立人工智慧驅動的圖像和影片編輯器,具有背景去除、顏色分級和臉部偵測等高級功能。該專案將人工智慧與媒體編輯的實際應用相結合。

  • 技術堆疊:Next.js、Python(用於 AI 模型)、TensorFlow.js、FFMPEG、用於後端處理的 AWS Lambda。

  • 特徵

 - Background removal and object detection
 - Filters and effects with real-time previews
 - Basic video editing tools (trimming, merging)
 - Export options and quality settings
  • 學習路徑:影像處理、TensorFlow.js、使用 FFMPEG 進行視訊處理。

  • 開源焦點:連結媒體編輯和人工智慧,為前端人工智慧提供複雜的、真實的專案。


9.專家:SaaS專案管理工具<a name="9"></a>

  • 描述:建立一個專案管理 SaaS 平台,該平台具有任務追蹤、專案時間表和協作工具,非常適合自由工作者和團隊。該專案引入了全面的 SaaS 架構、安全性和訂閱管理。

  • 技術堆疊:React、Next.js、Node.js、Prisma、PostgreSQL、用於訂閱管理的 Stripe、用於即時更新的 WebSockets。

  • 特徵

 - Multi-tenant setup with project workspaces
 - Real-time updates and notifications
 - Role-based access control (RBAC) for team management
 - Payment integration and subscription management with Stripe
  • 學習路徑:多租戶應用程式、支付系統和進階後端管理。

  • 開源焦點:開源的高價值 SaaS 專案,可用作訂閱制的服務的藍圖。


10.初學者:天氣儀表板<a name="10"></a>

  • 描述:建立一個天氣儀表板,顯示所選城市的即時天氣資訊和預報。非常適合學習 API 整合和資料顯示。

  • 技術堆疊:React、OpenWeatherMap API、Tailwind CSS。

  • 特徵

 - Search for weather by city
 - Display current temperature, humidity, and weather conditions
 - 7-day weather forecast
 - Dark mode support
  • 學習路徑:使用 Axios 進行 API 請求、基本狀態管理和元件結構。

  • 開源焦點:幫助新開發人員了解 API 驅動的應用程式,非常適合簡單的貢獻。


11.中級:食譜分享應用程式<a name="11"></a>

  • 描述:建立一個使用者可以瀏覽、新增和分享食譜的平台。使用者可以根據食材、菜餚和飲食偏好進行過濾。

  • 技術堆疊:Next.js、MongoDB、Tailwind CSS、用於驗證的 Firebase。

  • 特徵

 - Recipe listing and detailed view
 - User authentication and profile management
 - Search and filter by ingredients and dietary restrictions
 - Favorite and save recipes
  • 學習路徑:用於資料儲存、搜尋/過濾功能和身份驗證的 MongoDB。

  • 開源焦點:一個協作專案,貢獻者可以在其中加入功能或配方。


12.進階:即時多人遊戲<a name="12"></a>

  • 描述:建立一款即時多人遊戲,玩家可以加入房間、互動並在迷你遊戲中競爭。一個深入研究 WebSocket 和遊戲邏輯的有趣專案。

  • 技術堆疊:React、Node.js、Socket.IO、用於圖形的 Canvas API。

  • 特徵

 - Lobby and room management
 - Real-time player movement and actions
 - Game scoring and leaderboard
 - Chat within game rooms
  • 學習路徑:WebSockets、遊戲狀態管理和即時互動。

  • 開源焦點:促進對協作開源環境中的遊戲邏輯和即時系統的理解。


13.中級:帶有 Markdown 編輯器的部落格平台<a name="13"></a>

  • 描述:一個部落格平台,使用者可以使用 Markdown 編輯器撰寫、編輯和發布貼文。用戶可以查看和評論彼此的帖子。

  • 技術堆疊:Next.js、MongoDB、Markdown、Tailwind CSS。

  • 特徵

 - Rich text and Markdown editor for posts
 - Commenting on posts
 - User profile and post history
 - Like, share, and save articles
  • 學習路徑:使用 Markdown、使用 MongoDB 進行 CRUD 操作以及狀態管理。

  • 開源焦點:為建立附加功能的協作貢獻提供了絕佳的機會。


14.高級初學者:具有任務管理功能的番茄計時器<a name="14"></a>

  • 描述:番茄鐘計時器應用程式,用戶可以在其中追蹤他們的焦點會話並建立具有時間目標的任務。

  • 技術堆疊:React、用於持久性的本機儲存、Tailwind CSS。

  • 特徵

 - Timer for 25-minute focus sessions and 5-minute breaks
 - Task list with time estimates and completed tracking
 - Sound and notification reminders
 - Dark mode option
  • 學習路徑:React hooks、基於元件的 UI 和本機狀態管理。

  • 開源焦點:適合初學者的專案,允許其他人貢獻主題和任務統計等自訂功能。


15.高級:全端社群媒體平台<a name="15"></a>

  • 描述:建立一個功能齊全的社群媒體平台,用戶可以在其中建立個人資料、分享貼文、追蹤他人以及喜歡內容。

  • 技術堆疊:Next.js、Node.js、MongoDB、GraphQL、Tailwind CSS。

  • 特徵

 - User authentication and profile management
 - Post creation, editing, and deletion
 - Follower system and notifications
 - Real-time feed updates and comment section
  • 學習路徑:用於資料處理的 GraphQL、用於關聯式資料的 MongoDB 以及 API 安全性。

  • 開源焦點:非常適合貢獻各種模組,例如追蹤者係統、貼文分析或進階提要演算法。


16.中級:帶有預算分析的費用追蹤器<a name="16"></a>

  • 描述:建立一個應用程式,允許使用者記錄其支出、對其進行分類並分析一段時間內的支出趨勢。

  • 技術堆疊:React、用於儲存的 Firebase、用於資料視覺化的 Chart.js。

  • 特徵

 - Add, edit, and delete expense entries
 - Categorization of expenses
 - Monthly and yearly expense reports
 - Graphical charts for spending analysis
  • 學習路徑:CRUD 與 Firebase、資料視覺化和狀態管理。

  • 開源焦點:提供基礎財務應用程式,貢獻者可以在其中加入預算規劃、通知和其他自訂設定。


17.高級初學者:帶類別過濾器的新聞聚合器<a name="17"></a>

  • 描述:建立一個新聞聚合應用程式,從各種來源提取新聞,並允許用戶按技術、體育和健康等類別進行過濾。

  • 技術堆疊:React、新聞 API、Tailwind CSS。

  • 特徵

 - Real-time news updates by category
 - Search functionality for specific news
 - Responsive and visually engaging layout
 - Bookmark feature for saving articles
  • 學習路徑:API整合、非同步處理資料、動態過濾。

  • 開源焦點:使貢獻者能夠新增自訂項,例如新類別、文章推薦和主題設定。


18.專家:加密貨幣作品集追蹤器<a name="18"></a>

  • 描述:開發一個加密貨幣作品集追蹤器,用戶可以在其中監控和分析其持有的加密貨幣的價值。

  • 技術堆疊:React、Node.js、MongoDB、Coingecko API。

  • 特徵

 - Add and manage multiple cryptocurrencies
 - Real-time price updates and portfolio valuation
 - Graphs for value history and price alerts
 - Integration with major wallets like MetaMask
  • 學習路徑:加密 API 整合、處理財務資料和作品集分析。

  • 開源焦點:針對加密貨幣愛好者,它允許做出貢獻,例如支援新硬幣、詳細分析和錢包整合。


19.中級:具有歷史的語言翻譯應用程式<a name="19"></a>

  • 描述:建立一個翻譯應用程式,使用者可以將短語翻譯成多種語言並查看其翻譯歷史記錄。

  • 技術堆疊:Next.js、Google Translation API、歷史記錄本地儲存。

  • 特徵

 - Text input and translation to multiple languages
 - Translation history with timestamps
 - Option to save favorite translations
 - Simple and intuitive UI
  • 學習路徑:使用第三方API、處理非同步資料和本機儲存。

  • 開源焦點:非常適合貢獻者透過新的語言包、語音輸入或最喜歡的短語進行增強。


20.進階:人工智慧驅動的文件掃描器和分析儀<a name="20"></a>

  • 描述:建立一個文件掃描器應用程式,使用 OCR(光學字元辨識)掃描文件並擷取文字。 (可選)加入 AI 來對內容進行分類和分析。

  • 技術堆疊:React、Python(用於 OCR)、TensorFlow.js、用於後端處理的 AWS Lambda。

  • 特徵

 - Document scanning and text extraction
 - Text categorization using AI
 - Save scanned documents and export as PDF
 - Optical character recognition for multi-language support
  • 學習路徑:OCR 處理、整合 AI 進行文字分析和文件管理。

  • 開源焦點:提供人工智慧的真實用例,允許貢獻者加入對其他語言和圖像增強的支援。


21.初學者:有進度分析的習慣追蹤器<a name="21"></a>

  • 描述:建立一個習慣追蹤器,用戶可以在其中記錄日常習慣並查看一段時間內的進度。一個專注於資料持久性和分析的簡單專案。

  • 技術堆疊:React、本地儲存、用於視覺化的 Chart.js、Tailwind CSS。

  • 特徵

 - Track daily habits with simple toggles
 - Progress analytics with weekly and monthly overviews
 - Customizable habit names and icons
 - Dark mode support
  • 學習路徑:狀態管理、基礎資料持久化、圖表整合。

  • 開源焦點:非常適合初學者,允許貢獻者加入習慣條紋、提醒和類別分組。


22.中級:健身與鍛鍊規劃師<a name="22"></a>

  • 描述:建立一個健身應用程式,用戶可以在其中建立鍛煉程序、設定目標並追蹤進度。建構 CRUD 功能和理解資料建模的理想專案。

  • 技術堆疊:React、Firebase、Tailwind CSS 和用於動畫的 Framer Motion。

  • 特徵

 - Create, edit, and delete workout plans
 - Daily progress tracking and goal setting
 - Exercise library with searchable routines
 - Visual animations for a dynamic user experience
  • 學習路徑:Firebase 用於資料儲存、CRUD 作業和前端動畫。

  • 開源焦點:為新增練習、規劃建議或激勵功能提供協作基礎。


23.高級初學者:帶有預算的個人財務追蹤器<a name="23"></a>

  • 描述:建立一個用於追蹤日常支出、預算和分析支出的應用程式。專注於財務資料輸入和視覺化。

  • 技術堆疊:React、Firebase 或本機儲存、Chart.js、Tailwind CSS。

  • 特徵

 - Add, edit, and categorize expenses
 - Set budgets and track progress
 - Graphs for spending analysis by category
 - Notifications when nearing budget limits
  • 學習路徑:財務資料處理、圖表 Chart.js 和 Firebase 基礎。

  • 開源焦點:鼓勵高階分析、經常性費用和預算範本的貢獻。


24.中級:圖書推薦系統<a name="24"></a>

  • 描述:建立一個圖書推薦系統,使用者可以在其中搜尋圖書、閱讀評論並根據興趣獲得推薦。

  • 技術堆疊:Next.js、Node.js、MongoDB、Google Books API。

  • 特徵

 - Search for books and view details
 - User reviews and ratings
 - Recommendation engine based on user preferences
 - User profiles with favorite books
  • 學習路徑:API 整合、推薦演算法以及使用 MongoDB 進行資料持久化。

  • 開源焦點:非常適合新增新的建議功能、類型標記和使用者參與度分析。


25.高級:具有螢幕分享功能的視訊會議平台<a name="25"></a>

  • 描述:開發一個支援多方參與、螢幕分享和聊天功能的視訊會議平台。

  • 技術堆疊:React、Node.js、用於視訊的 WebRTC、Socket.IO 和用於儲存的 Firebase。

  • 特徵

 - Video and audio calls with multiple participants
 - Screen sharing and chat during calls
 - Mute/unmute and video toggle options
 - Session history and participant tracking
  • 學習路徑:用於視訊串流的 WebRTC、Socket.IO 的即時資料以及媒體管理。

  • 開源焦點:非常適合新增錄音功能、增強的聊天功能或會議分析。


26.高級初學者:帶有日曆集成的每日日記應用程式<a name="26"></a>

  • 描述:建立一個日記應用程式,允許使用者編寫每日條目並在日曆上查看它們。幫助資料處理和整合日曆。

  • 技術堆疊:React、用於儲存的 Firebase、日曆 API。

  • 特徵

 - Daily journal entry with rich text
 - Calendar view to access past entries
 - Mood tracking with each entry
 - Data export option to PDF
  • 學習路徑:日曆API整合、富文本管理、CRUD操作。

  • 開源焦點:允許貢獻者加入情緒分析、情緒分析或自訂主題。


27.中級:餐廳預約系統<a name="27"></a>

  • 描述:建立一個餐廳預訂系統,允許用戶預訂餐桌並即時查看空房情況。

  • 技術堆疊:Next.js、Node.js、MongoDB 和 WebSockets 用於即時更新。

  • 特徵

 - Book, modify, or cancel reservations
 - View available times and table options
 - Notifications for booking confirmations
 - Admin panel to manage reservations
  • 學習路徑:即時預訂、用於資料庫管理的 MongoDB 以及伺服器客戶端通訊。

  • 開源焦點:非常適合新增管理儀表板、餐廳分析或團體預約支援。


28.專家:與物聯網整合的健康資料儀表板<a name="28"></a>

  • 描述:建立一個儀表板,從 IoT 設備收集健康資料(例如心率、步數),並透過趨勢和分析將其視覺化。

  • 技術堆疊:Next.js、Node.js、Firebase、IoT API 整合和用於視覺化的 Chart.js。

  • 特徵

 - Real-time data sync with IoT health devices
 - Weekly and monthly health reports
 - Visualization of heart rate, sleep patterns, etc.
 - Health goals and progress tracking
  • 學習路徑:物聯網整合、即時資料處理和資料分析。

  • 開源焦點:支援資料匯出、異常讀數提醒、穿戴式裝置相容性等附加功能。


29.高級初學者:帶語音辨識的食譜共享應用程式<a name="29"></a>

  • 描述:建立一個食譜應用程式,用戶可以在其中加入、編輯和共享食譜,並加入獨特的語音辨識功能,實現免提烹飪。

  • 技術堆疊:React、Firebase、語音辨識 API、Tailwind CSS。

  • 特徵

 - Voice instructions for hands-free cooking
 - Recipe search and filter
 - Add and edit personal recipes
 - User reviews and ratings
  • 學習路徑:使用語音辨識、CRUD 操作和使用者參與。

  • 開源焦點:貢獻者可以加入新的美食、個人化推薦或與智慧廚房設備整合。


30.專家:人工智慧驅動的語言學習平台<a name="30"></a>

  • 描述:建立一個具有人工智慧驅動的語法檢查、發音指南和抽認卡的語言學習平台。

  • 技術堆疊:React、Node.js、TensorFlow.js、Firebase 和語音辨識 API。

  • 特徵

 - AI grammar checks for writing exercises
 - Pronunciation feedback and guide
 - Flashcards with spaced repetition
 - Weekly progress and goal tracking
  • 學習路徑:NLP 與 TensorFlow.js、間隔重複演算法和 API 整合。

  • 開源焦點:支援其他語言、新抽認卡或發音分析的開發。


31.中級:附有推薦的音樂播放清單產生器<a name="31"></a>

  • 描述:開發一款可根據心情、類型和使用者活動產生個人化播放清單的應用程式。與音樂 API 整合以取得資料。

  • 技術堆疊:React、Spotify API、Node.js、MongoDB。

  • 特徵

 - Mood and genre-based playlist generation
 - Add and save custom playlists
 - User activity-based recommendations
 - Integration with Spotify for playback
  • 學習路徑:與 Spotify 的 API 整合、資料過濾和情緒分析。

  • 開源焦點:非常適合增加新的音樂來源、播放清單主題和個人化推薦。


32.高級:工作申請追蹤器<a name="32"></a>

  • 描述:建立一個應用程式來追蹤工作申請,包括狀態、截止日期和網路聯絡人。有助於求職者保持井然有序。

  • 技術堆疊:Next.js、MongoDB、Tailwind CSS、Firebase。

  • 特徵

 - Add, edit, and organize job applications
 - Track statuses (e.g., applied, interviewed, offered)
 - Reminders for follow-ups and deadlines
 - Company research and notes
  • 學習路徑:資料庫CRUD操作、提醒通知、使用者檔案管理。

  • 開源焦點:鼓勵其他工具的開源開發,例如日曆整合或職位搜尋連結。


33.專家:即時加密貨幣交易模擬器<a name="33"></a>

  • 描述:建立一個模擬的加密貨幣交易平台,用戶可以根據即時市場資料使用虛擬貨幣進行交易。

  • 技術堆疊:Next.js、Node.js、Coingecko API、MongoDB。

  • 特徵

 - Real-time cryptocurrency price updates
 - Buy and sell cryptocurrencies with virtual funds
 - Track portfolio growth and performance
 - Leaderboard for top traders
  • 學習路徑:即時市場資料整合、模擬交易機制與作品集分析。

  • 開源焦點:開發交易演算法、風險分析工具或即時市場洞察的平台。


34.初學者:帶有提醒的待辦事項列表<a name="34"></a>

  • 描述:一個簡單的待辦事項清單應用程式,使用者可以在其中建立任務、設定截止日期和接收提醒。非常適合初學者學習 CRUD 和本地儲存。

  • 技術堆疊:React、本機儲存、通知 API、Tailwind CSS。

  • 特徵

 - Add, edit, and delete tasks
 - Set deadlines and receive notifications
 - Mark tasks as completed
 - Priority-based task sorting
  • 學習路徑:CRUD操作、資料持久化的本機儲存和通知。

  • 開源焦點:允許貢獻者新增顏色編碼優先順序、子任務和重複提醒等功能。


35.中級:每月分析的個人預算追蹤器<a name="35"></a>

  • 描述:一款預算應用程式,可幫助用戶按月對費用進行分類和分析。

  • 技術堆疊:React、Firebase、用於分析的 Chart.js、Tailwind CSS。

  • 特徵

 - Add expenses with category tags
 - Monthly analysis of spending habits
 - Set budgets for each category
 - Visual data representation with graphs
  • 學習路徑:用於 CRUD 的 Firebase、使用 Chart.js 進行資料視覺化以及前端元件管理。

  • 開源焦點:非常適合新增預測分析、超支警報或與銀行 API 整合等自訂功能。


36.高級初學者:番茄工作法的任務計時器<a name="36"></a>

  • 說明:一款生產力工具,可幫助使用者使用番茄工作法專注於任務,包括工作間隔和休息提醒。

  • 技術堆疊:React、本機儲存、Tailwind CSS、通知 API。

  • 特徵

 - 25-minute work intervals with 5-minute breaks
 - Notifications for work and break start/end
 - Task list with completion tracking
 - Timer reset and customization options
  • 學習路徑:使用 JavaScript 管理計時器、用於資料持久化的本機儲存體和 React hooks。

  • 開源焦點:鼓勵為功能擴展做出貢獻,例如可自訂的時間間隔、聲音通知和任務分析。


37.高級:加密個人文件庫<a name="37"></a>

  • 描述:一個安全的保管庫,使用者可以在其中上傳和儲存加密的個人文件以保護隱私。

  • 技術堆疊:React、Node.js、MongoDB、用於加密的 Crypto.js、用於儲存的 AWS S3。

  • 特徵

 - Upload, organize, and delete documents
 - End-to-end encryption for document security
 - User authentication and access control
 - Tagging and search functionality
  • 學習路徑:加密基礎、安全文件處理以及使用 AWS S3 進行儲存。

  • 開源焦點:透過演示加密和安全資料儲存為開源社群增加價值。


38.專家:具有自訂過濾器的職位搜尋引擎<a name="38"></a>

  • 描述:一個職位搜尋平台,可聚合職位清單並允許使用者按技能、地點和經驗等級篩選結果。

  • 技術堆疊:Next.js、Node.js、MongoDB、作業資料網路抓取。

  • 特徵

 - Advanced search and filter options
 - Bookmark and apply for jobs directly
 - User profiles with saved job searches
 - Email notifications for new listings
  • 學習路徑:網頁抓取、資料庫管理和資料過濾技術。

  • 開源焦點:鼓勵貢獻以整合新的工作委員會、完善過濾器和擴展通知功能。


39.中級:帶有食材購物清單的食譜盒<a name="39"></a>

  • 描述:一款應用程式,用戶可以保存最喜歡的食譜並根據所選成分生成購物清單。

  • 技術堆疊:React、Firebase、用於食譜的 Spoonaulous API、Tailwind CSS。

  • 特徵

 - Add, edit, and save recipes
 - Ingredient-based shopping list generator
 - Search for recipes by ingredients
 - Share recipes with friends
  • 學習路徑:API 整合、動態資料處理和狀態管理。

  • 開源焦點:貢獻者可以加入新功能,例如基於飲食的過濾、食譜評級和雜貨店整合。


40.高級:點對點文件共享應用程式<a name="40"></a>

  • 描述:一個去中心化的文件共享應用程式,使用者可以使用 WebRTC 直接與同伴共享文件。

  • 技術堆疊:React、Node.js、用於點對點連接的 WebRTC、Tailwind CSS。

  • 特徵

 - Secure file sharing between peers
 - File size limit and progress indicators
 - User authentication for private sharing
 - Chat feature during file transfer
  • 學習路徑:用於點對點、檔案處理和安全資料傳輸的 WebRTC。

  • 開源焦點:非常適合對改進去中心化系統、加入傳輸加密和增強安全功能感興趣的貢獻者。


41.專家:AI驅動的電影推薦系統<a name="41"></a>

  • 描述:建立一個電影推薦系統,可以學習用戶偏好並根據觀看歷史推薦電影。

  • 技術堆疊:React、Node.js、MongoDB、機器學習(Python 後端)、TensorFlow.js。

  • 特徵

 - User profiles with favorite genres
 - Personalized movie recommendations
 - Machine learning model for user preferences
 - Rating system and watchlist
  • 學習路徑:機器學習模型部署、使用者資料管理、個人化推薦。

  • 開源焦點:允許貢獻者增強推薦演算法,加入對新流派的支持,或開發高級過濾選項。


42.中級:具有地圖整合的旅行行程規劃器<a name="42"></a>

  • 說明:旅行規劃器,使用者可以使用互動式地圖建立、編輯和儲存旅行行程。

  • 技術堆疊:Next.js、Google 地圖 API、Firebase。

  • 特徵

 - Add and manage trip details and stops
 - Map integration for route planning
 - Itinerary sharing with friends
 - Budget estimation for trip expenses
  • 學習路徑:地圖 API 整合、Firebase 的 CRUD 以及資料視覺化。

  • 開源焦點:非常適合社區貢獻,例如天氣更新、建議景點和共享行程。


43.高級初學者:帶有線上閱讀追蹤器的圖書庫<a name="43"></a>

  • 描述:一個虛擬圖書庫,使用者可以在其中保存和追蹤每本書的閱讀進度。

  • 技術堆疊:React、本機儲存或 Firebase、Tailwind CSS。

  • 特徵

 - Save books and track reading progress
 - Rate and review completed books
 - Reading history and book recommendations
 - Search and filter by genre
  • 學習路徑:CRUD 功能、狀態管理和使用者個人化。

  • 開源焦點:允許貢獻加入圖書評分、閱讀目標和書籍推薦。


44.中級:整合 GPS 的健身追蹤應用程式<a name="44"></a>

  • 描述:建立一個應用程式,用戶可以在其中追蹤他們的鍛鍊情況,包括 GPS 追蹤的跑步或騎自行車訓練。

  • 技術堆疊:React、用於儲存的 Firebase、用於 GPS 的 Google 地圖 API。

  • 特徵

 - Track GPS-based activities (running, cycling)
 - Record distance, time, and calories burned
 - View route on a map with location markers
 - Set and track fitness goals
  • 學習路徑:GPS 追蹤、用於資料管理的 Firebase 和資料視覺化。

  • 開源焦點:貢獻可能包括新的鍛鍊類型、分析以及與健身設備的整合。


45.專家:人工智慧產品推薦的電子商務平台<a name="45"></a>

  • 描述:建立一個電子商務平台,提供由人工智慧支援的個人化推薦,包括購買和瀏覽歷史記錄。

  • 技術堆疊:Next.js、Node.js、MongoDB、用於人工智慧推薦的 TensorFlow.js、用於支付的 Stripe。

  • 特徵

 - Product catalog with categories
 - AI-based personalized recommendations
 - Cart and checkout with Stripe integration
 - User profiles and order history
  • 學習路徑:用於推薦、支付整合和資料庫管理的人工智慧。

  • 開源焦點:對於新增多供應商支援、進階分析和自訂推薦演算法很有用。


46.中級:遠端團隊協作板<a name="46"></a>

  • 說明:看板式專案管理板,供遠端團隊即時協作處理任務。

  • 技術堆疊:React、Node.js、Firebase、WebSockets 用於即時更新。

  • 特徵

 - Create and assign tasks to team members
 - Real-time board updates and notifications
 - Chat for team discussions
 - Analytics for team productivity
  • 學習路徑:即時更新、任務管理、團隊協作。

  • 開源焦點:允許社群新增進階功能,如甘特圖、任務優先順序和檔案共用。


47.高級初學者:具有富文本編輯功能的筆記應用程式<a name="47"></a>

  • 描述:一款帶有富文本編輯器的筆記應用程式,用於建立和組織筆記,類似於 Google Keep。

  • 技術堆疊:React、用於離線儲存的本機儲存、用於富文本的 Draft.js 或 Slate.js。

  • 特徵

 - Create, edit, and delete notes with rich text
 - Organize notes with tags and folders
 - Offline access with local storage
 - Search notes by content or tags
  • 學習路徑:使用富文本編輯器,

本機儲存、離線資料持久化。

  • 開源焦點:非常適合加入協作功能、不同主題或將筆記匯出為 PDF。

48.專家:即時股市儀表板<a name="48"></a>

  • 描述:開發即時股票市場儀表板,透過人工智慧驅動的預測顯示股票資料、趨勢和新聞。

  • 技術堆疊:React、Node.js、MongoDB、用於即時資料的 WebSocket、用於股票資料的 Alpha Vantage API、用於預測的 TensorFlow.js。

  • 特徵

 - Real-time stock price updates
 - Visual stock trends with AI predictions
 - Personalized watchlists
 - News integration for stock updates
  • 學習路徑:即時資料管理、AI預測模型、使用者自訂。

  • 開源焦點:金融科技的協作專案,為貢獻者提供加入新股票來源、進階分析和預測演算法的空間。


49.中級:帶有情緒追蹤功能的心理健康日記<a name="49"></a>

  • 描述:建立一個心理健康日記應用程式,用戶可以在其中記錄他們的情緒並查看一段時間內的趨勢。

  • 技術堆疊:React、用於資料儲存的 Firebase、用於情緒趨勢的 Chart.js。

  • 特徵

 - Daily mood logging with tags
 - Mood trend analysis over weeks and months
 - Add journal entries for each day
 - Private, secure data storage
  • 學習路徑:Firebase 用於儲存、資料分析和圖表視覺化。

  • 開源焦點:非常適合對心理健康感興趣的貢獻者,加入了情緒分析、資料導出和基於情緒的建議等功能。


50.進階:物聯網家庭自動化儀表板<a name="50"></a>

  • 描述:家庭自動化儀表板,用於管理和監控支援物聯網的設備,例如燈、恆溫器和安全裝置。

  • 技術堆疊:Next.js、Node.js、Firebase、IoT API、用於資料視覺化的 Chart.js。

  • 特徵

 - Connect and control IoT devices remotely
 - Real-time status updates and notifications
 - Energy usage reports and optimization tips
 - User profiles and access control for device management
  • 學習路徑:物聯網API整合、即時控制和使用者存取管理。

  • 開源焦點:允許社區為新的物聯網設備整合、家庭自動化場景和節能技巧做出貢獻。


51.初學者:間隔重複的抽認卡應用程式<a name="51"></a>

  • 描述:建立一個抽認卡應用程式,使用者可以在其中加入卡片並使用間隔重複來提高記憶保留率。

  • 技術堆疊:React、本機儲存、Tailwind CSS。

  • 特徵

 - Add and organize flashcards by category
 - Spaced repetition algorithm for study sessions
 - Track learning progress and review history
 - Notifications for daily review reminders
  • 學習路徑:CRUD 功能、間隔重複邏輯和本機儲存。

  • 開源焦點:貢獻者可以加入進度分析、不同的演算法和協作學習模式。


52.中級:具有社群分享的部落格平台<a name="52"></a>

  • 描述:一個部落格平台,用戶可以在其中撰寫文章、評論貼文以及在社群媒體上分享。

  • 技術堆疊:Next.js、MongoDB、Tailwind CSS、Firebase 進行身份驗證。

  • 特徵

 - Article creation, editing, and deletion
 - Commenting and liking on posts
 - User profiles with follower counts
 - Social media sharing for articles
  • 學習路徑:身份驗證、資料庫管理和社交媒體 API 整合。

  • 開源焦點:允許加入功能,例如文章推薦、趨勢標籤和增強的社交整合。


53.高級初學者:帶模板的模因生成器<a name="53"></a>

  • 描述:建立一個模因生成器,用戶可以在其中為圖像加入標題並共享它們。

  • 技術堆疊:React、用於圖片儲存的 Firebase、Tailwind CSS。

  • 特徵

 - Template selection and custom captioning
 - Image resizing and formatting
 - Save and share memes with links
 - Search and filter by popular meme templates
  • 學習路徑:影像處理、Firebase 儲存和使用者互動。

  • 開源焦點:使用者可以透過新增範本、共享功能或進階文字編輯來做出貢獻。


54.高級:多人問答遊戲<a name="54"></a>

  • 描述:開發一款即時多人問答遊戲,用戶可以在其中競爭問答題。

  • 技術堆疊:React、Node.js、Socket.IO、Firebase。

  • 特徵

 - Real-time question display and scoring
 - User lobby and chat during games
 - Timed questions and live leaderboards
 - Categories and difficulty levels for quizzes
  • 學習路徑:用於即時資料的 WebSocket、用於持久性的 Firebase 和計時器功能。

  • 開源焦點:支援新議題類別、難度自訂和遊戲內獎勵等貢獻。


55.專家:虛擬實境旅行體驗<a name="55"></a>

  • 描述:建立一個 VR 旅行應用程式,以 360° 視角模擬著名的旅遊目的地。

  • 技術堆疊:React、用於 3D 渲染的 Three.js、用於資料儲存的 Firebase。

  • 特徵

 - 360° views of famous landmarks
 - Information overlay for points of interest
 - Audio narration for immersive experiences
 - Favorites list to bookmark visited places
  • 學習路徑:使用 Three.js 進行 VR 開發、資料處理和多媒體整合。

  • 開源焦點:貢獻可以加入新位置、音訊指南和視覺增強功能,以獲得更豐富的 VR 體驗。


56.中級:具有人工智慧分析功能的個人理財顧問<a name="56"></a>

  • 描述:一款財務顧問應用程式,提供支出見解和儲蓄建議。

  • 技術堆疊:React、Node.js、MongoDB、用於 AI 的 TensorFlow.js 和用於資料視覺化的 Chart.js。

  • 特徵

 - Track income, expenses, and savings
 - AI-powered insights based on spending habits
 - Monthly budget recommendations
 - Progress tracking with graphs
  • 學習路徑:機器學習、財務資料管理和使用者個人化。

  • 開源焦點:允許額外的人工智慧模組、支出建議和增強的財務分析。


57.高級初學者:帶情緒追蹤的虛擬日記<a name="57"></a>

  • 描述:一個日記應用程式,允許用戶透過情緒追蹤來記錄條目。

  • 技術堆疊:React、Firebase、Tailwind CSS、Chart.js。

  • 特徵

 - Daily journal entry with mood indicators
 - Mood trend analysis over time
 - Secure storage and private access
 - Searchable journal history
  • 學習路徑:CRUD 與 Firebase、圖表整合和身份驗證。

  • 開源焦點:貢獻者可以新增基於情緒的見解、其他期刊主題或匯出選項。


58.高級:擴增實境(AR)電子商務商店<a name="58"></a>

  • 描述:建立一個具有 AR 功能的電子商務商店,用戶可以在自己的空間中預覽產品。

  • 技術堆疊:Next.js、Node.js、AR.js、用於資料儲存的 Firebase。

  • 特徵

 - Product catalog with AR previews
 - Cart and checkout with Stripe integration
 - Product recommendations and reviews
 - User profiles with order history
  • 學習路徑:用於擴增實境、電子商務流程和支付整合的 AR.js。

  • 開源焦點:非常適合開發 AR 動畫、新支付網關和改進的 AR 產品視圖等功能。


59.中級:具有上下文理解功能的人工智慧聊天機器人<a name="59"></a>

  • 描述:一個聊天機器人,可根據上下文提供回應,對客戶服務很有用。

  • 技術堆疊:React、Node.js、用於 NLP 的 Dialogflow、用於資料儲存的 Firebase。

  • 特徵

 - Context-aware conversation flow
 - Customizable responses and triggers
 - User feedback for response improvement
 - Analytics for chatbot interactions
  • 學習路徑:NLP 與 Dialogflow、資料處理和分析。

  • 開源焦點:鼓勵為新的聊天機器人腳本、分析功能和提高對話準確性做出貢獻。


60.高級:區塊鏈上的去中心化投票系統<a name="60"></a>

  • 描述:區塊鏈上的安全投票平台,用於私人和防篡改的選舉。

  • 技術堆疊:Solidity、React、MetaMask、以太坊、Web3.js。

  • 特徵

 - Voter registration and verification
 - Tamper-proof voting and result transparency
 - Election history and audit trails
 - Wallet-based voting system
  • 學習路徑:區塊鏈智能合約、去中心化應用程式和 Web3.js。

  • 開源焦點:貢獻可以集中在 UI 增強、整合新的投票方法和結果分析。


61.初學者:每日肯定應用程式<a name="61"></a>

  • 描述:建立一個每日肯定句應用程式,為用戶提供勵志名言。

  • 技術堆疊:React、本機儲存、Tailwind CSS。

  • 特徵

 - Daily affirmation notifications
 - Save favorite affirmations
 - Dark and light theme toggle
 - Customizable notification timing
  • 學習路徑:本機儲存、基本 UI 樣式和通知處理。

  • 開源焦點:非常適合新貢獻者加入更多肯定、個人化引用或語音引導肯定。


62.高級初學者:Markdown 筆記應用程式<a name="62"></a>

  • 描述:一款帶有 Markdown 支援和文字格式選項的筆記應用程式。

  • 技術堆疊:React、本機儲存、Tailwind CSS。

  • 特徵

 - Write and format notes in Markdown
 - Organize notes with tags and folders
 - Autosave and version history for notes
 - Export notes to PDF
  • 學習路徑:Markdown 格式、資料儲存和文字編輯。

  • 開源焦點:貢獻者可以新增主題、Markdown 擴充功能和更多匯出選項。


63.中級:房地產上市平台<a name="63"></a>

  • 描述:一個具有過濾、地圖整合和用戶收藏功能的房地產清單平台。

  • 技術堆疊:Next.js、MongoDB、Firebase、Google 地圖 API。

  • 特徵

 - Search and filter property listings
 - Map integration with location markers
 - User profiles with saved listings
 - Image galleries and property details
  • 學習路徑:API 整合、資料管理和 UI 元件。

  • 開源焦點:非常適合加入新的過濾器、租賃或購買選項以及其他地圖整合。


64.進階:使用 GraphQL 的動態資料儀表板<a name="64"></a>

  • 說明:動態資料儀表板,允許使用者使用 GraphQL 從多個 API 取得、過濾和視覺化資料。

  • 技術堆疊:Next.js、Apollo GraphQL、MongoDB、Chart.js。

  • 特徵

 - GraphQL-based data fetching and filtering
 - Customizable widgets for data visualization
 - Data export options (CSV, PDF)
 - User authentication for saving dashboards
  • 學習路徑:GraphQL、資料視覺化和 API 整合。

  • 開源焦點:貢獻者可以新增新的資料來源、圖表類型或匯出格式。


65.中級:健身挑戰應用程式<a name="65"></a>

  • 說明:一款供用戶參加健身挑戰、記錄進度並賺取積分的應用程式。

  • 技術堆疊:React、Firebase、Tailwind CSS、Chart.js。

  • 特徵

 - Join and track progress in fitness challenges
 - Earn points for completed activities
 - Leaderboard for top participants
 - Personalized goals and rewards
  • 學習路徑:狀態管理、使用者互動和排行榜建立。

  • 開源焦點:鼓勵為挑戰客製化、用戶徽章和社群獎勵做出貢獻。


66.專家:IPFS上的去中心化文件存儲<a name="66"></a>

  • 描述:一個文件儲存平台,利用 IPFS 進行安全和去中心化的文件儲存。

  • 技術堆疊:React、IPFS、MetaMask、Web3.js、用於元資料儲存的 Firebase。

  • 特徵

 - Upload files to IPFS with content hashing
 - User authentication via MetaMask
 - Encrypted file storage and retrieval
 - Activity log for file actions
  • 學習路徑:IPFS、區塊鏈整合和加密。

  • 開源焦點:支援額外的加密層、存取控制和增強的元資料處理等貢獻。


67.高級初學者:個人圖書館目錄<a name="67"></a>

  • 描述:個人圖書館目錄,使用者可以在其中記錄、組織和審查他們擁有的書籍。

  • 技術堆疊:React、本機儲存或 Firebase、Tailwind CSS。

  • 特徵

 - Add and organize books with custom tags
 - Search by title, author, or genre
 - Add ratings and reviews for each book
 - Book tracking for read/unread status
  • 學習路徑:CRUD 操作、資料組織和搜尋功能。

  • 開源焦點:非常適合新增進階濾鏡、多用戶支援或書籍推薦功能。


68.中級:客戶關係管理(CRM)工具<a name="68"></a>

  • 描述:為小型企業建立 CRM 工具來管理客戶、追蹤銷售線索和分析銷售績效。

  • 技術堆疊:用於身份驗證的 React、Node.js、MongoDB、Firebase。

  • 特徵

 - Customer and lead management with notes
 - Sales pipeline tracking and status updates
 - Analytics for sales and customer interactions
 - Multi-user access with role-based permissions
  • 學習路徑:資料處理、CRUD 和分析。

  • 開源焦點:鼓勵對進階分析、電子郵件整合和自訂報告功能做出貢獻。


69.專家:具有人工智慧預測的股票交易模擬器<a name="69"></a>

  • 描述:開發一款股票交易模擬器,根據市場走勢進行人工智慧預測,讓用戶練習交易。

  • 技術堆疊:Next.js、Node.js、MongoDB、TensorFlow.js、股市 API。

  • 特徵

 - Buy and sell stocks with virtual funds

 - AI-powered market trend predictio

共有 0 則留言