Skip to content

A different way of using Spotify! Built using a microfrontend approach with Piral, Blazor and React. Read more on https://bit.ly/spiralfy-article

License

Notifications You must be signed in to change notification settings

DanteDeRuwe/spiralfy

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
Dante De Ruwe
Sep 15, 2023
f38e2b7 · Sep 15, 2023

History

82 Commits
May 7, 2021
May 3, 2021
Sep 15, 2023
Apr 27, 2021
Apr 29, 2021
May 6, 2021
May 7, 2021

Repository files navigation

switching up your Spotify experience with microfrontends and Blazor


Netlify Status

Made with React , Blazor and Piral


Article

In this DEVCommunity article, I share my experiences creating a microfrontend web app with Blazor and Piral. I also give a little behind-the-scenes look at how this was made possible.

About

First of all, let's discuss the demo application that I created to showcase the use of Blazor with Piral: Spiralfy. A clever – or some would say cheesy – play on words between Spotify and Piral, of course. But what does it do?

Log in with your Spotify premium account, and access a way to switch up your Spotify experience!

For a long time now, I wanted a way to shuffle play my playlists. I'm not talking about shuffling the songs within one playlist, that's something you can obviously already do. The feature I wanted could be described as "swiping through playlists": Spiralfy picks one playlist at random, shuffle playing its songs, and whenever you feel like you want a different vibe, you let Spiralfy pick a new playlist to listen to.

(I got inspired in part by lofi.cafe, where you can switch through curated lofi playlists like they were radio stations. But I wanted the user to be able to use their own Spotify playlists instead.)

Structure

For now, Spiralfy exists in 3 parts:

  • the Piral instance: spiralfy-appshell
  • the player pilet
  • the controls pilet

(In the Piral framework, pilets are the individual feature modules, also known as microfrontends. Pilets are usually published to a feed service. The Piral instance (aka app shell) will pull all registered pilets from the feed service, and put them where they need to go as defined by the pilets themselves.)