Why? Just because I can. I decided to try something. Keep a very simple web page that just reads the latest record from Supabase but at the same time get new data for each new purchase from BuyMeACoffee to Supabase Functions. This is what I have done and I will also share what I've learnt.

The Development

Building this web service isn't too difficult. It involved a lot of reading documentation and learning how each services are connected to each other can function together. The plan is basically this:

The Components

First, a frontend static web page that reads Supabase records

I mean, its really simple.

The main.js file however, has a lot of logic and nuance that I don't think I've set up properly securely on the frontend. TODO: Make it secure and only check for relevant messages with RLS Policies and message filter.

A Supabase Function that acts as a WebHook Receiver

BuyMeACoffee has a webhook service that sends data to wherever the function is publicly hosted. This edge function is basically the Supabase Function and it will consume all of the data from BuyMeACoffee and stores it in the database table.

However, when I tried to deploy my function, it won't work without Docker (or at least on Windows, its looking for Docker Desktop), so we have to ensure that Docker is running first before it can be deployed.

Another thing I've learnt is that the webhook sent from BMAC to Supabase is fixed. So when Supabase Function has JWT verified enabled, it rejects it. But since BMAC also sends a secret key, I guess you could just rely that the messages coming from BMAC is the right one.

Supabase for the Database

Obviously I need something and somewhere to store the data. Postgresql is what I normally use and Supabase is just a no-brainer. But I've decided to give functions a better try.

BuyMeACoffee Webhook

The service is surprisingly easy to set up. Just give it a URL of where to fire to, copy the secrets to roll from and plug that into wherever the production service is hosted.

Github and Github Actions

All of this deployment and stuff needs to be automated. Ensuring that if I decide to make new changes/enhance this tiny side project, it should be easy. TODO: Write test cases

Domain Name from NameCheap to Cloudflare to Vercel

The domain itself is pretty cheap. Costs me about BND2.xx via Paypal for this pet project (that's the only cost to this side project so far). Change its nameservers to Cloudflare for DDoS protection because, why not? Then the waiting game for the changes is gonna take awhile (48 hours). And once these are set up, I can then point the deployed app on Vercel to CloudFlare. In fact, it didn't take too long (about 15 minutes) and its ready for me to add DNS records from Vercel to Cloudflare.

After testing deployment and checking if I get the SSL certs set up by CloudFlare, the page just refuses to load. In fact, I get the "Redirected too many times" error. I turned to Vercel's Help section, in fact, its AI. Clever!

I did the first thing in there. Apparently that whole Flexible option from Cloudflare did cause that problem. Setting it to "Full" fixed it.

And it is now, live! 🥳🎉🎊💃