我是如何用 0 美元搭建一个 Web 开发挑战网站的（你也可以做到！）

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

如果你正在寻找灵感来构建自己的副业项目，那么这篇博文正适合你！我将分享我在构建FrontendPro网站过程中获得的经验和心得。FrontendPro 是一个提供各种前端开发挑战的网站，旨在帮助你提升编码技能，并在 Web 开发方面取得进步。

在正式开始之前，我想先自我介绍一下。

大家好👋，我叫Rishi Purwar，来自印度🇮🇳，是一名开发者。我热爱Web开发，并且已经做了一段时间的业余项目。
此外，我还入选了Google Summer of Code的Postman项目。目前，我是印度斋浦尔MNIT学院化学工程专业的大四学生。

🚀 什么是 FrontendPro？

FrontendPro是一个开源平台，旨在提供各种各样的真实 UI 挑战。这些挑战旨在帮助您提升 Web 开发技能，并构建出色的项目作品集。您可以从 FrontendPro 上众多挑战中选择自己感兴趣的项目。完成挑战后，您可以与其他优秀的开发者分享，他们会提供宝贵的反馈意见。

👷‍♂️ 我为什么要创建 FrontendPro？

您可能想知道我为什么开发 FrontendPro，它有哪些优势？让我们来看看这些要点——

• 学习网页开发的方法有很多。大多数人都是从教程开始，但这远远不够。你需要自己动手做项目才能增强技能信心，但如果你没有项目构思，就无从下手。这就是我创建 FrontendPro 的原因——让你通过实践不断提升网页开发技能，并打造出色的项目作品集。
• 科技行业瞬息万变，企业评估候选人的方式也随之改变。如今，越来越多的企业会布置居家项目作为评估手段。这无疑是评估候选人工作能力的有效方法，但候选人往往难以了解项目的具体要求，也难以制定合适的策略来完成下一个实际工作中的居家挑战。我们提供的平台旨在帮助候选人通过解决 FrontendPro 的挑战来熟悉居家项目，并制定相应的策略来应对下一个实际工作中的居家挑战。
• 我还意识到，虽然很多人通过博客和推特分享了一些很棒的项目创意，我们可以利用这些创意来提升我们的网页开发技能，但他们并不总是分享用户界面设计，所以对于新手来说，如果没有合适的用户界面设计，就很难进行编码。因此，我在 FrontendPro 上整理了一份挑战清单（之后会添加更多），我认为这些挑战对开发者社区会有所帮助。
• 我希望将 FrontendPro 打造成一个功能齐全的平台，开发者可以在这里磨练他们的 Web 开发技能，构建一些很棒的项目，并通过在作品集中展示这些项目来找到工作。

👨‍💻 技术栈

以下是我在此项目中使用的主要技术：

• 前端：我使用ReactJs开发了网站的前端。
• CSS框架：我选择使用TailwindCSS，这是一个实用性优先的CSS框架。
• 后端：我使用了Firebase作为后端。它简单易用、可靠、快速，而且因为我选择了免费套餐，所以一分钱都没花！
• 图片和文件托管：我使用Cloudinary来托管网站的图片和文件。Cloudinary 是一款基于云的图片管理解决方案，让我可以托管、管理和提供网站的图片和文件。由于我选择了他们的免费套餐，所以无需支付任何费用，而免费套餐目前完全满足我的项目需求。
• 域名：我从name.com购买了一个域名。但幸运的是，我通过GitHub 学生开发者包免费获得了它。如果你也像我一样是一名学生，那么请访问https://education.github.com/pack并注册。
• 网站托管：我的网站托管在Vercel上，Vercel 是一家静态网站托管服务商。它非常易用，而且每月费用为 0 美元。
• 电子报：我使用了Typeform Newsletter ，因为它是我从GitHub 学生开发者包中免费获得的。它非常易用，设置表单的过程也很顺利。自定义也很容易。如果您正在寻找一种将电子报轻松集成到网站的方法，这可能是一个不错的选择！

• 图标/插图：我选择使用Font Awesome和Pixeltrue。由于这两家都提供免费的图标和插图，所以我无需支付任何费用。

  我为什么选择 ReactJs？

  你可能想知道我为什么使用 ReactJs。它有哪些优势？让我们来看看这些要点——

