我如何在短短 3 天内创建并部署了另一个全栈应用程序

大家好👋🏻

我是 Tarun。我是一个年轻的开发者，怀揣着远大的梦想，立志成为一名成功的 Web 开发者。我喜欢用 React 构建 Web 应用。上周，我构建了我的第一个全栈应用，并与大家分享了整个开发过程。顺便说一句，如果你还没看过，可以点击这里查看链接。

今天，我想和大家分享一段构建激动人心且实用的东西的旅程。
出发啦🚀

路线图🗺

第 1 天

我去Dribbble收集了各种 UI 设计灵感。
然后我去了ColorHunt，选了一个极简主义的配色方案。
为了让它更具互动性和美观性，我去了free3Dicon.com，找了一些 3D 渲染图。
大约一个小时后，我在一张纸上画出了 UI，然后开始写代码 👩🏻‍💻

首先，我设置了文件夹结构架构，并安装了所有必需的依赖项。
然后，我在 Firebase 上创建了一个新应用，并将其与 Firebase 连接，并通过控制台日志（JS 中最棒的功能）确保所有功能都已连接并正常运行。
我又努力了大约 3 个小时，最终完成了落地页的创建。

第 2 天

下一步是添加身份验证，所以我创建了注册和登录页面，然后使用 Firebase 将身份验证功能添加到我的应用中。
在接下来的几个小时里，我完成了仪表盘部分，确定了它的布局并进行了设计。
然后，我必须研究如何在数据库中存储文档，以及我的数据库架构应该是什么样子。这花了一些时间，但最终我还是完成了（耗费了我一半的脑细胞🤐😥）

第 3 天

下一个任务是应用一些逻辑来计算支出、收入以及所有相关的东西，虽然有点费脑筋，但我还是完成了。
我添加了响应式功能和一些动画。最后，我检查了一切是否正常工作，并确保代码中没有留下任何控制台日志（用于调试）。
然后，我直接在 Netlify 上免费部署了它。

我使用过

我用完了所有免费的东西😋😁

前端：

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

后端：

• Firebase——我用它来进行身份验证和数据库。

托管：

• Netlify可免费部署。

我如何让它看起来更专业

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

通过使用 tailwindcss，添加样式非常容易和快速，但是它的初始设置很繁琐🥴但是一旦你完成了，一切都会变得顺利和容易🐱‍👤。

因为我把它弄得又干净又光滑，很多朋友都问我这真的是我做的吗，哈哈。没错，就是我做的，我的天哪！！

接下来是什么✨

我会继续从事类似的项目，最终提升我的技能，因为熟能生巧。我还计划为开源项目做贡献（这是我2022年的目标之一）。

总结👀

是的，就到这里。希望你享受了这段旅程，并从中获得了动力。欢迎使用这款应用。欢迎分享你的反馈。在推特上分享，请@tarunfy

为该仓库加注星标⭐ github.com/tarunfy/expense-tracker

让我们联系起来🤙🏻

• Github
• 叽叽喳喳
• Instagram

反馈🎸

Hash tree 需要您的反馈来改进。请添加您的宝贵评论，帮助 Hash tree 💖