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…