全文共2457字，預計學習時長7分鐘前端
圖源：unsplashreact
你是否聽過一萬小時定律？它指的是，要想成爲某方面的大師，就必需要實踐一萬個小時。雖然並不是適用於全部領域，但至少做爲一名開發人員，最有效的成長方法之一就是投入儘量多的時間。git
從下面列表中選擇一個項目並開始編碼吧！使用哪一種技術或工具並不重要，重要的是你親手完成了一個項目。github
Jira克隆web
Jira是Atlassian開發的專利問題跟蹤產品，提供bug跟蹤和靈活的項目管理服務。產品名稱源自Gojira，Gojira在日語中是哥斯拉的意思。數據庫
Jira | 圖源：GitHub編程
構建Jira克隆，你將學到如下內容：api
· 拖放（DND）API如何服務於瀏覽器：每一個Jira板都有一個看板集合，在那裏你能夠根據任務的進度拖聽任務。瀏覽器
· 如何安排用戶角色和訪問權限邏輯：每一個看板都有相關的成員，成員可能具備不一樣的訪問級別。例如，項目經理可能具備閱讀、編寫和編輯權限，而客戶可能只有閱讀權限。客戶能夠看到正在進行的工做和已經完成的工做，可是他們不能改變團隊當前正在進行的工做。服務器
· HTML和CSS：從語法層面構建應用設計風格是任何人都能擁有的實用技能。
使用Emoji的Discord聊天
當和朋友們一塊兒外出或玩電子遊戲時，Discord是一種有趣的聯繫方式，它專一於聊天頻道中用戶之間的文本、圖像、視頻和音頻通訊。每一個Discord頻道都有可供用戶選擇的表情符號，你的任務是構建包含表情符號的聊天部分。若是願意，你能夠創建整個Discord克隆。
構建Discord聊天克隆，你將學會：
· 如何將網絡套接字應用於聊天。每一個現代網絡聊天應用程序都在以某種方式使用WebSockets。WebSocket是一種計算機通訊協議，在一個TCP鏈接上提供全雙工通訊通道。簡而言之，服務器和前端客戶端是同步的。
· 如何使用Electron構建跨平臺的桌面應用程序，當前版本的Discord就是經過Electron構建的。
Beatbox應用
Beatbox應用程序會根據你當前所按的鍵播放不一樣的聲音，只用鍵盤就能夠演奏一段曲子。
圖源：GitHub
構建Beatbox應用，你將學會：
· 爲了激活聲音，須要熟悉WebAudio API是如何工做的。
· 使用JavaScript鍵盤。必須弄清楚按的是什麼鍵，而後演奏正確的曲子。
Mozilla開發者文檔：「Web Audio爲控制Web上的音頻提供了一個強大的多功能系統，容許開發人員選擇音頻源、向音頻添加效果、建立音頻可視化界面、應用空間效果(好比移動)等等。」
Spotify唱片區
你能夠在Spotify上播放和上傳歌曲。Spotify有一個版塊，能夠根據專輯瀏覽音樂和藝術家。下面是我最喜歡的專輯之一。
金屬樂隊(1991)專輯
構建Spotify克隆，你將學會：
· 如何經過API獲取數據，併爲相關藝術家顯示正確的專輯。幸運的是，Spotify有一個能夠無償使用的API：https://developer.spotify.com/documentation/web-api/
· 能夠將app構建爲web或桌面應用程序。這兩種應用程序都須要瞭解如何在頁面上佈局元素並對其進行適當的樣式化處理。
亞馬遜克隆
亞馬遜剛成立的時候還只是一個賣書的小型電子商務網站，現在，它們已是電子商務領域的巨人。
從零開始，慢慢來，爲了學習要模仿它的每一個特色。不要試圖複製亞馬遜的商業模式，而是以學習爲目的嘗試創建一個相似的網絡體驗。亞馬遜的核心是一個大型數據庫，在進行搜索時，它將從數據庫中返回正確的條目。固然，亞馬遜遠不止這些，但這是一個很是簡單的例子。
亞馬遜克隆：Github
構建亞馬遜克隆，你將學會：
· 設置MySQL或者PostgreSQL，學會在數據庫中存儲條目。須要將條目存儲在數據庫中，而後再從中查詢條目。
· 支持搜索功能。用戶登陸你的網站，搜索條目，你須要給出相應的內容。你要怎麼作？
· HTML和CSS。每一個網站都會使用的兩種技術，不論是初學者的簡單項目，仍是很是複雜的網站好比Netflix或亞馬遜，都會用到。
這是我在GitHub上找到的一個簡單的亞馬遜克隆：https://github.com/CleverProgrammers/react-challenge-amazon-clone?ref=HackerTabExtension
Netflix克隆
Netflix是觀看電視劇、電影和紀錄片的熱門選擇，完全改變了咱們看電視的方式，可以在任何地方用任何設備觀看。
Netflix主頁 | 圖源：Netflix
構建Netflix克隆，你將學會：
· 使用HTML和CSS。
· 可選項：如何經過API搜索電影和電視劇。
· 音視頻API：Netflix的核心是流媒體服務，每一個流媒體服務在某種程度上都包含視頻或音頻。
推特克隆
推特是一個熱門的討論平臺，從政治到音樂再到編程，上面有不少小衆社區，許多人喜歡使用推特和粉絲互動。
筆者的推特我的主頁 | 圖源：Twitter
構建推特克隆，你將學會：
· HTML和CSS用於與佈局相關的部分。
· 在數據庫中存儲tweet：設置一個關係(MySQL)或一個非關係(MongoDB)數據庫。
· 角色管理邏輯：每一個用戶都有一個檔案，只有本身能夠編輯，其餘人能夠查看。
但願你已經爲下一個項目找到了靈感，開始行動吧！
一塊兒分享AI學習與發展的乾貨
歡迎關注全平臺AI垂類自媒體 「讀芯術」
（添加小編微信：dxsxbb，加入讀者圈，一塊兒討論最新鮮的人工智能科技哦～）