隆重推出 Tailwinder - Tailwind 粉丝之家 - 由 Appwrite 提供支持 🚀

欢迎来到 Tailwinder 👋

我的提交概述

首先我想说，复杂的后端开发不再是痛苦！作为一名 Laravel 开发者，我之前真的没想到 Appwrite 竟然能做到这么多神奇的事情，还能帮我节省几个小时的编码时间。

当这场黑客马拉松宣布的时候，我并不知道Appwrite是什么，也不知道如何使用它。在阅读了文档，并在帮助主题、Twitter 以及任何我能找到信息的地方问了很多问题之后，我清楚地意识到，我可以用这项伟大的技术创造出一些独一无二的东西。

我不想复制已有的东西，也不想克隆任何东西。我真正想做的是构思一个结构复杂的网站，能够解决问题或为社区增添价值。自从我开始编程以来，我最喜欢的东西之一就是用TailwindCSS来做我的 CSS 工作。它让我们的生活变得轻松很多，即使对于后端开发人员来说也非常简单。所以我想，为什么不为 Tailwind 用户创建一个完整的社区，让他们可以创作、分享、学习、评论和更新呢？使用 appwrite 的Web SDK和Node SDK，这一切成为了可能。

从那以后👆我创建了Tailwinder🚀：

起初，我只是想创建 TailwindCSS 在线工具。但在发现 Appwrite 一段时间后，我发现它的功能远超我之前对这个项目的设想。它有动态 URL、图片、按钮，所有东西都是动态的！😍

Tailwinder是一个面向 Tailwind 爱好者的开源创意社区。它提供您所需的一切，助您从中获得灵感，或通过添加自己的内容来激励他人。

让我们来看看 Tailwinder 的功能以及我如何利用 Appwrite 创建完美的社区后端。

如果您更有兴趣观看该项目的快速演示视频，我有您需要的东西👉就在这里👈我试图尽可能快地完成它，但该项目有太多细节。

1-主页：

• 动态头像（Appwrite 功能）

导航栏中的头像图片是动态的，Appwrite 会抓取特定用户的图片，并将其显示在网站的导航栏中。
它还会检测用户是否没有头像图片，并显示一个包含用户姓氏和名字首字母的头像。我们将在“用户资料”部分看到具体操作。

源自 Appwrite：
获取文件预览Web SDK。
获取用户姓名首字母Web SDK。

• 动态暗/亮主题切换（Appwrite 功能）

深色/亮色主题切换不仅仅是一般性的改变主题，它还会通过 Appwrite 将用户的选择注册到用户偏好中，以便在特定用户登录时自动更改主题🌞🌙。

源自 Appwrite：
更新账户偏好设置Web SDK。
获取账户偏好设置Web SDK。

• 褪色的导航栏

导航栏在向下滚动时淡出，但在向上滚动时再次出现。它包含徽标、重要链接和用户下拉菜单。

• 酷炫的 Tailwinder 徽标视图

这是 Claire Larsen 于 2015 年 10 月 21 日创建的开源组件，可在Codepen上查看。我进行了一些调整，使其成为 VueJS 组件，并做了一些修改以适应主题。

2-注册/登录：

• 动态用户 URL （Appwrite 功能）

用户可以输入用户名，该用户名将用于为该特定用户创建一个动态的唯一 URL。代码会捕获用户名并将其保存为用户首选项，然后获取该 URL 的用户名。

• 用户登录/注销（Appwrite 功能）

使用 appwrite 进行简单的身份验证以登录和注销用户。

源自 Appwrite：
创建账户Web SDK。
创建账户会话Web SDK。
更新账户偏好设置Web SDK。
获取账户Web SDK。
删除账户会话Web SDK。

3-用户资料：

• 动态头像（Appwrite 功能）

再次强调，用户个人资料是动态的。Appwrite 会为特定用户获取与用户下拉导航栏中的个人资料图片相同的信息。它会检测用户是否未添加图片，然后添加头像。

源自 Appwrite：
获取文件预览Web SDK。
获取用户姓名首字母Web SDK。
更新账户偏好设置Web SDK。

• 动态用户信息（Appwrite 功能）

如您所见，每个用户都可以更新自己的信息，这些信息会通过 Appwrite Node-SDK 显示在他们的个人资料中。当然，我可以想出更好的显示方式，但我认为这样就足够了。

从 Appwrite 中利用：
获取用户偏好节点 SDK。

• 用户信息更新（Appwrite功能）

在上面的视频中，您可以注意到我正在更改用户的个人资料图片、姓名、电子邮件和偏好设置。

