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.
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:
- A new playlist search facility
- Artist and audio features as configurable extra data in exports
- Possible to change user (log out)
- Liked songs can be exported as a playlist
- Complete revamp of rate limiting meaning that in most cases it’s not something users will need to worry about
- Various miscellaneous bugs fixed
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:
Styling and UI components
Vector icon set and toolkit
Light-weight solution for testing React DOM nodes
Network-level request mocking (more of my own thoughts here)
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.
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:
Moving to Typescript for type checking, in their own words, “saves you time catching errors and providing fixes before you run 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.
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?”.
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! 👇