28个有趣的练手app创意

沸腾冰

学习编程的时候，创建默认Demo是非常无聊的事情。这是头号动力杀手，我不希望我的学生失去动力，然后放弃学习，所以我整合了28个有趣的app创意，在学习React/Ruby on Rails的时候可以使用。
这里假设你已经对Ruby on Rails或其他后端框架比较熟悉，所以后端部分会相对比较复杂，前端react部分会相对简单。
Project 1：预约日历（模仿Google Calendar）




这是一个简单的APP，可以慢慢增加更多的特性来完成。可以用来练习嵌套组件。
完整代码如下：
https://github.com/learnetto/calreact
Project 2：寻找有趣Repo的Github查找应用



可以把搜索部分完全放在前端，也可以增加些趣味性，用Rails把搜索的数据库存储起来，然后展示热门搜索。
可以练习使用外部API和处理JSON数据，也可以试一试在服务器预渲染组件。
试试这个项目的浏览器插件：
https://github.com/algolia/github-awesome-autocomplete
Project 3：笔记APP



可以增加自动保存来感受React处理状态变化的能力。Simplenote是一个简单但强大的笔记APP。
如果你觉得这个app的过于复杂，你可以先试用外部文本编辑组件，然后实现自己的APP：
https://github.com/facebook/draft-js
Project 4：Slack聊天插件



使用react-slack-chat组件来给Rails网站添加聊天插件。大部分工作都由组件完成，但是定制自己的聊天机器人和插件风格也很有趣。
完整代码：
https://github.com/5punk/react-slack-chat
Project 5：表情包生成器



Rails可以处理图片库和表情包的存取，React用来渲染和制作表情包。也可以用ImageMagick在后端生成表情包。
https://github.com/tranhungt/meme-maker
Project 6：免费图片实时搜索



使用Unsplash API来获取高质量的免费图片：
https://github.com/unsplash/unsplash_rb
使用React Animation Add-Ons来添加有趣的动画。
让用户收藏喜欢的图片，甚至可以把后端做成Rail API APP，前端单独做一个React APP。
Project 7：读书俱乐部



一个用来分享和讨论书籍的APP，类似于Goodreads，后端可以用一个简单的Rails CRUD app，前端可以用一个简单的ReactPage，试着用React router和Redux来做。
Project 8：Twitter多账号Web客户端（模仿Tweetdeck）



可以链接多账号的Twitter Web客户端（使用OAuth），给不同的功能添加一列，比如tweets、通知、搜索、私信等等。
Twitter Ruby GEM：
处理这荒谬的API次数限制会给你无与伦比的快乐。
可以加一个自动获取新tweets的功能，用轮询或者Action Cable来做。
有很多嵌套组件，可以在React里试一试简单的动画。
最好从构建只读功能开始。拥有该功能后，就可以添加发布，点赞和转发功能。
Project 9：OpenStreetMap自定义UI



你知不知道OpenStreetMap是Rails应用程序？
OpenStreetMap Repo可以配置到本机，然后自己加一些React前端内容进去。
Project 10：团队午餐轮盘



一个可帮助团队选择午餐的网站。 Rails后端只需要是一个简单的CRUD app，可以让团队成员输入建议的位置。 可以用Foursquare API做搜索和自动补全。
用React做点夸张的动画！
如果不喜欢吃午餐，可以改成喝咖啡或鸡尾酒，或者其他更令人兴奋的事情。
Project 11：摸鱼之王



一个用来上班摸鱼的网站。在同一页里刷一刷Reddit、Hacker News、Product Hunt、Medium、Slashdot。
用Rails后端保存帐户和用户偏好，链接不同的API。也可以从客户端API直接获取数据。
Project 12：用Action Cable做聊天室



除了学习React，这是一个使用Action Cable很棒的小项目，Action Cable给Rails添加了WebSocket支持的5个新功能。请参阅以下示例开始使用：
https://github.com/rails/actioncable-examples
Project 13：Extra Small（复制Medium）



这一系列文章描述了如何使用Rails API app、 React和Flux来复制一个Medium。
https://github.com/FancyPixel/small-rails
FancyPixel/small-frontend
想要挑战自己可以试着不用Flux做。
Project 14：人脸标记器



一个可以上传照片和标记人脸的app（类似于Facebook）。使用OpenCV Ruby gem进行自动面部检测：
https://github.com/ruby-opencv/ruby-opencv
Project 15：ActiveAdmin前端修改



你可能在用ActiveAdmin来管理应用程序记录。但是它的UI比较单调。可以试着一次修改一个view，全部替换成样式漂亮的React组件来。查看ActiveAdmin代码：
https://github.com/activeadmin/activeadmin
Project 16：电商网店



