適用於各種軟體開發技能：2023 推薦練習的專案開發

作為一名開發人員，了解最新的技術和工具對於在就業市場上保持競爭力至關重要。

在這篇文章中，我們整理了一份 2023 年最熱門開發專案的完整列表，以及掌握每個專案的教程和資源。

無論您是希望提高技能的初學者，還是希望擴展您的技能組合的資深開發人員，此列表都適合每個人。

原文出處：https://dev.to/rahul3002/2023s-top-development-projects-for-programmers-a-complete-list-of-tutorials-and-tools-for-mastering-the-latest-technologies-37o3

專案教程列表：

Web開發：

專案	技術	連結
使用 NextJS 建置 Reddit 2.0 克隆	React、SQL、Supabase、Next.js、GraphQL	連結
使用 React 建置 YouTube 克隆	Express、Node、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 的中型克隆	React、Node、CSS3、JavaScript、HTML5	連結
使用 React JS 克隆 Facebook	React、Firebase、CSS3、JavaScript、HTML5	連結
JavaScript30 - 30 天 Vanilla JS 編碼挑戰	JavaScript	連結
使用 Gatsby 和 GraphCMS 的旅行遺願清單地圖	Gatsby、Leaflet、GraphCMS、HTML、CSS	連結
使用 Vue.js 的記憶卡遊戲	Vue、JavaScript、HTML、CSS	連結
Strapi 和 GatsbyJS 課程 - 投資組合專案	Strapi、Gatsby、JavaScript、HTML、CSS	連結
Storybook - Node、Express、MongoDB 和 Google OAuth	MongoDB、Node、JavaScript、HTML、CSS	連結
呼吸和放鬆應用程式 - JavaScript 和 CSS 動畫	JavaScript、HTML、CSS	連結
用於加密貨幣價格的 Node.js CLI	Node，JavaScript	連結
React 和 Tailwind CSS 圖片庫	React，順風，JavaScript，HTML，CSS	連結
使用 React 的番茄鐘	React，JavaScript，HTML，CSS	連結
Laravel 從零開始的關鍵字密度工具	Laravel、PHP、JQuery、AJAX、SEO	連結
使用 Yii2 PHP 框架克隆 YouTube	Yii2, PHP	連結
使用 React、GraphQL 和 Amplify 克隆 Reddit	React、Amplify、AWS、GraphQL、Node	連結
使用 React 和 GraphQL 的全棧 Yelp 克隆	React、GraphQL、HTML、CSS、JavaScript	連結
帶有 React Hooks 和 Context API 的 Pokémon Web App	React、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 登錄動畫	React、HTML、CSS、JavaScript	連結
僅使用 CSS 的動態天氣界面	HTML, CSS	連結
使用 Airtable 和 Vue 的簡單 CRUD 應用程式	Airtable、Vue、Vuetify、API、HTML	連結
帶有 MEVN 堆棧的全棧 RPG 角色生成器	MongoDB、Express、Vue、Node、HTML	連結
帶有 PERN 堆棧的 Todo 應用	PostgreSQL、Express、React、Node、HTML	連結
帶有 Gatsby 的夏季公路旅行地圖應用程式	React，Gatsby，Leaflet	連結
使用 Socket.io 的多人紙牌遊戲	Phaser 3、Express、Socket.io、JavaScript	連結
帶有 Gatsby 的 COVID-19 儀表板和地圖應用程式	React，Gatsby，Leaflet	連結
React 抽認卡測驗	React、API、JavaScript、HTML5、CSS3	連結
用純 JavaScript 打地鼠	JavaScript、HTML5、CSS3	連結
使用 JavaScript 的諾基亞 3310 貪吃蛇遊戲	JavaScript、HTML5、CSS3	連結
原版 JavaScript 中的石頭剪刀布	JavaScript、HTML5、CSS3	連結
純 JavaScript 的俄羅斯方塊	JavaScript、HTML5、CSS3	連結
使用 React 製作 Meme Maker	React，JavaScript，HTML5，CSS3	連結
使用 React 克隆 Evernote	React、Firebase、Node、JavaScript、HTML5	連結
開發者 Meetup App with 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 中的俄羅斯方塊遊戲	React，JavaScript，HTML5，CSS3	連結
2D 突圍遊戲	JavaScript、HTML5、CSS3	連結
精靈動畫	JavaScript、HTML5、CSS3	連結
蛇遊戲	JavaScript、HTML5、CSS3	連結
記憶遊戲	JavaScript、HTML5、CSS3	連結
簡單的身份驗證和授權	GraphQL、Apollo、Node、JavaScript、HTML5	連結
加密貨幣追踪器	NextJS、GraphQL、Apollo、Node、JavaScript	連結
使用 Vanilla Javascript 進行即時搜尋	JavaScript、HTML5、CSS3	連結
計算器應用	JavaScript、HTML5、CSS3	連結
待辦事項	Vue、JavaScript、CSS3、HTML5	連結
博客應用	Vue、GraphQL、阿波羅、JavaScript、CSS3	連結
簡單的預算應用程式	Vue、布爾瑪、JavaScript、CSS3、HTML5	連結
搜尋機器人	Node、Twilio、Cheerio、API、自動化	連結
推特機器人	Node、JavaScript、API、自動化	連結
實時 Markdown 編輯器	Node、JavaScript、Express、Redis、HTML5	連結
待辦事項	Angular、TypeScript、RxJS、HTML5、CSS3	連結
黑客新聞客戶端	角度、RxJS、Webpack、HTML5、CSS3	連結
隨機報價機	React，JavaScript，HTML5，CSS3	連結
Todoist克隆	React, Firebase, JavaScript, 測試, HTML5	連結
帶有情感分析的聊天應用	NextJS、Pusher、Sentiment、Node、React	連結
預約安排	React、Twilio、CosmicJS、Material-UI、JavaScript	連結
生命遊戲	React、2D、JavaScript、HTML5、CSS3	連結
新聞應用	React Native、Node、API、React、JavaScript	連結
聊天應用	React、Redux、Redux Saga、Web 套接字、Node	連結
待辦事項	React Native、GraphQL、Apollo、API、Hasura	連結
Chrome 擴展	React，包裹，JavaScript，HTML5，CSS3	連結
電影投票應用	React、Redux、API、不可變、JavaScript	連結
特雷洛克隆	React、Elixir、Phoenix、JWT、JavaScript	連結
Wiki 風格的 CMS	C#、.NET、Razor 頁面	連結
使用 ReactJS 克隆 Spotify	React，HTML5，CSS3	連結
微軟主頁克隆	HTML5、CSS3、JavaScript	連結
簡單甘特圖	HTML5、CSS3、JavaScript	連結
工作抓取應用	Node、JavaScript、REST、API、Express	連結
電子商務應用	React，引導程序，JavaScript，HTML5，CSS3	連結
Netflix 著陸頁	HTML5、CSS3、JavaScript	連結
人工智能聊天機器人	Web 語音 API、Node、JavaScript、Express、Socket.io	連結
社交網絡應用	React、Node、Redux、Firebase、REST	連結
在 Node.js 中建置一個簡單的加密貨幣區塊鏈	Node、JavaScript、密碼學、區塊鏈	連結
BT 客戶端	Node、JavaScript、TCP、計算機網絡	連結
使用 JavaScript 的待辦事項列表應用	JavaScript、HTML5、CSS3	連結
使用 Anime.js 的 JavaScript 動畫	JavaScript、CSS3、庫、HTML5、API	連結
帶有 React 的工作板應用程式	React、Node、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 風格的 Swipe 移動應用程式	科特林、Java、斯威夫特	連結
加密貨幣價格列表移動應用程式	React Native、Swift、Flutter、Dart	連結
餐廳社交移動應用程式	React Native、Swift、Flutter、Dart	連結
休息時間提醒移動應用	React Native、Kotlin、Java、Swift	連結
發票和付款提醒移動應用程式	React、Node、Express、MongoDB	連結
倒計時移動應用	Swift、Java、React Native	連結
使用 Swift 的 Flappy Bird iOS 遊戲	斯威夫特、XCode、iOS	連結
使用 Swift 的 Bull's Eye iOS 遊戲	斯威夫特、XCode、iOS	連結
使用 SwiftUI 的任務列表 iOS 應用	斯威夫特、XCode、iOS	連結
使用 SwiftUI 的餐廳 iOS 應用	斯威夫特、XCode、iOS	連結
使用 Swift 的骰子 iOS 應用	斯威夫特、XCode、iOS	連結
TrueCaller 克隆	Java、MySQL、XAMPP、Android	連結
天氣應用	Java, API, Android	連結
電子商務應用	Java、Firebase、Android	連結
聊天應用	Java、Firebase、Android	連結
待辦事項	Flutter、Dart、Android、iOS	連結
旅遊應用程式用戶界面	Flutter、Dart、Android、iOS	連結
Reddit 客戶端	安卓，科特林	連結
待辦事項	React Native、Android、iOS、JavaScript	連結
照片庫查看器	C#、iOS、Xamarin、Visual Studio、Android	連結
使用 React Native 克隆 WhatsApp	React Native、Node、GraphQL、Apollo、JavaScript	連結

