DEV Community

Cover image for Mini site for recommending songs using Svelte & Deno
Bryce Dorn
Bryce Dorn

Posted on

2

Mini site for recommending songs using Svelte & Deno

Introducing a new way to recommend a song to your friends: listn.fyi! Simply create a public Spotify playlist and name it "listn.fyi" (without quotes) then head to the URL for your Spotify username (e.g. listn.fyi/combatfetus). Et voilΓ ! The link is shareable and any changes to your playlist will reflect immediately on the website.

I figure this could be a fun and easy way to share what you're currently into and see what others are recommending as well. Maybe a cheeky addition to a Twitter bio, etc.

Behind the scenes is a simple Sveltekit-powered server function to fetch a Spotify client token then find a user's recommendation playlist and its track information. A Deno edge function to performs this data fetch and renders server-side Svelte.

And shoutout to Rob for the beautiful CSS record player, which I borrowed (with credits) and made some modifications to. Long live skeuomorphism!

I must admit, the Sveltekit developer experience in 2024 is a lot nicer to work with than what I'm used to in the React/Vue/Next world. The filesystem-based router seemed like it would be a pain but was pleasantly surprised by how simple and clean it is to actually use. Looking forward to using it more for projects like this.

Check out the source below & let me know what you think!

GitHub logo brycedorn / listn.fyi

Recommend a song to your friends via a playlist! Try it out: https://listn.fyi/combatfetus

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (0)

Image of Docusign

πŸ› οΈ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more