• 当我开始构建这个项目时，React 非常流行（现在依然很火），这意味着 React 拥有强大的开发者社区，因此我们可以轻松找到优秀的文档、教程、大量的开源组件和 NPM 包。如果在构建过程中遇到问题，我们可以相对快速地找到帮助或解决方案，最重要的是，Stack Overflow 上有海量的 React 问答😂。

• React 的学习曲线非常平缓。与其他前端框架或库相比，它更容易上手。如果您具备 HTML、CSS 和 JS 的基础知识，就可以快速开始使用 ReactJs。

• 在开始这个项目的时候，我对 ReactJs 的了解并不深入，只是略知一二。所以，我非常希望通过做一个小项目来深入学习 React。在开发这个项目的过程中，我学到了很多关于 React 的知识，比如如何使用Context API和Reducers来管理应用状态、代码分割、懒加载、Suspense 等等。

  我为什么选择 Firebase？

  使用 Firebase 作为后端有很多优势。让我们来看看其中的一些：

• Firebase 设置起来非常简单，不仅对我来说如此，对你来说也是如此。只需几分钟即可上手，而且无需维护或部署任何服务器。我也不用担心项目扩展到成千上万用户时会遇到问题。

• 它还提供了开箱即用的身份验证功能，因此我们不需要从头开始编写复杂的身份验证代码（这节省了我们很多时间）。

• 我希望使用实时数据库，这样数据库中的任何更改都能立即反映在用户界面上，而无需刷新页面。这有助于我为解决方案详情页面构建一个更加动态的评论和表情符号系统。

这就是我选择 Firebase 的原因，因为它让我能够更专注于网站开发，而不是从头开始编写整个服务器代码。

我为什么选择 Tailwind CSS？

TailwindCSS 有诸多优点，使其成为理想的 CSS 框架。让我们来看看其中的一些优点：

• 这样可以大大加快样式设计过程，因为我们不必离开标记；我们可以同时编写网站的 CSS 和 HTML。
• TailwindCSS v3.0在底层使用了即时引擎，这确实有助于我们获得更好的浏览器性能、更小的 CSS 文件大小和闪电般的构建速度。
• TailwindCSS 提供了许多预置的尺寸和颜色类，完全消除了从头开始实现设计系统的需要。
• 我们可以使用 TailwindCSS 快速实现媒体查询，使我们的网站具有响应式设计。

💡我的学习和经验

我非常喜欢搭建这个网站，在搭建 FrontendPro 的过程中我学到了很多东西，而且现在还在不断学习。这段经历真的让我受益匪浅。以下是我从这段经历中学到的一些东西：

• 我在开发 FrontendPro 的过程中学到的第一件事就是，我还有很多需要改进的地方。不过没关系，因为编程的知识是无穷无尽的。所以，如果你有什么不懂的地方，而且这种不懂让你抓耳挠腮——那就尽管问吧！
• 我还了解到许多提升 React 应用性能的方法，代码拆分和懒加载就是其中两种。这些技术可以将大型代码包拆分成多个可动态加载的小型代码包，从而减小包的大小，提升用户体验。这项技术帮助我们避免了大型代码包带来的性能问题，而无需实际减少 React 应用中的代码量。
• 升级第三方依赖项或模块可能颇具挑战性。升级过程有时需要重写一些现有代码，使其能够按照最新语法兼容新版本，从而避免错误或提高代码可读性。最近，我在生产环境中将 Firebase 从 v7 升级到了 v9，并将 React Router DOM 从 v5 升级到了 v6。您将在下一节中找到更多相关信息。
• 无论你是开发单页应用还是构建多页网站，在将应用上线生产环境之前，跨浏览器测试都是必不可少的步骤。我使用 BrowserStack 在不同的设备和浏览器上测试了我的 React 应用。这个工具是我从GitHub 学生开发者计划中免费获得的。
• 搜索引擎优化（SEO）不可或缺。它在通过搜索引擎结果获取流量方面发挥着重要作用。这也有助于提高我们网站的曝光率。
• 在加入 FrontendPro 之前，我从未注册过新域名。我一直把所有项目免费部署在 Vercel 或 Netlify 上。这是我第一次注册域名，幸运的是，我免费获得了这个域名（再次感谢 GitHub 学生开发者包）。注册域名后，我将项目托管在 Vercel 上，以利用其 Vercel Edge 网络压缩功能，从而获得更好的性能。
• 除此之外，我还学习了更多关于维护代码质量和一致性的工具。我学会了如何配置 ESLint 和 Prettier 来查找潜在的错误和不良实践，并维护我们项目中的代码风格。

