Portify

Like music? Like supporting the artists who make it? If you said "hell yeah", then this app is for you!

What it does

• 🥰 Links the music you like on Spotify to buy on Beatport and Bandcamp
• 🎧 Shows you each track's musical key so you can see how DJ mixes are structured
• 🔍 Surfaces related tracks and artists

How it works

Portify uses the amazing Architect framework to easily shape data from Spotify's API and Svelte to surface it.

I built it as a learning exercise and because it was a product that I needed. Mad respect to Henry Desroches and Tom Duncalf for their prior art and inspiration:

• https://henry.codes/writing/spotify-now-playing
• https://tomduncalf.github.io/supportify/

This is a very early sneak peek... there's much more to come! 😀

Project setup

npm install
npx arc env

Start the local dev server

npm run dev

Navigate to localhost:3333

TO DO:

UX

• User preferences: allow toggling musical notation
• Link to album page from tracks
• Load tracks + audio for albums
• Fix missing playlists at boot
• Preload top 100 playlists
• Underline artist links
• Truncate long titles in mobile headers
• TrackList: Offer compact views of items
• TrackList: Make sortable via derived store
• Paging: Make page limits configurable
• Paging: Scroll-to-load on paged content
• Album: Use CSS counter to display track numbers against names AND/OR create albumIndex?
• Album: Don't repeat cover image per track
• Page transitions

Stretch

• Use Spotify Connect to highlight playing track

Tech debt

• Remove /track/:id endpoint
• Relax processTrack requirements: Pick<{...required}>

DX

• Work out how to attach a debug session to Arc endpoints
• Switch to Snowpack
• Use query params to drive paging?

Perf:

• Create a use:onload action for fading in lazy-loaded images
• Investigate content-visibility - https://infrequently.org/2020/12/resize-resilient-deferred-rendering/ - https://web.dev/content-visibility/