Way back in 2015 I released the first version of Exportify, a small web application for exporting / backing up Spotify playlists to CSV format for safekeeping (click here to go straight to the app if you’d like to try it).

It’s fair to say I’ve rather neglected this project over the past few years, so I decided to spend a good chunk of time this November on adding new features, fixing bugs and improving robustness, as well as a complete overhaul of the React dev stack.

New Features

Although the technical stack refresh came first in order of work, it’s probably the new features that’ll interest users the most.

It’s important for me to say that in many cases these features came from the suggestions or contributions of others, so I did my best to work through old pull requests in order, and credit people wherever I could. Thanks to all who contributed 🙏. The main updates:

There’s loads more detail on each of those items and more in the milestone over on Github, or of course in the project README. Hopefully these additions will improve the usefulness of the tool for the majority of use cases.

Next let’s take a look at what’s changed under the hood.

Development Stack Overhaul

When I came to revisit the tech stack for this project, I wasn’t inspired at all to build on top of what I’d put together back in 2015. Okay, there was an automated test suite but coverage wasn’t particularly great and it would fail intermittently. There was no dependency management framework, and no development/production environment separation. The libraries I’d used were out of date and the React/JS world had moved on impressively since then.

Starting with Create React App I ended up with the following tools/libs:

It really was day and night to see how things evolved as I added in new components and upgraded others. In particular working with MSW was a much improved testing experience for a web request-heavy app. You can check out my other blog post about my experience in setting it up.

The majority of this new stack was introduced as part of this PR, so feel free to take a look if you’d like to dig into the code.

Development Confidence

One of the reasons I haven’t updated this project more over the years was: I was kind of worried about breaking things 😬. As I see it, my recent changes now give me and contributors three lines of defense:

  1. Writing code

    Moving to Typescript for type checking, in their own words, “saves you time catching errors and providing fixes before you run code”.

  2. Deploying code

    The more comprehensive automated test suite using React Testing Library, Jest, and MSW should give a lot more confidence that things aren’t breaking. Snapshot testing is now also present as a useful guard against regressions.

  3. Debugging live issues

    Those two measures clearly don’t catch everything. For the rest there’s live error monitoring with Bugsnag. I’ve configured it to make sure that no sensitive data leaks into the error reports, only the details of the exception itself. This also helps to answer questions like “what percentage of distinct users experience an issue?”.

Future Development

A small note about my own personal vision when it comes to the feature set of this tool.

While I’m always open to considering feature requests or code submissions, my own view is that they should remain focused on getting data out of the Spotify Web API rather than on presenting it or importing it into other applications.

It’s surely the case that there are plenty of interesting things that can be done with this data once it’s been exported, though. Let me know what you come up with! 👇