只有不断的努力才能成为伟大的开发人员。想象一下 ——你不能通过阅读大量关于健身，成为一个身体健康的人。你实际上需要去健身房，把时间和汗水放进去！同样的概念也适用于编码。

这里有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 入门与提高: http://xc.hubwiz.com/course/vue.js 2.vuex 2 入门与提高: http://xc.hubwiz.com/course/vuex 3.vue-router 入门与提高: http://xc.hubwiz.com/course/vuerouter 4.vue.js 工程化实践: http://xc.hubwiz.com/course/vuegch