我设计，你建造！ - 前端挑战#4（Supabase 版本）

感谢❤️

我超爱Dev.to之前挑战的每一份投稿！真的非常感谢所有参与或收藏的朋友们！

新的挑战（Supabase 版本）

让我们从简单的单页页面和静态数据中走出来！fetch挑战时刻到了！挑战者（你）需要从 API 获取数据，然后显示动态内容！🤩

但为什么叫Supabase版本呢？因为我们将利用 Supabase 超强大的自动生成REST API/Graphql端点来查询数据。不仅可以进行简单的查询，您甚至可以在查询中应用分页/过滤器，而无需编写任何后端代码！

别担心😉！我创建了一个名为SupaDB的工具，它允许用户免费访问所有提供的数据！只需注册获取授权密钥，然后启动 Supabase 客户端，即可开始使用！

目标：

• 🎯 目标：从提供的 API 获取
• 🎯 目标：按名称搜索游戏
• 🎯 目标：按“价格”、“名称”对游戏进行排序
• 🎯 目标：轮播项目
• 🎯 目标：响应式设计
• 🎯 目标：Steam 游戏页面的外部链接

额外的：

• 🌟 额外：加载状态（加载器/骨架）
• 🌟 额外：悬停动画

资源：

• 📃 Supabase：https://supabase.com/docs/reference/javascript/select
• 📃 图标：https://icones.js.org/collection/all
• 📃 主机：https://vercel.com/

⚠ 如果只是复制粘贴别人的答案，那就失去了学习的目的😭！

奖品！

正如标题所述，这是 Supabase 版本的“我设计，你建造”挑战赛，因此将有超棒的 SWAG奖品来奖励 5 名提交最佳作品的获胜者（我将担任评委😉）

评审期从今天起为1个月！
提交截止日期为2022 年 5 月 7 日
投稿已结束！我要开始评审了😊

这是“我设计，你建造”系列的首次奖品赠送活动，绝对不会是最后一次！未来还会有更多奖品！敬请期待，记得收藏此挑战，并在 Twitter 上关注我，Dev.to及时了解最新动态！

开始编码！

如果你准备好接受挑战，那么

1. 💖 帮忙把这个设计发到Dribbble上，然后关注我！拜托……😳
2. 请收藏此帖子以便您可以更轻松地提交。
3. 右键单击 此处并在新选项卡中打开链接以查看 Figma 设计。
4. 享受编码！🤩
5. 回来提交！

所有图像和资产均可免费使用，并可从 Figma Design 导出。

提交

完成后，请返回本文，并template在评论区使用以下方式提交您的解决方案。我们鼓励您评论并点赞其他人的答案！

谢谢！💘

Feedback: This is awesome!

Demo: <url>
Github: <url>
Tech-Stack: Vue, TailwindCSS
Learning Outcome: 
  1. 
  2.

为什么？

我免费分享这些设计，以便任何想要练习或挑战网页设计的人都可以这样做，而无需向其他平台（咳咳）付费来获取他们的**Figma 设计*🎨文件。

您可以自由地在您的作品集中使用您创作的设计。无需任何版权声明或其他任何内容。

但如果你喜欢我的作品，欢迎你在TwitterDev.to上关注我😄

另外，请查看我自己的网站！

感谢您的时间和关注！希望您喜欢！