8個寫完之後就可讓你成爲頂尖開發者的有趣應用程序

只有不斷的努力才能成爲偉大的開發人員。想象一下 ——你不能經過閱讀大量關於健身，成爲一個身體健康的人。你實際上須要去健身房，把時間和汗水放進去！一樣的概念也適用於編碼。

這裏有8個很棒的項目來訓練你的編碼肌肉！咱們的目標是用你喜歡的技術堆棧構建每一個應用程序。使用任何你想要的內容來保證沒有任何衝突！

Project #1: Trello Clone

Demo ：https://trello-copy-ddiaorohmd.now.sh/

你將clone一個Trello：

1. 路由
2. 拖放
3. 建立新對象（板子、列表、卡片）
4. 處理輸入和驗證
5. 客戶端路徑：如何使用本地存儲，將數據保存到本地存儲中，從本地存儲中讀取數據。
6. 服務器端路徑：如何使用數據庫，將數據保存到數據庫，再從數據庫讀取數據。

這裏的有一個用React+Redux作的例子：https://github.com/wesharehoodies/simple-trello。

Project #2: User admin dashboard

簡單的CRUD應用，重要的基礎。你將學到：

1. 建立用戶，管理用戶。
2. 與數據庫 ——建立、讀取、編輯、刪除用戶。
3. 輸入驗證和如何處理表單。

Project #3: Cryptocurrency tracker (native mobile app)

這是一個本地應用程序 ——Swift，Objective-C，React Native，java，Kotlin。

你將學到：

1. 本地應用程序是如何工做的。
2. 從API獲取數據。
3. 本地佈局如何工做。
4. 如何使用移動模擬器。

使用此api（https://coinmarketcap.com/api/）。能夠發表評論，若是你找到了一個更好的話。

若是您感興趣的是如何構建它，我爲它編寫了一個教程（https://medium.com/react-native-training/bitcoin-ripple-ethereum-price-checker-with-react-native-redux-e9d076037092）。

Project #4: Setup your very own webpack config from scratch

嗯，這不是一個應用程序，可是在技術上理解WebPack下咱們如何工做，它仍然是很是有用的。它將再也不是一個「黑箱」，而是給你帶來一個強有力的工具。

要求:

1. 編譯ES7回到ES5。（基礎）
2. 編譯JSX到.js 或 .Vue到.js（你將瞭解裝載機）
3. 設置WebPack dev 服務和模塊熱加載。（Vue-cli和建立React應用程序要用到）
4. 使用Heroku，now.sh或GitHub爲生產環境創建和將來部署作準備。（你將學會如何部署WebPack項目）
5. 設置本身喜歡的預編譯css — scss, less, stylus。
6. 學習WebPack中如何使用圖片和SVG。

這裏有一個好的資源（https://codeburst.io/easy-guide-for-webpack-2-0-from-scratch-fe508a3ce44e?source=user_profile---------31----------------），能夠爲初學者服務。

Project #5: Hackernews clone

每一個人都會創建本身版本的黑客新聞 ， 咱們不會例外。

你要學習的是如下內容：

1. HackerNews的API。
2. 建立單頁應用程序。
3. 如何實現諸如查看註釋、單個註釋、概要文件等功能。
4. 路由.

下面是黑客新聞API文檔（https://github.com/HackerNews/API）。

Project #6: Todo App

真的嗎？一個應用程序？地址：http://todomvc.com/examples/react/#/。已經有多少人試過了？是的 ，我知道有不少。可是這不重要，最重要的是 我知道 如此受歡迎是有一個緣由的。

待辦事項應用程序是經過的很是好的方式來詮釋基本原理。嘗試使用最基本的JavaScript編寫它，而後用你最喜好的框架/庫來構建它。

你將學到什麼：

1. 建立新任務。
2. 驗證領域。
3. 過濾任務（已完成、活動、所有）。利用過濾器減小功能。
4. 理解JavaScript的基本原理。

Project #7: A sortable drag and drop list

這個示例（https://github.com/atlassian/react-beautiful-dnd）對理解拖放API（https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API）很是有用。若是你能建立複雜的應用程序，你就能夠脫穎而出。

你將學到什麼：

1. 拖放API
2. 建立豐富的用戶界面

Project #8: A messenger clone (native app)

理解本地應用程序和Web應用程序的工做方式會讓你很容易從人羣中脫穎而出。

你將學到什麼：

1. Web套接字（即時消息）
2. 本地應用程序是如何工做的。
3. 佈局是如何在本地工做的。
4. 本地應用程序的路由。

這些應該讓你忙上一兩個月，選擇一些東西，而後構建它！你能辦到的！

感謝你閱讀這篇文章。若是你喜歡這個，別忘了轉發，讓更多的人看到！

請務必follow個人Twitter（https://twitter.com/lasnindrek）！

小智翻譯，分享一個Vue.js的入門級全家桶系列教程：

1.vue.js 入門與提升: xc.hubwiz.com/course/vue.…

2.vuex 2 入門與提升: xc.hubwiz.com/course/vuex

3.vue-router 入門與提升: xc.hubwiz.com/course/vuer…

4.vue.js 工程化實踐: xc.hubwiz.com/course/vueg…