projectlearn project based learning
1.0.0
教程很棒，但建立專案是最好的學習方式。進行基於專案的學習並以正確的方式學習程式碼！
ProjectLearn 提供了一個精選的專案教學列表，學習者可以在其中從頭開始建立應用程式。它們分為不同的類別，即網頁開發、行動開發、遊戲開發、機器學習、深度學習和人工智慧。
此清單包含許多熱門語言和技術的專案教程，包括 ReactJS、NodeJS、VueJS、Flutter、React Native、.NET Core、Unity、TensorFlow、OpenCV、Keras 等。
若要對此清單做出貢獻，請造訪 CONTRIBUTE.md 以了解更多詳細資訊:)
| 專案 | 科技 | 關聯 |
|---|---|---|
| 在 React.JS 中建置和部署令人驚嘆的 3D Web 開發人員組合 Three.js 教學課程 | vite、React、JavaScript、Three.js、Tailwind | 關聯 |
| 帶有 Next.Js Drizzle ORM 和 Cryptomus Payments 的全端快速商務應用程式 | Next.js、React、JavaScript、Drizzle ORM、Cryptomus | 關聯 |
| 使用管理儀表板建立全端電子商務商店 | Next.js、React、JavaScript、Tailwind、Stripe | 關聯 |
| 建構全端 Uber 克隆 | Next.js、React、JavaScript、Tailwind、Stripe | 關聯 |
| 使用 React 建置和部署全端社交媒體應用程式 | React、JavaScript、HTML、CSS、Tailwind | 關聯 |
| 使用 HTML CSS 和 JavaScript 建立您自己的 ChatGPT 克隆 | HTML、CSS、JavaScript、OpenAI API、API | 關聯 |
| 使用 NextJS 建立 Reddit 2.0 克隆 | React、SQL、Supabase、Next.js、GraphQL | 關聯 |
| 使用 React 建立 YouTube 克隆 | Express、節點、JavaScript、HTML、CSS | 關聯 |
| 使用 JavaScript 圖表庫建立發散長條圖 | JavaScript、HTML、CSS | 關聯 |
| 透過建立卡片組件來學習 CSS 基礎知識 | HTML、CSS | 關聯 |
| 創建無伺服器迷因即服務 | JavaScript、Rust、CSS、HTML | 關聯 |
| 天氣預報網站 | JavaScript、HTML、CSS、React | 關聯 |
| 連結縮短網站 | JavaScript、Vue、HTML、CSS、React | 關聯 |
| 抄襲檢查網站 | Python、引導程式 | 關聯 |
| 建立自訂 Google 地圖主題 | JavaScript、HTML、CSS | 關聯 |
| 使用 JavaScript 建立超級瑪利歐主題的 Google 地圖 | JavaScript、HTML5、CSS3 | 關聯 |
| 建立社區驅動的交付應用程式 | Python、Django、PostgreSQL、JavaScript、Mapbox | 關聯 |
| 建立本地商店搜尋和發現應用程式 | Python、Django、PostgreSQL、JavaScript、Mapbox | 關聯 |
| 使用 React.js 和 Node.js 的中型克隆 | 反應、節點、CSS3、JavaScript、HTML5 | 關聯 |
| 使用 React JS 克隆 Facebook | 反應、Firebase、CSS3、JavaScript、HTML5 | 關聯 |
| JavaScript30 - 30 天普通 JS 程式設計挑戰 | JavaScript | 關聯 |
| 使用 Gatsby 和 GraphCMS 繪製旅遊願望清單地圖 | Gatsby、Leaflet、GraphCMS、HTML、CSS | 關聯 |
| 使用 Vue.js 進行記憶卡遊戲 | Vue、JavaScript、HTML、CSS | 關聯 |
| Strapi 和 GatsbyJS 課程 - 組合項目 | Strapi、Gatsby、JavaScript、HTML、CSS | 關聯 |
| 故事書 - Node、Express、MongoDB 和 Google OAuth | MongoDB、節點、JavaScript、HTML、CSS | 關聯 |
| 呼吸和放鬆應用程式 - JavaScript 和 CSS 動畫 | JavaScript、HTML、CSS | 關聯 |
| 用於加密貨幣價格的 Node.js CLI | 節點、JavaScript | 關聯 |
| React 和 Tailwind CSS 圖片庫 | React、Tailwind、JavaScript、HTML、CSS | 關聯 |
| 使用 React 的番茄鐘 | 反應、JavaScript、HTML、CSS | 關聯 |
| 從頭開始使用 Laravel 進行關鍵字密度工具 | Laravel、PHP、JQuery、AJAX、SEO | 關聯 |
| 使用 Yii2 PHP 框架克隆 YouTube | yii2、PHP | 關聯 |
| 使用 React、GraphQL 和 Amplify 克隆 Reddit | React、Amplify、AWS、GraphQL、節點 | 關聯 |
| 使用 React 和 GraphQL 進行全端 Yelp 克隆 | React、GraphQL、HTML、CSS、JavaScript | 關聯 |
| 帶有 React Hooks 和 Context API 的 Pokémon Web 應用程式 | 反應、HTML、CSS、JavaScript | 關聯 |
| 使用 JavaScript 和 Rails 進行分水嶺監控 | Ruby、Rails、JavaScript | 關聯 |
| 使用 React 和 Redux 的氣候資料儀表板 | React、Redux、HTML、CSS、JavaScript | 關聯 |
| 僅使用 CSS 翻轉 UNO 卡 | HTML、CSS | 關聯 |
| 使用 Redis、WebSocket 和 Go 的聊天應用程式 | Redis、Web Socket、Go、Azure | 關聯 |
| 帶有 React 導航的 Spotify 登入動畫 | 反應、HTML、CSS、JavaScript | 關聯 |
| 僅使用 CSS 的動態天氣介面 | HTML、CSS | 關聯 |
| 使用 Airtable 和 Vue 的簡單 CRUD 應用程式 | Airtable、Vue、Vuetify、API、HTML | 關聯 |
| 帶有 MEVN 堆疊的全端 RPG 角色生成器 | MongoDB、Express、Vue、節點、HTML | 關聯 |
| 使用 PERN 堆疊的 Todo 應用程式 | PostgreSQL、Express、React、節點、HTML | 關聯 |
| 與蓋茨比一起的夏季公路旅行地圖應用程序 | 反應，蓋茲比，傳單 | 關聯 |
| 使用 Socket.io 進行多人紙牌遊戲 | Phaser 3、Express、Socket.io、JavaScript | 關聯 |
| Gatsby 的 COVID-19 儀表板和地圖應用程式 | 反應，蓋茲比，傳單 | 關聯 |
| 使用 React 進行抽認卡測驗 | 反應、API、JavaScript、HTML5、CSS3 | 關聯 |
| 使用純 JavaScript 打地鼠 | JavaScript、HTML5、CSS3 | 關聯 |
| 使用 React 製作 Meme Maker | 反應、JavaScript、HTML5、CSS3 | 關聯 |
| 使用 React 克隆 Evernote | 反應、Firebase、節點、JavaScript、HTML5 | 關聯 |
| 使用 Vue 的開發者聚會應用程式 | Vue、Firebase、Vuetify、JavaScript、HTML5 | 關聯 |
| 使用 Vue 的即時聊天應用程式 | Vue、Firebase、Vuex、JavaScript、HTML5 | 關聯 |
| 使用 Vue 進行加密貨幣追踪 | Vue、Vuetify、API、JavaScript、HTML5 | 關聯 |
| 使用 Vue 進行多人問答遊戲 | Vue、Pusher、Node、Express、JavaScript | 關聯 |
| 使用 Vue 進行掃雷遊戲 | Vue、Vuex、Vuetify、JavaScript、HTML5 | 關聯 |
| 使用 Vue 複製 Instagram | Vue、CSSGram、JavaScript、HTML5、CSS3 | 關聯 |
| 使用 Angular 複製黑客新聞 | 角度、燈塔、JavaScript、HTML5、CSS3 | 關聯 |
| 聊天介面 | HTML5、CSS3 | 關聯 |
| 純 CSS3 工具提示 | HTML5、CSS3 | 關聯 |
| 社群媒體按鈕 | HTML5、CSS3 | 關聯 |
| 推薦卡 | HTML5、CSS3 | 關聯 |
| 附有 CSS3 Flexbox 的導覽列 | HTML5、CSS3 | 關聯 |
| 使用 CSS3 Flexbox 的行動應用程式佈局 | HTML5、CSS3 | 關聯 |
| 受 Reddit 啟發的加載旋轉器 | HTML5、CSS3 | 關聯 |
| 使用 CSS3 網格的日曆 | JavaScript、HTML5、CSS3 | 關聯 |
| React 中的俄羅斯方塊遊戲 | 反應、JavaScript、HTML5、CSS3 | 關聯 |
| 2D 闖關遊戲 | JavaScript、HTML5、CSS3 | 關聯 |
| 精靈動畫 | JavaScript、HTML5、CSS3 | 關聯 |
| 貪吃蛇遊戲 | JavaScript、HTML5、CSS3 | 關聯 |
| 記憶遊戲 | JavaScript、HTML5、CSS3 | 關聯 |
| 簡單的認證和授權 | GraphQL、Apollo、節點、JavaScript、HTML5 | 關聯 |
| 加密貨幣追蹤器 | NextJS、GraphQL、阿波羅、節點、JavaScript | 關聯 |
| 使用 Vanilla Javascript 進行即時搜尋 | JavaScript、HTML5、CSS3 | 關聯 |
| 計算器應用程式 | JavaScript、HTML5、CSS3 | 關聯 |
| 都都應用程式 | Vue、JavaScript、CSS3、HTML5 | 關聯 |
| 部落格應用程式 | Vue、GraphQL、阿波羅、JavaScript、CSS3 | 關聯 |
| 簡單的預算應用程式 | Vue、布瑪、JavaScript、CSS3、HTML5 | 關聯 |
| 搜尋機器人 | 節點、Twilio、Cheerio、API、自動化 | 關聯 |
| 推特機器人 | 節點、JavaScript、API、自動化 | 關聯 |
| 即時 Markdown 編輯器 | 節點、JavaScript、Express、Redis、HTML5 | 關聯 |
| 都都應用程式 | Angular、TypeScript、RxJS、HTML5、CSS3 | 關聯 |
| 駭客新聞客戶端 | Angular、RxJS、Webpack、HTML5、CSS3 | 關聯 |
| 隨機報價機 | 反應、JavaScript、HTML5、CSS3 | 關聯 |
| Todoist克隆 | React、Firebase、JavaScript、測試、HTML5 | 關聯 |
| 具有情緒分析功能的聊天應用程式 | NextJS、Pusher、情感、節點、React | 關聯 |
| 預約安排 | React、Twilio、CosmicJS、Material-UI、JavaScript | 關聯 |
| 生命遊戲 | 反應、2D、JavaScript、HTML5、CSS3 | 關聯 |
| 新聞應用 | React Native、節點、API、React、JavaScript | 關聯 |
| 聊天應用程式 | React、Redux、Redux Saga、Web 套接字、節點 | 關聯 |
| 都都應用程式 | React Native、GraphQL、Apollo、API、Hasura | 關聯 |
| Chrome 擴充功能 | React、Parcel、JavaScript、HTML5、CSS3 | 關聯 |
| 電影投票應用程式 | React、Redux、API、不可變、JavaScript | 關聯 |
| Trello 克隆 | React、Elixir、Phoenix、JWT、JavaScript | 關聯 |
| Wiki 風格的 CMS | C#、.NET、Razor 頁面 | 關聯 |
| 使用 ReactJS 克隆 Spotify | 反應、HTML5、CSS3 | 關聯 |
| 微軟主頁克隆 | HTML5、CSS3、JavaScript | 關聯 |
| 簡單的甘特圖 | HTML5、CSS3、JavaScript | 關聯 |
| 工作抓取應用程式 | 節點、JavaScript、REST、API、Express | 關聯 |
| 電子商務應用程式 | 反應、Bootstrap、JavaScript、HTML5、CSS3 | 關聯 |
| Netflix 登陸頁 | HTML5、CSS3、JavaScript | 關聯 |
| 人工智慧聊天機器人 | Web 語音 API、Node、JavaScript、Express、Socket.io | 關聯 |
| 社交網路應用程式 | 反應、節點、Redux、Firebase、REST | 關聯 |
| 在 Node.js 中建立簡單的加密貨幣區塊鏈 | 節點、JavaScript、密碼學、區塊鏈 | 關聯 |
| BitTorrent 用戶端 | 節點、JavaScript、TCP、電腦網絡 | 關聯 |
| 使用 JavaScript 的待辦事項清單應用程式 | JavaScript、HTML5、CSS3 | 關聯 |
| 使用 Anime.js 製作 JavaScript 動畫 | JavaScript、CSS3、函式庫、HTML5、API | 關聯 |
| 使用 React 的求職板應用程式 | 反應、節點、Cron、JavaScript、HTML5 | 關聯 |
| 專案 | 科技 | 關聯 |
|---|---|---|
| 使用 React Native 建立 Uber Eats 克隆版 | React Native、Javascript、Android、iOS | 關聯 |
| 使用 React Native 建立 Uber 克隆 | React Native、Javascript、Android、iOS | 關聯 |
| 使用 Flutter SDK 建立帶有故事的聊天應用程式 | 顫動、飛鏢 | 關聯 |
| 建立 Robinhood 風格的應用程式來追蹤 COVID-19 病例 | 科特林、安卓 | 關聯 |
| Tinder 風格滑動行動應用程式 | 科特林、Java、斯威夫特 | 關聯 |
| 加密貨幣價目表行動應用程式 | React Native、Swift、Flutter、Dart | 關聯 |
| 餐廳社交行動應用程式 | React Native、Swift、Flutter、Dart | 關聯 |
| 休息時間提醒行動應用程式 | React Native、Kotlin、Java、Swift | 關聯 |
| 發票和付款提醒移動應用程式 | 反應、節點、Express、MongoDB | 關聯 |
| 倒數計時移動應用程式 | 斯威夫特、Java、反應本機 | 關聯 |
| 使用 Swift 的 Flappy Bird iOS 遊戲 | 斯威夫特、XCode、iOS | 關聯 |
| 使用 Swift 的 Bull's Eye iOS 遊戲 | 斯威夫特、XCode、iOS | 關聯 |
| 使用 SwiftUI 的餐廳 iOS 應用程式 | 斯威夫特、XCode、iOS | 關聯 |
| 使用 Swift 來骰子 iOS 應用程式 | 斯威夫特、XCode、iOS | 關聯 |
| TrueCaller 克隆 | Java、MySQL、XAMPP、Android | 關聯 |
| 天氣應用程式 | Java、API、安卓 | 關聯 |
| 電子商務應用程式 | Java、Firebase、Android | 關聯 |
| 聊天應用程式 | Java、Firebase、Android | 關聯 |
| 都都應用程式 | 顫振、Dart、Android、iOS | 關聯 |
| 旅行應用程式使用者介面 | 顫振、Dart、Android、iOS | 關聯 |
| Reddit 用戶端 | 安卓、科特林 | 關聯 |
| 都都應用程式 | 反應本機、Android、iOS、JavaScript | 關聯 |
| 照片庫查看器 | C#、iOS、Xamarin、Visual Studio、Android | 關聯 |
| 使用 React Native 克隆 WhatsApp | React Native、Node、GraphQL、Apollo、JavaScript | 關聯 |
| 專案 | 科技 | 關聯 |
|---|---|---|
| 使用 Kaboom.js 建造超級瑪利歐兄弟、薩爾達和太空入侵者 | JavaScript、卡布姆 | 關聯 |
| 使用 TypeScript 建立打磚塊遊戲 | TypeScript、HTML、CSS、JavaScript | 關聯 |
| 簡單的遊戲 | Lua、LÖVE、Python、Pygame 零 | 關聯 |
| Python 線上多人遊戲 | Python | 關聯 |
| 擊敗他們格鬥遊戲 | 統一，C# | 關聯 |
| 使用 Godot 3.1 的簡單 3D 遊戲 | 戈多，C#，3D | 關聯 |
| Godot 中的簡單益智遊戲 - 盒子和開關 | 戈多、C#、2D | 關聯 |
| 《Godot 3》中的遊戲介面從頭開始 | 戈多、C#、2D | 關聯 |
| 戈多的 2D 遊戲：玩家與敵人 | 戈多、C#、2D | 關聯 |
| 使用 Socket.io 進行多人紙牌遊戲 | Phaser 3、Express、Socket.io、JavaScript | 關聯 |
| 使用 Unity 2D 和 Mirror 的多人卡牌遊戲 | C#、Unity、2D、鏡像 | 關聯 |
| Rust 中的 Roguelike 教程 | 鐵鏽，二維 | 關聯 |
| Adventures in Rust - 基本 2D 遊戲 | 鐵鏽，二維 | 關聯 |
| 使用 Ruby 進行終端貪吃蛇遊戲 | 紅寶石，二維 | 關聯 |
| 使用 OpenGL 的太空入侵者 | OpenGL、C/C++、2D | 關聯 |
| C 語言的數獨求解器 | C/C++、二維 | 關聯 |
| C語言西洋棋引擎 | C/C++、二維 | 關聯 |
| 使用 Swift 的 Flappy Bird iOS 遊戲 | 斯威夫特、XCode、iOS | 關聯 |
| 使用 Swift 的 Bull's Eye iOS 遊戲 | 斯威夫特、XCode、iOS | 關聯 |
| 使用純 JavaScript 打地鼠 | JavaScript、HTML5、CSS3 | 關聯 |
| 使用 Vue 進行多人問答遊戲 | Vue、Pusher、Node、Express、JavaScript | 關聯 |
| 使用 Vue 進行掃雷遊戲 | Vue、Vuex、Vuetify、JavaScript、HTML5 | 關聯 |
| React 中的俄羅斯方塊遊戲 | 反應、JavaScript、HTML5、CSS3 | 關聯 |
| 2D 闖關遊戲 | JavaScript、HTML5、CSS3 | 關聯 |
| 精靈動畫 | JavaScript、HTML5、CSS3 | 關聯 |
| 貪吃蛇遊戲 | JavaScript、HTML5、CSS3 | 關聯 |
| 記憶遊戲 | JavaScript、HTML5、CSS3 | 關聯 |
| 坦克射手 | 3D、Unity、C# | 關聯 |
| 2D Roguelike | 2D、Unity、C# | 關聯 |
| 約翰檸檬的鬧鬼之旅 3D | 3D、Unity、C# | 關聯 |
| VR 初學者：密室逃脫 | 虛擬實境、Unity、C# | 關聯 |
| 魯比的冒險 | 2D、Unity、C# | 關聯 |
| 角色扮演遊戲 | 2D、Unity、C# | 關聯 |
| 滾球 | 3D、Unity、C# | 關聯 |
| 第一人稱射擊微遊戲 | 統一，C# | 關聯 |
| 平台遊戲微型遊戲 | 統一、C#、2D | 關聯 |
| 卡丁車微遊戲 | 統一，C# | 關聯 |
| 街機射擊遊戲 | 盧阿，愛 | 關聯 |
| 生命遊戲 | 反應、2D、JavaScript、HTML5、CSS3 | 關聯 |
| 手工英雄 | C/C++、OpenGL、2D | 關聯 |
| 突破 | C/C++、OpenGL、2D | 關聯 |
| 俄羅斯方塊 | C/C++、二維 | 關聯 |
| 紅白機遊戲 | C/C++、Python、2D | 關聯 |
| Roguelike 遊戲 | C#、.NET、RogueSharp、MonoGame、RLNet | 關聯 |
| 簡單的角色扮演遊戲 | C#、SQL、2D | 關聯 |
| 專案 | 科技 | 關聯 |
|---|---|---|
| 使用 BeautifulSoup 建立 Web Scraper | Python、美麗湯 | 關聯 |
| CNN 以胸部 X 光檢查檢測肺炎 | CNN、Python | 關聯 |
| 使用 AWS 自動更新 Python 中的資料視覺化 | Python、AWS、Matplotlib | 關聯 |
| 使用 GCP 和 Node 的 Twitter 情緒分析工具 | API、GCP、節點、JavaScript | 關聯 |
| 使用 CNN 進行 Twitter 情緒分析 | Python、Matplotlib、Numpy、熊貓 | 關聯 |
| 泰勒絲歌詞產生器 | Python、Keras、Numpy、熊貓 | 關聯 |
| MNIST 數位辨識器 | Python、Keras、TensorFlow、Numpy、SciKit | 關聯 |
| 訓練模型來產生顏色 | Python、Keras、TensorFlow、Numpy | 關聯 |
| 圖像標題生成器 | Python、TensorFlow、Numpy | 關聯 |
| 使用 CNN 破解驗證碼系統 | Python、Keras、TensorFlow、OpenCV、Numpy | 關聯 |
| 產生平均臉 | Python、OpenCV、Numpy、C/C++ | 關聯 |
| 影像拼接 | Python、OpenCV、Numpy | 關聯 |
| 手部關鍵點偵測 | Python、OpenCV、Numpy、C/C++ | 關聯 |
| 特徵臉 | Python、OpenCV、Numpy、C/C++ | 關聯 |
| 無人機目標偵測 | Python、OpenCV、Numpy | 關聯 |
| 使用 Mask R-CNN 進行物件偵測 | Python、OpenCV、Numpy | 關聯 |
| 臉部標誌偵測 | Python、OpenCV、DLib、Numpy | 關聯 |
| 文字傾斜校正 | Python、OpenCV、Numpy | 關聯 |
| OCR 和文字識別 | Python、OpenCV、超正方體、Numpy | 關聯 |
| 人流量統計器 | Python、OpenCV、Numpy | 關聯 |
| 文字偵測 | Python、OpenCV、Numpy | 關聯 |
| 語意分割 | Python、OpenCV、Numpy | 關聯 |
| 物體追蹤 | Python、OpenCV、Numpy、CamShift | 關聯 |
| 臉部聚類 | Python、OpenCV、Numpy | 關聯 |
| 條碼掃描儀 | Python、OpenCV、ZBar、Numpy | 關聯 |
| 顯著性檢測 | Python、OpenCV、Numpy | 關聯 |
| 人臉偵測 | Python、OpenCV、Numpy | 關聯 |
| 文件掃描儀 | Python、OpenCV、Numpy、SciKit | 關聯 |
| 音樂推薦 | Python、SciKit、Numpy、熊貓 | 關聯 |
| 預測葡萄酒的品質 | Python、Matplotlib、Numpy、熊貓 | 關聯 |
| 遺傳演算法 | Python、SciKit、Numpy、熊貓 | 關聯 |
| 深夢 | Python、TensorFlow、視覺化 | 關聯 |
| 股價預測 | Python、SciKit、Matplotlib | 關聯 |
| 電影推薦系統 | Python、LightFM | 關聯 |
| Twitter 情緒分析 | Python、API | 關聯 |
| 具有情緒分析功能的聊天應用程式 | NextJS、Pusher、Sentiment、Node、React | 關聯 |