如果不想在Rails中构建商店功能，可以用Spree并专注于练习React前端组件。
https://github.com/spree/spree
Project 17：邮箱RSS订阅



可以使用Mailchimp API或使用Sendgrid。如果用过Mailchimp，就会知道可以尝试构建许多功能——查看/过滤/管理订阅用户、设计表单，创建活动等等。
只要挑一项功能尝试构建。大多数功能都将涉及某种形式，因此这是一个将UI划分为可处理状态的React组件和一些无状态功能组件的好机会。
Project 18：Gmail on Rails



Gmail的界面非常复杂，但是可以从构建显示电子邮件的UI开始。或者搜索可能会更有趣？
使用google-api-client gem试着开始做：
https://github.com/markbrown4/gmail-react
Project 19：DJ Spotify



在Spotify的基础上构建的DJ app。获取建议，创建和混合播放列表，甚至允许其他人将歌曲添加到你的播放列表。
用Ruby wrapper gem来做Spotify API：
https://github.com/guilhermesad/rspotify
我之前就做了一个小app，简单易用。Spotify只支持音乐跟着播放器一起放，所以你得保持Spotify在运行中。
Project 20：Heroku控制面板



作为一名Rails开发者，你可能对Heroku非常熟悉。这是一个很棒的服务，可以快速部署和托管Rails app，当你需要学着做很多小东西时，这是完美的选择。
构建一个简单的控制面板来显示你做的app，让你可以快速查看每个app的关键信息。也可以添加编辑功能，这是第二步。
https://github.com/heroku/platform-api
Project 21：AWS S3客户端



构建一个漂亮的现代UI来管理AWS S3帐户。使用Ruby gem来构建一个简单的文件浏览器组件。然后添加一个表单组件来上传文件。
https://github.com/aws/aws-sdk-ruby
Project 22：Stripe数据分析面板



显示基于Stripe数据的分析和图标的控制面板，这个API文档非常棒，并且是学习D3的好机会。
http://www.reactd3.org/
https://github.com/QubitProducts/d3-react-sparkline
Project 23：Google数据分析面板



默认的Google数据分析面板非常混乱和迷惑。你可以构建一个更只显示最重要信息的简洁版。
另一个用D3的机会，你可以用另一个库。
通过这个gem来访问GA API。
Project 24：习惯追踪器



构建一个用于跟踪每日和每周习惯的app，比如早上例行要做的事，健身，跑步，烹饪，冥想，吉他练习，茶道。
可以看看Loop Habit Tracker和Coach 来获取灵感。
适配移动设备，以便随时随地使用它。熟悉React之后，你甚至可以使用React Native来构建手机app。
Project 25：健身控制面板



为所有个人健身数据构建一个控制面板，从不同的应用程序中获取数据，用漂亮的UI来显示有用的统计数据。
根据健身app的使用情况，你可以轻松地从许多API中获取数据——Fitbit、Google Fit、Moves、Runkeeper、Strava、Withings等等。
你甚至可以允许用户手动输入体重和健身计划这些内容。
可以先从显示数据开始做，在增加添加记录和分享的功能。
我做了一个基于Fitbit数据的app：
https://github.com/learnetto/reactfit
Project 26：你画我猜（游戏）



做一个你画我猜的游戏，可以用canvas来做画图。看看react-sketchpad来获取灵感：
https://github.com/svrcekmichal/react-sketchpad
用Rails来上传和保存图片，并在另一台机器上显示。
提高练习：加一个机器学习让机器来猜。
Project 27：You Write Like



做一个文本分类app，让你的写作风格和著名作者匹配，类似于I Write Like。
使用classifier-reborn来对文本进行分类，并使用React来处理表单。这个app大部分工作都是后端，所以试着做一些UI动画。
https://github.com/FormidableLabs/react-animations
Project 28：创意面板



做一个创意面板app，把创意放在不同的方形标签里进行显示。可以用来添加、修改和删除创意。
下面有两个教学视频，可以一步一步来学习：
https://learnetto.com/tutorials/rails-5-api-and-react-js-tutorial-how-to-make-an-idea-board-app
https://learnetto.com/tutorials/how-to-animate-a-component-using-react-transition-group
这些教程涵盖了许多实用概念，包括无状态功能组件，基于类的组件，使用axios进行API调用，immutability-helper等等。
现在，你有很多有趣的想法了，开始你的React on Rails之旅吧！

译自：

首发公众号：编程布道师 ProgrammingPreacher

中央空调新风净水

发发呆，回回帖，工作结束~