8个写完以后就可以让你成为顶尖开发者的有趣应用程序
发布于 2 个月前 作者 2596887568 2901 次浏览 来自 分享

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

这里有8个很棒的项目来训练你的编码肌肉!我们的目标是用你喜欢的技术堆栈构建每个应用程序。使用任何你想要的内容来保证没有任何冲突!

Project #1: Trello Clone

Trello clone by Indrek Lasn

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

todo2.gif

简单的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

todo.png

嗯,这不是一个应用程序,但是在技术上理解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

todo6.gif

这个示例(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

31 回复

mark

来自酷炫的 CNodeMD

什么情况这么多人mark。

很棒的分享!动手写吧!

@KePingHub 又一个mark的。哎

这标题 -。 -

@XadillaX 有点儿标题党。

Mark,Node + Redis 写过一个 HackerNews clone - jsernews

mark的很起劲啊,是不准备让这个帖子沉下去的节奏吗。(⊙﹏⊙)b

mark

来自酷炫的 CNodeMD

回到顶部