这只是我在开发 FrontendPro 过程中学到的一小部分知识，希望将来能学到更多。

🛠 近期改进

我最近致力于提升用户体验和加快网站速度。我参与了许多不同的工作，包括修复漏洞和添加新功能。以下是我参与的工作列表：

• 为了鼓励协作并提高开发者的参与度，我开始在解决方案详情页面添加评论区。这样，其他开发者就可以对其他开发者提交的解决方案提供建设性的反馈。这项功能已接近完成，很快就会上线。以下是这项新功能的预览！👀
• 为了让我们的应用更有趣、更刺激，我添加了一个彩带动画，当用户提交挑战答案时就会播放。它看起来很棒，也让学习体验更加有趣。这里先给大家预览一下这个功能！👀
• 我最近将 Firebase 从 v7 升级到了 v9，并将 React Router DOM 从 v5 升级到了 v6。升级 Firebase 的原因是 v9 版本可以显著减小应用体积。它采用了现代 JavaScript 模块格式，支持“摇树优化”（tree shaking）实践，即只导入应用所需的组件。根据应用的不同，使用 v9 版本进行摇树优化后，应用体积可以比使用 v8 版本构建的同类应用减少 80% KB。
• 我还改进了AuthContext代码，使其更易读、模块化且可复用。此外，我还编写了一些新的自定义钩子，用于从 Firebase 获取数据，从而简化了应用程序的状态管理，这些钩子也帮助我减少了对 Firebase 的读取次数。这些自定义钩子完全可复用，因此我可以在其他项目中直接使用它们，而无需进行太多修改。

🤔 未来计划

我们的路线图上有很多新内容。这里我列举其中一些：

• 我们计划在解决方案详情页面的评论区添加类似 Hashnode 的表情符号系统。表情符号系统非常棒，因为它能让你以一种有趣且富有创意的方式与其他开发者互动。
• 我们和你们一样喜欢有趣的前端挑战，但我们也希望在 FrontendPro 上添加全栈挑战，以便开发人员能够将他们的全栈知识应用于实践。
• 除了在平台上添加前端和全栈挑战之外，我还计划在 FrontendPro 上添加 Web 3 挑战，以便 Web 3 开发人员可以为他们的作品集构建出色的 Web3 项目。

我们一直都在寻求用户的反馈，所以如果您有任何建议或新功能想法，请在 GitHub 上提交issue ，或者在我们的Discord 服务器上分享您的想法。您也可以分享新的挑战创意，甚至是挑战的 UI 设计。

😀 要点

本文的主要观点如下：

• 从简单的事情开始。你不需要成为专业的开发人员或高级程序员才能创造出令人惊叹的作品。运用你已有的知识，创造新的东西！
• 如果你想打造一些新东西，那就赶紧行动吧！别等到完美才开始，先推出一个简单的版本，然后不断迭代改进。完美只是个神话，我们都得从某个地方开始。
• 不要害怕寻求帮助。网上有那么多资源，所以如果你遇到任何问题，只需上网搜索！互联网是你的朋友，它永远不会让你失望！

🎁 想支持这个项目吗？

如果您喜欢目前为止所看到的内容，并希望支持这个开源项目，可以通过以下几种方式：

• 在Github上给这个项目点个星⭐️ 。
• 如果你喜欢社交，那就通过你最喜欢的社交媒体平台与朋友们分享吧。
• 当然，如果您是 UI 设计师并且有空闲时间，您可以为这项挑战贡献一个 UI 设计——如果您这样做，我将非常感激。
• 最后，如果您想请我喝杯咖啡以感谢我的辛勤工作，请点击这里GitHub Sponsors。

🙏 感谢您阅读这篇博客

感谢阅读！希望这些见解对您有所帮助。如有任何疑问或评论，请通过Twitter或LinkedIn联系我！

如果您喜欢这篇文章，请在您常用的社交媒体平台上分享，我将不胜感激。

请浏览一下我的YouTube频道，如果喜欢的话请订阅！

谢谢，下次见！🙏

谢谢