https://github.com/dantederuwe/spiralfy

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

aspnetcore blazor blazor-webassembly dotnet microfrontends piral react reactjs spotify spotify-api

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/dantederuwe/spiralfy
• Owner: DanteDeRuwe
• License: mit
• Created: 2021-04-27T08:06:49.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2023-09-15T09:28:23.000Z (over 1 year ago)
• Last Synced: 2024-05-01T19:27:52.814Z (9 months ago)
• Topics: aspnetcore, blazor, blazor-webassembly, dotnet, microfrontends, piral, react, reactjs, spotify, spotify-api
• Language: HTML
• Homepage: https://spiralfy.party
• Size: 773 KB
• Stars: 9
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


> switching up your Spotify experience with microfrontends and Blazor




[![Netlify Status](https://api.netlify.com/api/v1/badges/2bdf60ef-23d4-4fe4-9868-38198d2ae582/deploy-status)](https://app.netlify.com/sites/spiralfy/deploys)

[![](https://img.shields.io/website?color=1ed45f&style=flat-square&up_message=spiralfy.party&url=https%3A%2F%2Fspiralfy.party)](https://spiralfy.party)



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](https://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.)