遊戲開發：

專案	技術	連結
使用 Kaboom.js 建置超級馬里奧兄弟、塞爾達傳說和太空侵略者	JavaScript，Kaboom	連結
使用 TypeScript 建立打磚塊遊戲	打字稿、HTML、CSS、JavaScript	連結
簡單遊戲	Lua、LÖVE、Python、Pygame 零	連結
Python在線多人遊戲	蟒蛇	連結
打敗他們格鬥遊戲	統一，C#	連結
使用 Godot 3.1 的簡單 3D 遊戲	戈多，C#，3D	連結
Godot 中的簡單益智遊戲- Box and Switch	戈多，C#，二維	連結
Godot 3 中的遊戲界面從頭開始	戈多，C#，二維	連結
Godot 的 2D 遊戲：玩家與敵人	戈多，C#，二維	連結
使用 Socket.io 的多人紙牌遊戲	Phaser 3、Express、Socket.io、JavaScript	連結
使用 Unity 2D 和 Mirror 的多人紙牌遊戲	C#、Unity、二維、鏡像	連結
Rust 中的 Roguelike 教程	生鏽，二維	連結
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	連結
使用 JavaScript 的諾基亞 3310 貪吃蛇遊戲	JavaScript、HTML5、CSS3	連結
原版 JavaScript 中的石頭剪刀布	JavaScript、HTML5、CSS3	連結
純 JavaScript 的俄羅斯方塊	JavaScript、HTML5、CSS3	連結
Vue 多人問答遊戲	Vue、Pusher、Node、Express、JavaScript	連結
Vue 掃雷遊戲	Vue、Vuex、Vuetify、JavaScript、HTML5	連結
React 中的俄羅斯方塊遊戲	React，JavaScript，HTML5，CSS3	連結
2D 突圍遊戲	JavaScript、HTML5、CSS3	連結
精靈動畫	JavaScript、HTML5、CSS3	連結
蛇遊戲	JavaScript、HTML5、CSS3	連結
記憶遊戲	JavaScript、HTML5、CSS3	連結
坦克射手	3D、統一、C#	連結
2D Roguelike	二維、Unity、C#	連結
約翰·萊蒙鬧鬼的短途旅行 3D	3D、統一、C#	連結
VR 初學者：密室逃脫	虛擬現實、Unity、C#	連結
露比的冒險	二維、Unity、C#	連結
角色扮演遊戲	二維、Unity、C#	連結
滾球	3D、統一、C#	連結
FPS 微型遊戲	統一，C#	連結
平台微遊戲	Unity、C#、2D	連結
卡丁車小遊戲	統一，C#	連結
街機射擊	Lua，愛	連結
生命遊戲	React、2D、JavaScript、HTML5、CSS3	連結
手工英雄	C/C++、OpenGL、2D	連結
突圍	C/C++、OpenGL、2D	連結
俄羅斯方塊	C/C++, 二維	連結
紅白機遊戲	C/C++、Python、二維	連結
Roguelike 遊戲	C#、.NET、RogueSharp、MonoGame、RLNet	連結
簡單的角色扮演遊戲	C#、SQL、二維	連結

機器學習與人工智能：

專案	技術	連結
使用 BeautifulSoup 建置網絡爬蟲	Python, BeautifulSoup	連結
從胸部 X 光檢測肺炎的 CNN	美國有線電視新聞網，蟒蛇	連結
使用 AWS 在 Python 中自動更新資料可視化	Python、AWS、Matplotlib	連結
使用 GCP 和 Node 的 Twitter 情感分析工具	API、GCP、Node、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、Tesseract、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	連結