Sort Plus

Spotify companion web app

Sort Plus finds albums users can fully listen to in the limited amount of time they have.

It has the following features that makes it a progressive web app:

Work offline
Accessible via a link like a typical website
Installable like an app so that it can be launched from the device's home screen

My saved albums with duration of 39 minutes

Time Frame

November 2019 to February 2020

Languages and Tools

MERN (MongoDB, Express, React, Node.js), JavaScript, CSS, Mongoose, Git, Heroku, Figma

Motivation

I wanted to find an album saved in my Spotify library that I could listen to in its entirety within the limited amount of time I had.

A calendar with an hour block of free time in between other obligations — Example where I have one hour to listen to music before my next obligation

Contributions

Research: I looked into what data was available from Spotify to sort my saved albums by. I also went through the Sonos and Spotify forums to see what similar features users requested.
Design: I designed the user experience, user interface, and icon.
Development: I wrote the back-end (database and server) code with MongoDB and Express. I wrote the front-end (user interface) code with React.
Deployment: I deployed Sort Plus to Heroku, a cloud platform that lets users put apps onto the Internet.

Challenge: Make it Work Offline

Sort Plus is designed to work offline which means that I had to program it to download the necessary data for it to work offline.

Control Which Data to Download

I can control which data is downloaded and saved on the device through code called service worker, but I could not manage to configure it with the template that I started out with.

Fortunately, I found a tutorial that taught me how to generate a new service worker that was configurable.

Change How Data is Requested and Sent

I wanted the service worker to only download data that was not already on the device, but the code I initially wrote could not work that way.

Initially, one request sends all the user's saved albums, which forces the user to redownload everything whenever their library updates.

Now, one request sends only one saved album, so the service worker knows which data to download or not.

Three separate requests where each one sends one saved album — After some modifications, one request sends only one saved album

Implement Visual Feedback

Finally, I programmed the component that provides visual feedback that shows when Sort Plus is syncing and when the user can download the necessary data for offline use.

Sort Plus syncs with user's Spotify library, then provides option to download for offline use

Reflection

Measuring Success

Sort Plus was successful because it functions the way I designed it to. Unfortunately, I do not find myself using it much as I thought I would. It may be a problem with the design or a change in my listening habits.

What I Learned:

Minimum viable product (MVP): Developing a minimum viable product would have been helpful to test its usefulness before committing a lot of time.
MERN stack (MongoDB, Express, React, Node.js): Prior to this project, I only had experience with React and some backend (server and database) experience with PHP and MySQL. I learned how to write the backend with Express, which connects to MongoDB with Mongoose.
PWA (Progressive Web App): I learned more about progressive web apps so that I could make Sort Plus work offline, accessible via a link, and installable like an app that can be launched from the device's home screen.