音乐的时空之旅🎵

我建造了什么

欢迎来到我们的时光旅行音乐商店,每次访问都会带您踏上穿越数十年的怀旧之旅。利用动态功能标记,商店可以调整以展示任何选定年份的音乐,让您沉浸在那个时代的真实体验中。

例如,选择 1999 年,探索 90 年代末的热门歌曲,同时网站设计会让人联想到那个时代的复古美学。如果您选择 1945 年,商店将变成复古界面,呼应中世纪设计的魅力和风格,同时展示当时的标志性音乐。

对于现代爱好者来说,体验更新采用 2023 年、2024 年及以后的时尚和尖端设计,提供最新的曲目和超现代的界面。

您可以刷新页面或单击专用按钮来获取您所选年份的新音乐,让您的音乐探索像时间本身一样充满活力。

演示

应用程序的演示演练:

直播网站链接:

https://time-travel-shop-react.onrender.com

当你回到 1990 年时,网站看起来就是这个样子,真正的 1990 年代感觉,复古风格会让您感到怀旧。

Image description

一个太空主题的时间轴,传达您当前的时间位置,上面有一个时间旅行按钮。(点击它)

Image description

滑块可以让您选择想要穿越到哪一年,因此选择 1956 年作为您的目的地年份,然后单击“前往这里”:

Image description

抓紧,你进入了量子空间......

Image description

1956 年的旧网站,包含同年的音乐:

Image description

听够了古代音乐,回到现代听听现代音乐吧!

Image description

现代时代网站:

Image description

点击更改轮播,显示新的轮播样式:

Image description

我的代码

jainiresh / time-travel-shop-react

我建造了什么

欢迎来到我们的时光旅行音乐商店,每次访问都会带您踏上穿越数十年的怀旧之旅。利用动态功能标记,商店可以调整以展示任何选定年份的音乐,让您沉浸在那个时代的真实体验中。

例如,选择 1999 年,探索 90 年代末的热门歌曲,同时网站设计会让人联想到那个时代的复古美学。如果您选择 1945 年,商店将变成复古界面,呼应中世纪设计的魅力和风格,同时展示当时的标志性音乐。

对于现代爱好者来说,体验更新采用 2023 年、2024 年及以后的时尚和尖端设计,提供最新的曲目和超现代的界面。

您可以刷新页面或单击专用按钮来获取您今年的新音乐……

在 GitHub 上查看

jainiresh / time-travel-shop-react-server

我建造了什么

欢迎来到我们的时光旅行音乐商店,每次访问都会带您踏上穿越数十年的怀旧之旅。利用动态功能标记,商店可以调整以展示任何选定年份的音乐,让您沉浸在那个时代的真实体验中。

例如,选择 1999 年,探索 90 年代末的热门歌曲,同时网站设计会让人联想到那个时代的复古美学。如果您选择 1945 年,商店将变成复古界面,呼应中世纪设计的魅力和风格,同时展示当时的标志性音乐。

对于现代爱好者来说,体验更新采用 2023 年、2024 年及以后的时尚和尖端设计,提供最新的曲目和超现代的界面。

您可以刷新页面或单击专用按钮来获取您今年的新音乐……

在 GitHub 上查看

使用的其他工具

  • MusicBrainz API:我利用了 MusicBrainz API 来获取不同年份的音乐。
  • Redux:我利用 Redux 进行状态管理,从音乐到时间年份管理。
  • archive.io:我利用archive.io来获取已获取的音乐的缩略图,以便显示。
  • Youtube 搜索 API:我利用 Youtube 搜索 API 键来搜索、获取和播放所选曲目的视频音乐。
  • 我的 DevCycle 经历

    我们利用 YEAR(作为时间)作为我们的功能标志变量,并使用此变量作为功能标志,改变网站上的当前体验时代。

    更改网站中的年份将触发功能标志更新 API(有关更多信息,请参阅 devcycle 的管理 API),并更新功能标志上的年份。

    此次更新在内部重新渲染了整个应用程序,让网站仿佛穿越到了任何可能的年份。

    使用 devCycle 非常容易,尤其是有他们的文档。

    我们个人认为这将彻底改变功能标志的世界,因为它们支持多个客户端和服务器端 SDK,这些 SDK 正在变得并且已经变得非常流行。

    额外奖项

  • OpenFeature 爱好者:我的提交也有资格获得上述额外奖项类别,因为我的应用程序使用了开发周期中 React 客户端 SDK 的 OpenFeature。
  • DEV 挑战现已开始!

    DEV Challenges Hub

    查看所有参与方式、证明您的技能并赢取奖品。

    访问挑战中心