Spotify Widget

Fullstack Electron App for the macOS

Problem: I would be in the ZONE hammering out code and having a good time. I needed to save this song to a playlist! Sadly, finding my Spotify app and achieving this task would distract me and take me out of the zone.. womp, womp.

Solution: Create a widget that I can just keep in the menubar that does everything I need, quickly and efficiently. Switch songs (though I mainly use the keyboard for that), save songs to my library, add them to a playlist, or check out the album art in full size.

Repository Full Writeup

Electron
Vite
Typescript
SolidJS

Lives in the menu bar

Using Electron with Vite I created a custom window that opens at the current mouse location with an event listener on the menu icon. This made for a composable way to get an extremely customizable "menu" from the menu bar.

Buttery Smooth tooltips

The Tooltip component wraps any element and adds a smoothly animated tooltip that slides down for improved UX. Though the icons are probably enough to get the point across, you can never be too careful when it comes to creating clean understandable UI's.

What matters most (to me)

The main reason I build this app was for these two features right here. There is no quick and easy way to save a song to a playlist on Spotify. But now there is for me!

If the song already exists in the playlist, instead of the confusing menu asking if I want to add it anyway, my app does not duplicate songs in your playlist and informs you that it's added. It's exactly what I wanted.

Expanding Album Art

Using a bit of CSS and JS (but really TS) magic I created a feature to inspect the album art in greater detail. I am one of those people that REALLY enjoys good album art and love to quickly check out a new artist or album when I hear something I like.

Lives in the menu bar

Using Electron with Vite I created a custom window that opens at the current mouse location with an event listener on the menu icon. This made for a composable way to get an extremely customizable "menu" from the menu bar.

Buttery Smooth tooltips

The Tooltip component wraps any element and adds a smoothly animated tooltip that slides down for improved UX. Though the icons are probably enough to get the point across, you can never be too careful when it comes to creating clean understandable UI's.

What matters most (to me)

The main reason I build this app was for these two features right here. There is no quick and easy way to save a song to a playlist on Spotify. But now there is for me!

If the song already exists in the playlist, instead of the confusing menu asking if I want to add it anyway, my app does not duplicate songs in your playlist and informs you that it's added. It's exactly what I wanted.

Expanding Album Art

Using a bit of CSS and JS (but really TS) magic I created a feature to inspect the album art in greater detail. I am one of those people that REALLY enjoys good album art and love to quickly check out a new artist or album when I hear something I like.

Key Points

Full stack Electron-based macOS application (Linux and Windows coming soon)
Uses Auth0 and persists token with automatic refreshing
Buttery smooth animation using a perfect blend of CSS and Typescript
Designed and built 100% by me. (Though the design is Spotify inspired)
Personal project to test out Electron & SolidJS and create something I wanted.

Next Project

Solana Component Library

React components for a Rust blockchain

Lead engineer for a modern UI/Component library (npm package) to be used for Solana's NextJS site. The contains your smaller UI elements like buttons as well as full components.