每次我开始教程时，我都会陷入困惑，想知道我应该构建哪个应用程序。待办事项？再没有！
如果您正在阅读这篇文章，那么您正在寻找一个想法，一个简单的应用程序，可以在您的教程或示例项目中使用它来测试新的框架或API，但是您找不到真正能引起您共鸣的东西。
它必须足够简单，但同时又要足够复杂才能值得。
我听到您在想：“我不想构建另一个待办应用程序”。
我写这篇文章是为了帮助自己，我希望这也会对您有所帮助。
有些想法是独立的（不涉及使用外部API），有些想法则使用了著名的公共API，您可以在其中轻松获取预先构建的数据。
有些需要服务器部分，有些则不需要，这也可能取决于您的实现。
但我尝试保留这些想法：
- 很好地建立一个教程
- 可以尝试使用网络技术
- 不需要花一个星期就能弄清楚的东西
- 不是“创业思路”
- 我的目标不是移动应用，而是网络应用
- 容易解释
- 易于构建（如果准备的话，不到24小时）
- 易于扩展的新功能
所以，足够多的谈话，这是清单！
简单的应用程序
体重追踪器应用
- 它接受一组在不同日期进行的体重测量的手动输入
- 它可以画一个图
- 它可以允许跟踪多个实体，例如一个人的体重
- 将它们存放在某个地方
计算器应用
标准计算器：数字，+，-，*，/和结果
图书数据库
- 输入您拥有的书
- 输入您要购买的书
- 存储书籍信息，图像
食谱应用
- 输入名称，说明和步骤
- 有图片
- 在难度和质量上有一些排名
- 添加所需的时间
- 每个步骤都有不同的图片
- 将它们存放在某个地方
账单追踪器
- 记录账单，金额和日期
- 列出账单
- 有一些图表（今年/去年）
- 将它们存放在某个地方
费用追踪器
- 记录费用，标记费用（或具有类别）
- 列出费用
- 有一些图表（上个月/去年）
- 将它们存放在某个地方
聊天应用
- 某种简化的松弛
- 人们未经身份验证即进入，并被分配一个名字，以备下次访问时使用
- 储存历史
- 添加通知
笔记应用
- 新增笔记
- 在边栏中列出所有笔记
- 将它们存放在某个地方
个人日记应用
- 添加带有日期和文本的条目
- 条目有日期
- 显示更多最新的第一
- 附上图片
- 将它们存放在某个地方
番茄程序
- 输入时间
- 启动计时器
- 时间到时提醒
一个模因发生器
- 有10个流行的米姆图片
- 让用户添加文字
- 结果是图像+文字
- 储存历史
井字游戏
我们都知道什么是井字游戏🙂
生活游戏
一个伟大的项目，涉及数学和图形。
博客引擎
- 允许登录并添加帖子
- 访客可以添加评论
- 将数据存储在某处
质量检查引擎
- 允许登录
- 允许添加问题
- 允许回答问题
- 允许原始用户选择最佳问题
- 将数据存储在某处
论坛引擎
- 允许登录
- 允许添加帖子
- 允许对帖子发表评论
- 将数据存储在某处
可嵌入的实时聊天
考虑对讲机或Olark。
- 有一个“后端”，您可以在其中做出回应
- 嵌入网页
- 让人们私下给您写信
API驱动的应用
黑客新闻客户端
- 列出热门帖子
- 显示帖子评论
- 显示用户个人资料
- 搜索HN
Reddit客户端
- 列出热门帖子
- 列出帖子的评论
- 显示用户个人资料
Instagram客户端
- 输入主题标签并获取最新帖子
- 输入用户名并获取最新帖子
- 允许存储一个或多个主题标签/用户名，并从中获取所有最新帖子
GitHub API客户端
- 列出今天/周/月的热门存储库
- 列出存储库中的最新提交
- 显示按星标排名的个人或组织公共存储库
Unsplash API客户端
- 按主题搜索图像
- 让用户输入一个术语，显示相关图像
开始于Unsplash API
您的示例应用程序的数据
有时，您开始做一些简单的应用程序，但是却无聊地找到可以使用的数据。您不必一定要使用真实数据或随机数据。
您可以在示例项目中使用的公共API
也许您有一个理想的CRUD应用程序想法，或者某个与API兼容的想法，但是您不想一开始就创建API。
我建议去看看空气台，它为开发人员提供了很好的API，非常易于使用，例如数据库。
您可以使用令人惊叹的公共API：
- 猫API
- 狗的API
- Chuck Norris API
- 滚蛋即服务API
- 报价API
- 报价API
- Spotify API
- 纽约时报API
- href="百科百科API
- Wikidata API
- 中型API
- 设计报价API
- GoodReads API
- Dribbble API
- 500px API
- Unsplash API
- Giphy API-GIF！
- png API
- 汇率
- 网站截图API
- 牛津字典API
- 网站技术API
- Mapbox API
- Genius的Music Lyrics API
- 网站元标记API
- EventBrite API
- 开源项目变更日志
- GitHub REST API
- GitHub GraphQL API
- QR码API
- StackExchange API
- 单词和同义词
- 美国国家航空航天局API
- SpaceX API
- 黑客新闻API
- Instagram API
- Reddit API
- Slack API
- Twitter API
- YouTube API
- 全球假期API
您的示例项目的图像占位符
影像产生器
头像：
- 机器人哈希
- 可爱的化身
- DiceBear头像（像素图）
用于示例项目的示例文本生成器
Lorem Ipsum很无聊。加香料：
如果您坚持使用Lorem Ipsum，牛至是一个很好的发电机。
其他虚假数据
伪JSON具有大量的伪造数据生成功能。
JSONPlaceholder包含伪造的帖子，评论，照片，待办事项，用户和相册，可供REST使用。
包起来
我希望这份清单足够全面，可以满足您的需求！
玩得开心！
免费下载我的JavaScript初学者手册
更多js教程：
- JavaScript中应避免的事情（不良部分）
- JavaScript中的延迟和承诺（+ Ember.js示例）
- 如何使用JavaScript将文件上传到服务器
- JavaScript编码风格
- JavaScript数组简介
- JavaScript编程语言简介
- 完整的ECMAScript 2015-2019指南
- 了解JavaScript承诺
- JavaScript的词汇结构
- JavaScript类型
- JavaScript变数
- 示例Web应用程序提示列表
- JavaScript函数式编程简介
- 具有Async和Await的现代异步JavaScript
- JavaScript循环和范围
- Map JavaScript数据结构
- 设置JavaScript数据结构
- JavaScript模板文字指南
- 学习JavaScript的路线图
- JavaScript表达式
- 发现JavaScript计时器
- JavaScript事件说明
- JavaScript循环
- 使用map，filter，reduce和find编写JavaScript循环
- JavaScript事件循环
- JavaScript函数
- JavaScript词汇表
- JavaScript闭包说明
- JavaScript Arrow函数教程
- JavaScript正则表达式指南
- 如何在JavaScript中检查字符串是否包含子字符串
- 如何从JavaScript中的数组中删除项目
- 如何深度克隆JavaScript对象
- Introduction to Unicode and UTF-8
- JavaScript中的Unicode
- 如何在JavaScript中大写字符串的第一个字母
- 如何在JavaScript中将数字格式化为货币值
- 如何在JavaScript中将字符串转换为数字
- 这在JavaScript中
- 如何在JavaScript中获取当前时间戳
- JavaScript严格模式
- JavaScript立即调用函数表达式（IIFE）
- 如何使用JavaScript重定向到另一个网页
- 如何从JavaScript对象中删除属性
- 如何在JavaScript中将项目追加到数组
- 如何检查JavaScript对象属性是否未定义
- ES模块简介
- CommonJS简介
- JavaScript异步编程和回调
- 如何替换JavaScript中所有出现的字符串
- 现代JavaScript语法快速参考指南
- 如何在JavaScript中修剪数字中的前导零
- 如何检查JavaScript对象
- 关于JavaScript日期的权威指南
- Moment.js教程
- JavaScript中的分号
- JavaScript算术运算符
- JavaScript Math对象
- 在JavaScript中生成随机且唯一的字符串
- 如何使您的JavaScript函数进入睡眠状态
- JavaScript原型继承
- JavaScript例外
- 如何使用JavaScript类
- JavaScript食谱
- JavaScript中的引号
- 如何在JavaScript中验证电子邮件地址
- 如何获取JavaScript数组中一组对象的唯一属性
- 如何在JavaScript中检查字符串是否以另一个字符串开头
- 如何在JavaScript中创建多行字符串
- ES6指南
- 如何在JavaScript中获取当前URL
- ES2016指南
- 如何使用JavaScript中的值初始化新数组
- ES2017指南
- ES2018指南
- 如何在Array.prototype.map（）中使用Async和Await
- 异步与同步代码
- 如何在JavaScript中生成两个数字之间的随机数
- HTML Canvas API教程
- 如何在JavaScript中的for-of循环中获取迭代的索引
- 什么是单页应用程序？
- WebAssembly简介
- JSON简介
- JSONP指南
- Should you use or learn jQuery in 2020?
- 如何使用纯JavaScript隐藏DOM元素
- 如何在JavaScript中合并两个对象
- 如何清空JavaScript数组
- 如何使用JavaScript编码URL
- 如何在JavaScript中设置默认参数值
- 如何在JavaScript中按属性值对对象数组进行排序
- 如何计算JavaScript对象中的属性数量
- JavaScript中的call（）和apply（）
- WebRTC库PeerJS简介
- 使用Rest and Spread处理对象和数组
- 用JavaScript分解对象和数组
- 调试JavaScript的权威指南
- TypeScript指南
- 在JavaScript中动态选择对象的方法
- 将undefined传递给JavaScript立即调用的函数表达式
- 松散类型与强类型语言
- 如何使用JavaScript设置DOM元素的样式
- 用JavaScript投放
- JavaScript生成器教程
- node_modules文件夹的大小不是问题。这是一种特权
- 在JavaScript中导入模块时如何解决意外的标识符错误
- 如何在JavaScript中列出对象的所有方法
- 字符串replace（）方法
- 字符串search（）方法
- 我如何运行一些JavaScript代码段
- ES2019指南
- 字符串charAt（）方法
- 字符串charCodeAt（）方法
- 字符串codePointAt（）方法
- 字符串concat（）方法
- 字符串endsWith（）方法
- 字符串include（）方法
- 字符串indexOf（）方法
- 字符串lastIndexOf（）方法
- 字符串localeCompare（）方法
- 字符串match（）方法
- 字符串normalize（）方法
- 字符串padEnd（）方法
- 字符串padStart（）方法
- 字符串repeat（）方法
- 字符串slice（）方法
- 字符串split（）方法
- 字符串startsWith（）方法
- String substring（）方法
- 字符串toLocaleLowerCase（）方法
- 字符串toLocaleUpperCase（）方法
- String toLowerCase（）方法
- 字符串toString（）方法
- String toUpperCase（）方法
- 字符串trim（）方法
- String trimEnd（）方法
- String trimStart（）方法
- JavaScript的记忆化
- 字符串valueOf（）方法
- JavaScript参考：字符串
- Number isInteger（）方法
- Number isNaN（）方法
- Number isSafeInteger（）方法
- Number parseFloat（）方法
- Number parseInt（）方法
- Number toString（）方法
- Number valueOf（）方法
- Number toPrecision（）方法
- Number toExponential（）方法
- Number toLocaleString（）方法
- Number toFixed（）方法
- Number isFinite（）方法
- JavaScript参考：数字
- JavaScript属性描述符
- 对象的assign（）方法
- 对象的create（）方法
- Object defineProperties（）方法
- Object defineProperty（）方法
- 对象entry（）方法
- 对象Frozen（）方法
- Object getOwnPropertyDescriptor（）方法
- Object getOwnPropertyDescriptors（）方法
- Object getOwnPropertyNames（）方法
- Object getOwnPropertySymbols（）方法
- Object getPrototypeOf（）方法
- Object is（）方法
- Object isExtensible（）方法
- Object isFrozen（）方法
- Object isSealed（）方法
- 对象keys（）方法
- 对象的preventExtensions（）方法
- 对象seal（）方法
- Object setPrototypeOf（）方法
- Object values（）方法
- 对象的hasOwnProperty（）方法
- Object isPrototypeOf（）方法
- 对象的propertyIsEnumerable（）方法
- Object toLocaleString（）方法
- Object toString（）方法
- Object valueOf（）方法
- JavaScript参考：对象
- JavaScript赋值运算符
- JavaScript国际化
- JavaScript typeof运算子
- JavaScript新运算符
- JavaScript比较运算符
- JavaScript运算符优先级规则
- JavaScript instanceof运算符
- JavaScript陈述式
- JavaScript范围
- JavaScript类型转换（广播）
- JavaScript相等运算符
- JavaScript if / else条件
- JavaScript切换条件
- JavaScript删除运算符
- JavaScript函数参数
- JavaScript Spread运算符
- JavaScript返回值
- JavaScript逻辑运算符
- JavaScript三元运算符
- JavaScript递归
- JavaScript对象属性
- JavaScript错误对象
- JavaScript全局对象
- JavaScript filter（）函数
- JavaScript map（）函数
- JavaScript reduce（）函数
- JavaScript`in`运算子
- JavaScript运算子
- 如何在JavaScript中获取CSS属性的值
- 如何将事件侦听器添加到JavaScript中的多个元素
- JavaScript私有类字段
- 如何在JavaScript中按日期值对数组排序
- JavaScript公共类字段
- JavaScript符号
- 如何使用JavaScript bcrypt库
- 使用对象解构时如何重命名字段
- 如何在不使用TypeScript的情况下检查JavaScript中的类型
- 如何检查JavaScript数组是否包含特定值
- 双重否定运算符是什么！用JavaScript做吗？
- JavaScript比较中应使用哪个等号运算符？ == vs ===
- JavaScript仍然值得学习吗？
- 如何在JavaScript中返回异步函数的结果
- 如何在JavaScript中检查对象是否为空
- 如何突破JavaScript中的for循环
- 如何在JavaScript中的特定索引处将项目添加到数组
- 为什么不应该修改JavaScript对象原型
- 在JavaScript中使用let和var有什么区别？
- 用于激活JavaScript功能的链接
- 如何在JavaScript中连接两个字符串
- 如何在JavaScript中连接两个数组
- 如何检查JavaScript值是否为数组？
- 如何在JavaScript中获取数组的最后一个元素？
- 如何使用Axios发送urlencoded数据
- 如何使用JavaScript获取明天的日期
- 如何使用JavaScript获取昨天的日期
- 如何从JavaScript日期获取月份名称
- 如何检查两个日期是否在JavaScript中是同一天
- 如何在JavaScript中检查日期是否指向过去的一天
- 标有JavaScript的语句
- 如何等待2个或更多的Promise在JavaScript中解析
- 如何在JavaScript中获取两个日期之间的日期
- 如何使用提取上传文件
- 如何在JavaScript中格式化日期
- 如何遍历JavaScript中的对象属性
- 如何在JavaScript中计算两个日期之间的天数
- 如何在ES模块中使用顶级等待
- JavaScript动态导入
- JavaScript可选链接
- 如何在JavaScript中替换字符串内的空格
- JavaScript空合并
- 如何在JavaScript中展平数组
- JavaScript的十年
- 如何使用Axios发送授权标头
- JavaScript中的关键字和保留字列表
- 如何在JavaScript中将数组转换为字符串
- 如何删除所有的node_modules文件夹内容
- 如何从JavaScript数组中删除重复项
- 在JavaScript中让vs const
- 各种JavaScript库中的相同POST API调用
- 如何在JS中获取数组中的前n个项目
- 如何在JS中将数组划分为多个相等的部分
- 如何减慢JavaScript中的循环
- 如何在HTML画布中加载图像
- 如何在JavaScript中将字符串切成单词
- 如何在JavaScript中将数组分成两半
- 如何将文本写入HTML画布
- 如何在JavaScript中删除字符串的最后一个字符
- 如何在JavaScript中删除字符串的第一个字符
- 如何修复TypeError：无法分配为只读对象“＃＆lt; Object＆gt;”的属性“ exports”错误
- 如何创建退出意图弹出窗口
- 如何检查一个元素是否是另一个元素的后代
- 如何对每个Axios请求强制使用凭据
- 如何解决JavaScript中的“不是函数”错误
- 盖茨比，如何更改图标
- 使用Gatsby加载外部JS文件
- 如何使用JavaScript检测暗模式
- 包裹，如何修复“ regeneratorRuntime未定义”错误
- 如何检测Adblocker是否与JavaScript一起使用
- 使用TypeScript中的类型进行对象分解
- Deno手册：Deno的简要介绍🦕
- 如何使用JavaScript获取路径或URL的最后一段
- 如何随机播放JavaScript数组中的元素
- 如何检查JavaScript对象中是否存在密钥
- 事件冒泡和事件捕获
- event.stopPropagation与event.preventDefault（）与在DOM事件中返回false
- JavaScript中的原始类型与对象
- 在JavaScript中，如何判断值的类型？
- 如何从JavaScript中的函数返回多个值
- JavaScript中的箭头函数与常规函数
- 我们可以通过哪些方式访问对象属性的值？
- JavaScript中的null和undefined有什么区别？
- 方法和函数有什么区别？
- 我们可以通过哪些方法摆脱JavaScript循环？
- JavaScript for..of循环
- 什么是JavaScript中的对象解构？
- JavaScript吊起了什么？
- 如何使用JavaScript将逗号更改为点
- 使用DOM时计时的重要性
- 如何反转JavaScript数组
- 如何在JavaScript中检查值是否为数字
- 如何在JavaScript函数中接受无限的参数
- JavaScript代理对象
- 使用香草JavaScript在浏览器中进行事件委托
- JavaScript super关键字
- XState简介
- 值是通过引用传递还是通过JavaScript中的值传递？
- JavaScript中的自定义事件
- JavaScript中的自定义错误
- JavaScript中的命名空间
- JavaScript中逗号的奇怪用法
- JavaScript中的链接方法调用
- 如何处理承诺拒绝
- 如何在JavaScript中交换两个数组元素
- 如何在使用Gitbook时解决“ cb.apply不是函数”错误
- 如何在JavaScript中的数组开头添加项目
- Gatsby，修复“找不到模块gatsby-cli / lib / reporter”错误
- 如何获取JavaScript数组中项目的索引
- 如何在JavaScript中测试空对象
- 如何将对象解构为JavaScript中的现有变量
- 数组JavaScript数据结构
- 堆栈JavaScript数据结构
- JavaScript数据结构：队列
- JavaScript数据结构：集
- JavaScript数据结构：字典
- JavaScript数据结构：链接列表
- JavaScript，如何导出函数
- JavaScript，如何导出多个功能
- JavaScript，如何退出功能
- JavaScript，如何在字符串中查找字符
- JavaScript，如何过滤数组
- JavaScript，如何扩展类
- JavaScript，如何在数组中查找重复项
- JavaScript，如何替换数组的项
- JavaScript算法：线性搜索
- JavaScript算法：二进制搜索
- JavaScript算法：选择排序
- JavaScript算法：Quicksort
- JavaScript算法：合并排序
- JavaScript算法：冒泡排序