这是我在 2021 年 2021 年收集的50 个酷 Web 和移动项目创意。我将仅将其用作示例，以便您了解如何使用自己的技术堆栈构建这些应用程序。每个项目都有初级、中级或高级的编程级别。这些应用程序可以使用前端、后端或全栈技能创建。这些只是例子，没有什么是一成不变的。在现实世界的案例中，您需要证明拥有 SQL 或 NoSQL 后端的最佳用例是合理的。至于编程水平，这只是我个人的看法，每个人都不一样，所以请自行判断。我已经包含了该应用程序可以做什么的基本简介。当然，我相信您可以想出更多方法来增加功能列表，所以我们继续。其中一些应用程序可以货币化并用作 IaaS、PaaS 或 SaaS。查看这篇文章以了解它们是什么https://www.ibm.com/cloud/learn/iaas-paas-saas以及如何将它们应用到您的项目中。我目前的技术堆栈是：前端：HTML、CSS、JavaScript、TypeScript、React、React Native、Redux后端：Python、C#、NodeJS、SQL、NoSQL、Docker初学者1. 矢量托管平台开发一个平台，设计师/开发人员可以上传和存储自定义 SVG 图像和图标。然后可以导出代码，以便其他人可以使用它们。你会学到什么您将学习如何构建将 SVG 数据存储在数据库中的 CRUD 应用程序。然后，代码可以与生成的 SVG 图标或图像一起显示在前端。如果您也允许人们留下评分和评论，则此应用程序可能会更进一步。以及拥有许可协议甚至用户配置文件。技术栈项目类型：全栈前端：HTML、CSS、JavaScript、React后端：NodeJS、NoSQL2.技术栈推荐工具您以表格形式回答一些问题，然后它会为您推荐可用于项目的技术堆栈。如果您只是在学习如何编码，它甚至可以为您提供一条可能的职业道路。链接到课程并说明您应该使用某项技能的原因。你会学到什么您将学习如何在前端处理表单数据并导航到不同的屏幕。或者，您可以在获取表单来计算数据时选择隐藏和显示组件。技术栈项目类型：前端前端：HTML、CSS、JavaScript、React后端：可选3. 在 Twitter/LinkedIn 上寻找开发者的平台专门从事技术写作、css 艺术、twitter 空间、web3、NFT 等的开发人员的精选列表……这样我们就不必随机搜索社交媒体，而是可以去平台找到每个人及其利基市场很容易跟随他们。您还可以按位置和其他因素进行过滤和排序。你会学到什么您将学习如何从 API 检索数据并将其显示在页面上。这也是学习 DOM 遍历和使用映射、排序和过滤来更改对象数组中的数据的好机会。技术栈项目类型：全栈前端：HTML、CSS、JavaScript、React后端：NodeJS4.品牌生成器平台该平台创建品牌颜色、随机生成的 SVG 徽标选择和排版建议等……基于您回答的问题，或者可能涉及某种形式的机器学习。你会学到什么您将学习如何收集表单数据，然后在网页上显示结果。您甚至可以想办法将它与 3rd 方 API 结合起来以扩展功能。技术栈项目类型：全栈前端：HTML、CSS、JavaScript、React后端：NodeJS、NoSQL5. 开发者环境生成器用户在表单中输入技术堆栈，它会自动告诉您要安装哪些软件以及代码片段、stackoverflow 故障排除等……你会学到什么您将学习如何根据用户通过表单输入的数据在页面上生成信息。技术栈项目类型：前端前端：HTML、CSS、JavaScript、React后端：可选6. 开发者设置推荐网站一个精选列表网站，其中包含计算机推荐、键盘、站立式办公桌、椅子等……你会学到什么您将学习如何采用表单输入，将基于字段的数据输出到网页上。对于这个应用程序，您可以创建自己的后端 api 或找到一些现有的来代替使用。技术栈项目类型：全栈前端：HTML、CSS、JavaScript、React后端：NodeJS、NoSQL7.废弃的开发者项目查找器一个平台，您可以在其中列出您放弃的开发人员项目，并让其他开发人员捡起它们并继续开发它们。你会学到什么您将学习如何构建具有用户配置文件的 CRUD 应用程序。在平台上应该有一个部分供人们列出项目和搜索功能，以便其他开发人员可以找到它们。这里有很多开发功能丰富的应用程序的空间。技术栈项目类型：全栈前端：HTML、CSS、JavaScript、React后端：NodeJS、NoSQL8. 入职网站一份列出不同职业道路的列表，以及有关了解不同技术堆栈的信息。你会学到什么您将学习如何创建显示技术堆栈列表的网站或应用程序。每个技术堆栈都应该有一个详细的演练，其中包含用于学习主题的文本、图像或链接。技术栈项目类型：前端前端：HTML、CSS、JavaScript、React后端：可选9. Wordle 克隆是的，我知道已经有几十个 Wordle 克隆，但这并不意味着您不应该尝试创建自己的克隆。通过添加更多选项来更进一步，例如选择不同的语言、使用名称而不是单词、添加时间限制或尝试猜测每一行。天空才是极限！你会学到什么您将学习如何创建一个使用 DOM 遍历和事件侦听器的应用程序。如果您愿意，您可以创建自己的单词列表或使用单词 API。技术栈项目类型：前端前端：HTML、CSS、JavaScript后端：可选10. 目标跟踪应用跟踪您的情绪以及每日、每周和每月目标。你会学到什么您将学习如何持久化数据和状态更改。如果您选择使用后端，数据可以存储在本地存储或数据库中。技术栈项目类型：前端前端：HTML、CSS、JavaScript、React后端：可选11.随机对话生成器一个随机创建潜在对话主题的应用程序，因此您无需再担心那些尴尬的沉默。它甚至可以按主题、级别、深度等进行定制和过滤……你会学到什么您将学习如何创建具有不同数据的对象数组。以及如何随机选择它们。技术栈项目类型：前端前端：HTML、CSS、JavaScript后端：可选12.工资计算器创建一个应用程序，该应用程序可以根据某人的技能、经验、货币和其他因素（如位置等）计算应该赚多少薪水……你会学到什么您将学习如何使用数学和其他运算符在 JavaScript 中进行计算。某种形式需要具有可以转换的数据。数据应显示在网页上。技术栈项目类型：前端前端：HTML、CSS、JavaScript后端：可选13.随机播放列表生成器一个可以为您的播放列表随机生成歌曲列表的应用程序。它可以考虑各种过滤器，例如您的喜好、年份、流派、您计划听一首歌的时间等……然后它会根据这些参数创建一个播放列表。你会学到什么您将学习如何处理函数、循环和 DOM 遍历等。技术栈项目类型：前端前端：HTML、CSS、JavaScript、React后端：可选14. 开发者资料卡您可以创建一个应用程序来自动生成具有您的个人资料的图像或某些数据。它可以包含您的照片、姓名、职位和技术堆栈。还应该可以进行一些自定义，例如更改字体、颜色和设计。你会学到什么您将学习如何进行 DOM 遍历以及如何使用 JavaScript 中的表单来捕获和返回将显示在网页上的数据。交互性是一项要求，因为用户需要更改字体、颜色和设计风格。技术栈项目类型：前端前端：HTML、CSS、JavaScript、React后端：可选15.响应式动画幻灯片创建响应式动画幻灯片应用程序。它可以为用户提供许多自定义选项。作为奖励，您甚至可以将其转换为 npm 包，以便其他人可以将其集成到他们的项目中。你会学到什么您将学习如何与 DOM 交互并使用结合图像的动画来创建幻灯片。技术栈项目类型：前端前端：HTML、CSS、JavaScript、React后端：可选16.电脑游戏演练为什么不创建一个托管电脑游戏演练的平台？它可以是一款电脑游戏的独立应用程序。或者你可以让它更高级，以便它包含许多游戏的教程。此应用程序可以像您希望的那样简单或高级。甚至有可能添加大量某种形式的交互性。你会学到什么您将学习如何构建交互式网站。技术栈项目类型：前端前端：HTML、CSS、JavaScript、React后端：可选17. 纸牌游戏您可以尝试重新创建流行的纸牌游戏，例如二十一点或扑克。或者您可以创建某种自定义纸牌游戏。你会学到什么您将学习如何创建一个互动游戏，让至少两个玩家一起玩。如果您可以让游戏与多个玩家一起工作，或者想办法让计算机与您对战，则可以进一步增强这些功能。技术栈项目类型：前端前端：HTML、CSS、JavaScript、React后端：可选18. 货币转换器用于转换不同的货币你会学到什么您将学习如何使用数学和使用 JavaScript 进行数字计算。技术栈项目类型：前端前端：HTML、CSS、JavaScript后端：可选19. 网站克隆找到一个非常酷的网站并对其进行克隆。如果您刚刚开始，请先尝试重新创建一个简单的网站，例如投资组合或新闻网站。当你开始变得更有野心时，就去尝试一些复杂的东西，比如 Twitter、YouTube 或 Instagram。你会学到什么如何使用 HTML、CSS 和 JavaScript 构建网站。技术栈项目类型：前端前端：HTML、CSS、JavaScript、React后端：可选这是针对初学者的20个项目，希望你能喜欢。七爪源码网7claw.com