Last weekend I coded a simple web app. It lets users visualize how much money they've pledged to each creator they've supported on Patreon.com

link: https://patreon-pledges-calculator.netlify.app
repo: https://github.com/mornir/patreon-pledges-calculator

Surprisingly, it is not possible to get that information from the official website. One can only view its billing history. However, from that history data, it's possible to calculate the total amounts of pledges per Patreon creator.

The data is delivered through a /bills endpoint in the JSON format. My first thought was to the Patreon API and have the users authenticate with their Patreon account. For that I needed create a Creator account, which I did. But then I realized that I could only get access to bills/payments made to my account.

This actually makes sense: billing data are private and sensitive and shouldn't be exposed to all Patreon creators. My guess is that the main purpose of the Patreon API is to let creators manage their supporters (for example for gated content).

So I decided to just let users dump their JSON payload in a textarea 😆
It does the job and users don't need to worry about privacy (btw I should probably mention on the web page that all data are processed by the browser).

Tech Stack

I used Vue 3 with Vite. I kept to the good ol' Options API, as I'm not a fan of the new Composition API. Anyway, in the Vue 3 docs, the Options is still taught first and the Composition is said to be reserved to big and complex application 🤷‍♂️

Since it's just a one page website, I thought that this time I could just go with Vanilla CSS, but it seems that I've already developed a severe addiction to tailwindcss to the point that I use it anywhere and anytime. 🍹
I especially love how easy it was to create a nice list animation using Vue List Move Transitions and Tailwind utilities classes while still caring about the user's motion settings (prefers-reduced-motion).

<transition-group
  move-class="motion-safe:duration-1000 motion-safe:ease-in-out">
</transition-group>

What else? Well I just love playing with Cypress. Seeing those tests passing just feels me with joy. So I added a few test cases for good measure. 🧪

And that's it! Try it out here if you have a Patreon account: https://patreon-pledges-calculator.netlify.app/