This is a submission for the DevCycle Feature Flag Challenge: Feature Flag Funhouse
What I Built
Welcome to our Time-Traveling Music Store, where every visit takes you on a nostalgic journey through the decades. Leveraging a dynamic feature flag, the store adapts to showcase music from any chosen year, immersing you in an authentic experience of that era.
For example, select 1999 to explore the hits of the late '90s, accompanied by a website design reminiscent of that era’s retro aesthetics. If you choose 1945, the store transforms into a vintage interface, echoing the charm and style of mid-century design, while displaying iconic music from the time.
For modern-day enthusiasts, the experience updates with sleek and cutting-edge designs for 2023, 2024, and beyond, offering the latest tracks and an ultra-modern interface.
You can refresh the page or click a dedicated button to fetch new music from the year you’ve selected, keeping your musical exploration as dynamic as time itself.
Demo
Demo walkthrough on the application :
Live website link :
https://time-travel-shop-react.onrender.com
When you travel back to 1990, here is how the website would look, a real 1990 feel , and the retro styles would make you feel nostalgic.
A space themed timeline that conveys your current position in time, and has the TIME TRAVEL button on it. (Click it)
The slider that allows you to choose, the year that you wanna time travel to , therefore choosing 1956 as your destination year , and click on "Travel here":
Hold tight, your into quantum space ....
The olden 1956's website, with music from the same year :
Feeling enough of olden music, travel back to the modern era to listen to modern music !
The Modern era website :
Click on change carousel, to display new styles of carousel :
My Code
This is a submission for the DevCycle Feature Flag Challenge: Feature Flag Funhouse
What I Built
Welcome to our Time-Traveling Music Store, where every visit takes you on a nostalgic journey through the decades. Leveraging a dynamic feature flag, the store adapts to showcase music from any chosen year, immersing you in an authentic experience of that era.
For example, select 1999 to explore the hits of the late '90s, accompanied by a website design reminiscent of that era’s retro aesthetics. If you choose 1945, the store transforms into a vintage interface, echoing the charm and style of mid-century design, while displaying iconic music from the time.
For modern-day enthusiasts, the experience updates with sleek and cutting-edge designs for 2023, 2024, and beyond, offering the latest tracks and an ultra-modern interface.
You can refresh the page or click a dedicated button to fetch new music from the year you’ve…
This is a submission for the DevCycle Feature Flag Challenge: Feature Flag Funhouse
What I Built
Welcome to our Time-Traveling Music Store, where every visit takes you on a nostalgic journey through the decades. Leveraging a dynamic feature flag, the store adapts to showcase music from any chosen year, immersing you in an authentic experience of that era.
For example, select 1999 to explore the hits of the late '90s, accompanied by a website design reminiscent of that era’s retro aesthetics. If you choose 1945, the store transforms into a vintage interface, echoing the charm and style of mid-century design, while displaying iconic music from the time.
For modern-day enthusiasts, the experience updates with sleek and cutting-edge designs for 2023, 2024, and beyond, offering the latest tracks and an ultra-modern interface.
You can refresh the page or click a dedicated button to fetch new music from the year you’ve…
Other tools used
MusicBrainz API : I made use of the MusicBrainz API, for fetching the music from different years.
Redux : I made use of Redux for state management varying from music to time year managing.
archive.io : I made use of archive.io to fetch the thumbnail images of the music that were fetched, to be displayed.
Youtube Search API : I made use of the Youtube search api key, to search, fetch and play the video music of the selected track.
My DevCycle Experience
We leveraged the YEAR (as time), as our feature flag variable, and used this variable as a feature flag, changing the current era of experience on the website.
Changing the YEAR in the website, would trigger a feature flag update API (Refer devcycle's management API for more info), and updates the year on the feature flag.
This update internally rerenders the whole application, making it feel as if the website had time travelled to any year possible.
Working with devCycle was super easy, especially with their documentation.
We personally feel this would be a game changer on the world of feature flags, provided their support to multiple client and server side SDKs, which are becoming and have become quite popular.
Additional Prize Categories
- OpenFeature Aficionado : My submission is also eligible to the above mentioned Additional Prize category, since my application is using OpenFeature of React client SDK from dev cycle.
Top comments (1)
Wow! mind blowing web-site