示例Web应用程序提示列表

每次我开始教程时,我都会陷入困惑,想知道我应该构建哪个应用程序。待办事项?再没有!

如果您正在阅读这篇文章,那么您正在寻找一个想法,一个简单的应用程序,可以在您的教程或示例项目中使用它来测试新的框架或API,但是您找不到真正能引起您共鸣的东西。

它必须足够简单,但同时又要足够复杂才能值得。

我听到您在想:“我不想构建另一个待办应用程序”。

我写这篇文章是为了帮助自己,我希望这也会对您有所帮助。

有些想法是独立的(不涉及使用外部API),有些想法则使用了著名的公共API,您可以在其中轻松获取预先构建的数据。

有些需要服务器部分,有些则不需要,这也可能取决于您的实现。

但我尝试保留这些想法:

  • 很好地建立一个教程
  • 可以尝试使用网络技术
  • 不需要花一个星期就能弄清楚的东西
  • 不是“创业思路”
  • 我的目标不是移动应用,而是网络应用
  • 容易解释
  • 易于构建(如果准备的话,不到24小时)
  • 易于扩展的新功能

所以,足够多的谈话,这是清单!

简单的应用程序

体重追踪器应用

  • 它接受一组在不同日期进行的体重测量的手动输入
  • 它可以画一个图
  • 它可以允许跟踪多个实体,例如一个人的体重
  • 将它们存放在某个地方

计算器应用

标准计算器:数字,+,-,*,/和结果

观看视频教程

图书数据库

  • 输入您拥有的书
  • 输入您要购买的书
  • 存储书籍信息,图像

食谱应用

  • 输入名称,说明和步骤
  • 有图片
  • 在难度和质量上有一些排名
  • 添加所需的时间
  • 每个步骤都有不同的图片
  • 将它们存放在某个地方

观看视频教程

账单追踪器

  • 记录账单,金额和日期
  • 列出账单
  • 有一些图表(今年/去年)
  • 将它们存放在某个地方

费用追踪器

  • 记录费用,标记费用(或具有类别)
  • 列出费用
  • 有一些图表(上个月/去年)
  • 将它们存放在某个地方

聊天应用

  • 某种简化的松弛
  • 人们未经身份验证即进入,并被分配一个名字,以备下次访问时使用
  • 储存历史
  • 添加通知

笔记应用

  • 新增笔记
  • 在边栏中列出所有笔记
  • 将它们存放在某个地方

个人日记应用

  • 添加带有日期和文本的条目
  • 条目有日期
  • 显示更多最新的第一
  • 附上图片
  • 将它们存放在某个地方

番茄程序

  • 输入时间
  • 启动计时器
  • 时间到时提醒

观看视频教程

一个模因发生器

  • 有10个流行的米姆图片
  • 让用户添加文字
  • 结果是图像+文字
  • 储存历史

井字游戏

我们都知道什么是井字游戏🙂

观看视频教程

生活游戏

一个伟大的项目,涉及数学和图形。

观看视频教程

博客引擎

  • 允许登录并添加帖子
  • 访客可以添加评论
  • 将数据存储在某处

质量检查引擎

  • 允许登录
  • 允许添加问题
  • 允许回答问题
  • 允许原始用户选择最佳问题
  • 将数据存储在某处

论坛引擎

  • 允许登录
  • 允许添加帖子
  • 允许对帖子发表评论
  • 将数据存储在某处

可嵌入的实时聊天

考虑对讲机或Olark。

  • 有一个“后端”,您可以在其中做出回应
  • 嵌入网页
  • 让人们私下给您写信

API驱动的应用

黑客新闻客户端

  • 列出热门帖子
  • 显示帖子评论
  • 显示用户个人资料
  • 搜索HN

查看汉普骇客骇客新闻寻求灵感

Reddit客户端

  • 列出热门帖子
  • 列出帖子的评论
  • 显示用户个人资料

Instagram客户端

  • 输入主题标签并获取最新帖子
  • 输入用户名并获取最新帖子
  • 允许存储一个或多个主题标签/用户名,并从中获取所有最新帖子

GitHub API客户端

  • 列出今天/周/月的热门存储库
  • 列出存储库中的最新提交
  • 显示按星标排名的个人或组织公共存储库

Unsplash API客户端

  • 按主题搜索图像
  • 让用户输入一个术语,显示相关图像

开始于Unsplash API


您的示例应用程序的数据

有时,您开始做一些简单的应用程序,但是却无聊地找到可以使用的数据。您不必一定要使用真实数据或随机数据。

您可以在示例项目中使用的公共API

也许您有一个理想的CRUD应用程序想法,或者某个与API兼容的想法,但是您不想一开始就创建API。

我建议去看看空气台,它为开发人员提供了很好的API,非常易于使用,例如数据库。

您可以使用令人惊叹的公共API:

您的示例项目的图像占位符

影像产生器

头像:

用于示例项目的示例文本生成器

Lorem Ipsum很无聊。加香料:

如果您坚持使用Lorem Ipsum,牛至是一个很好的发电机。

其他虚假数据

伪JSON具有大量的伪造数据生成功能。

JSONPlaceholder包含伪造的帖子,评论,照片,待办事项,用户和相册,可供REST使用。

需要假名称/用户数据生成?查看UI名称随机用户

包起来

我希望这份清单足够全面,可以满足您的需求!

玩得开心!

免费下载我的JavaScript初学者手册


更多js教程: