我如何在短短 4 天内创建并部署了我的第一个全栈 Web 应用程序

关于我

大家好，我是 Tarun Sharma。我来自印度，刚刚结束学业，休学一年，去探索和学习新事物，尤其是编程相关的知识，比如 React、JavaScript 等等。仅仅花了三四个月的时间，我就看到了我的代码风格、思维方式，以及最重要的，我对构建项目的热情都有了显著的提升。

现在我更倾向于自己动手做项目、学习新东西，而不是在 YouTube 上看教程却一无所获。我决定不仅要自己做项目，还要通过写博客与世界各地的朋友分享我的整个学习历程，或许能对某些人有所帮助 :)

路线图

第 1 天

我使用Dribble从不同来源收集 UI 设计灵感。
然后我去ColorHunt挑选了一个不错的调色板。
经过一个小时的研究，我在一张纸上粗略地画出了布局，然后开始编码。
==> 我的首要任务是设置文件夹结构架构并安装所有必需的依赖项。
==> 然后我在 Firebase 上创建了一个新应用，并将其连接到 Firebase，并通过控制台日志（JS 中最棒的功能）确保所有功能都已连接并正常运行。
==> 我又努力了大约 4 个小时，创建了主页。

第 2 天

下一步是添加身份验证，因此我创建了注册和登录页面，然后使用 Firebase 将身份验证功能添加到我的应用中。
之后，我添加了背景音乐功能，让应用更有趣。
下一步是添加模态框，我使用了React-Modal-Responsive，它非常快速且易于使用，因此任何人都可以轻松添加他们的“Sigma 规则”。

第 3 天

接下来的挑战是确保只有经过身份验证的用户才能添加 Sigma-Rules，然后我在应用程序中添加了集中式路由，这是我在这个项目中遇到的最强大、最有用的功能，我学到了它。
又花了 3 个小时，我完成了 75% 的应用程序。

第 4 天

昨天终于完成了项目，我兴奋极了，于是开始着手处理。
我给它添加了响应式功能和一些动画。最后，我检查了一切是否正常，并确保代码中没有留下任何控制台日志（用于调试）。
之后，我直接在 Netlify 上免费部署了它。

我使用过

我用完了所有免费的东西 ツ

前端：

• React - 我使用create-react-app开始。
• 钩子——例如useState针对本地和useContext全局状态。
• Tailwindcss用于造型。
• Framer-motion可轻松制作简单的动画。

后端：

• Firebase——我用于身份验证和数据库。

托管：

• Netlify可免费部署。

我如何让它看起来更专业

说到设计网站，我希望它看起来美观。这没什么秘诀，只要我保持间距和颜色一致，最终就能呈现出不错的效果。

通过使用 tailwindcss，添加样式非常容易和快速，然而，它的初始设置有点粗糙，但一旦完成，一切都会顺利和容易进行。

因为我把它弄得干净整洁，很多朋友一直问我这是否免费。是的，免费，我什么都没卖 :)))

下一步

我会继续从事类似的项目，最终提升我的技能，因为熟能生巧。我也计划为开源项目做贡献。

结束

感谢你的阅读，希望这篇文章能帮助你完成个人项目，或者激励大家效仿我的做法。如果你想了解我开发的应用程序Sigma-Rules，可以看看。

欢迎给我留言。也欢迎在Github、 Instagram 、Twitter上关注我😊🤗