代码检查用户是否已经有个人资料图片，如果没有，则显示头像。

用户可以：

• 更新新的头像时，代码会检查是否已存在。如果存在，Appwrite 会删除之前包含该头像的 bucket，创建新的 bucket，创建新文件并显示。如果用户未添加头像，则 Appwrite 会直接更新。
• 他们可以更新他们的名字。
• 用户可以更新电子邮件，如果用户在电子邮件输入中做了任何更改，则会显示新的密码输入。 -用户可以更新偏好设置。

这是通过 Appwrite Node-SDK 完成的，因为它显示已经存在的信息并允许用户更新它们。

源自 Appwrite：
列出用户节点 SDK。
获取用户节点 SDK。
删除存储桶节点 SDK。
创建存储桶节点 SDK。
创建文件Web SDK。
列出文件节点 SDK。
获取文件预览Web SDK。
获取用户姓名首字母Web SDK。
更新帐户名称Web SDK。
更新帐户电子邮件Web SDK。
更新帐户首选项Web SDK。
获取用户首选项节点 SDK。

• 动态用户贡献（Appwrite 功能）

上面的 GIF 演示了 Appwrite 如何获取用户的贡献和类别，并通过指向实际贡献的动态 URL 进行显示。代码获取所有集合和文件，并循环遍历，仅筛选出用户创建的集合和文件，并提供一个动态 URL。

源自 Appwrite：
列出集合Node SDK。
列出文档Web SDK。

4-组件：

• 动态组件获取（Appwrite 功能）

如上图所示，appwrite 正在动态获取用户提交的所有组件，每个组件都有一个唯一的 URL，每个用户也都有一个唯一的 URL，正如之前所述。此外，组件缩略图也会从其存储桶中获取并显示给用户。

组件类别正在通过 appwrite 动态识别和显​​示。

组件提交者的个人资料图片也被动态获取。

源自 Appwrite：
列出集合节点 SDK。
列出文档Web SDK。
列出文件节点 SDK。
获取文件预览Web SDK。
获取用户姓名首字母Web SDK。
获取文件预览Web SDK。

• 添加新组件（Appwrite 功能）

用户可以将新的组件添加到社区。每个组件都有类别、示例图片、名称、描述和组件代码。

代码正在捕获组件名称并将其转换为 slug 以用作组件的动态 URL。

Appwrite 创建新的 bucket，然后将图片添加到这个特定的 bucket，其 ID 与组件 slug 相同。

然后 appwrite 创建新文档，其中包含集合名称、id、组件名称、用户名称、用户 id、组件代码和描述。

代码会自动动态地将用户重定向到提交的组件并显示成功的闪烁消息。

源自 Appwrite：
创建 bucket Node SDK。
创建 File Web SDK。
创建 Document Web SDK。

• 组件视图（Appwrite 功能）

如上所述，我为组件 URL 和用户创建了一个唯一的 slug。Appwrite 获取组件详细信息并将其动态注入 URL。Vue Router 用于此操作。

我还使用了Swiper JS和 Appwrite 来显示组件示例图片。

用户可以查看组件示例图片、名称、描述、组件提交者的详细信息，还可以复制代码并在TailwindCSS Playground中进行测试。

表格上也提供评论，所有访问此特定组件的用户都会看到。创建评论的用户也可以删除该组件。

源自 Appwrite：
获取文档Web SDK。
获取用户偏好设置节点 SDK。
列出文档Web SDK。
列出文件节点 SDK。
删除文档节点 SDK。
获取用户姓名首字母Web SDK。

5- Tailwinder 学院：

• 动态资源获取（Appwrite 功能）

这部分是我最喜欢的。在这里，用户可以与社区分享学习资源。我的代码使用的结构几乎与组件相同，所以这里没有必要重复。

• 向学院添加新资源（Appwrite 功能）
• 查看资源（Appwrite 功能）

将Youtube API 与 Appwrite结合起来真是太有趣了！用户可以添加新的学习资源，其他人也可以查看、发表评论并学习新知识。结构几乎相同，所以这里就不再赘述了。

6- Tailwinder 社区：

这可以看作是 Tailwinders 的博客。用户可以查看其他人发布的帖子，也可以添加自己的帖子。

设计结构是相同的，但我添加了Deepgram触感，允许用户用语音撰写文章。

投稿类别：

Web2 向导

代码链接

其他资源/信息

演示视频：

我希望我没有错过任何东西😅我真的为这个感到自豪，并且尽一切努力学习 Appwrite 绝对值得❤️感谢您检查这一点，请告诉我您的想法。