Vouch This Art

• 

  cover image

Inspiration

The inspiration is based on image pinning apps like Pinterest and other embedded social media libraries like Disqus. Pinata API also have influence as I have been wanting to experiment on Pinata for quite some time, and found that building something with Keyvalue metadata as a lightweight database for querying might be an interesting project.

What it does

Vouch This Art is a web chrome extension that "Vouch" image, giving users the ability to interact with images that's hosted anywhere in the web, whether in the form of simple like or leaving a message about the image that can be read by other users of the extension. Unlike normal like and comments with messages, "vouch" is a kind of interaction from the users that is more persistent and durable, as it stored on Pinata network. Vouch This Art also stores Proof of Personhood when vouching images to Pinata server, which later can be used to verify the uploaded vouchs... although, verifying capability is currently disabled due to this extension has not yet implemented a proper auth mechanism.

When Vouch This Art installed on browser most images on the browsers will have a button revealed upon mouse hover. Clicking it will open a modal where users can "vouch" images and see other vouchs left by other users.

How we built it

Under the hood Vouch This Art uses Pinata as storage backend to store metadata regarding the image and the users. Images on the web pages first processed to get their MD5 hash inside web workers, so Vouch This Art can function across web domains. In the Pinata backend, metadata then will be stored in the kayvalues with both the image hash and user's id, as well as the full user credentials and other necessary informations as the JSON file body. Users can vouch an images multiple times as long as the body of the JSON not a duplication of existing JSON in Pinata network. Currently, Vouch This Art doesn't have any database, relying only on Pinata Files API and metadata keyvalues for querying.

Then, everytime the extension opens an image with Vouch This Art extension, it will requests the backend to list files in Pinata API through Keyvalues metadata based on the image's MD5 hash.

Vouch This Art also uses Gravatar services to display avatar based on email provided on the user credential file.

Challenges we ran into

The biggest challenge I ran into is implementing auth mechanism with W3C compliant Verifiable Credential. The resources I looked into mostly don't have thorough guides on how to implement them as a fully functional auth user flow (session, database, etc) that can be implemented easily to my current stack without prior experience. I reckon 1 month that I had is not enough for me to delve deeper into this as I'm not very familiar with the current W3C VC proposal, and, at the same time, I ran into bugs and performance issues with the extension I wrote that took me more time to address than I originally planning. So in the end I decided to settle for a demo credential baked into the extension itself, along with Typescript types based on W3C Verifiable Credential format and an untested API function to verify those credentials against Vidos servers.

As I mentioned before, I ran into bugs and performance issues with the extension itself. Mainly because calculating the MD5 hash for every image found on the pages would freeze the page for a few seconds on images heavy web pages. The obvious solution to this is to move the MD5 algorithm to web workers and run them outside of Javascript main thread. However, since I'm not familiar with web workers, it takes me quite some time to rewrite the code to find suitable business logic to suit my need. During the rewriting, quirky behaviour of Chrome extension is the most that contributes to my headache.

Other problems that I encountered includes in some occasion, some images that's not served on the same domain might incur some CORS issues during MD5 hash calculation (as Canvas and fetch to get the blob data of the images might get blocked by CORS).

Some issues might occur on heavily SPA based web pages - I did some tweaks to mitigate this problem a quite bit but further testing might be needed for it to be highly reliable on SPA.

Accomplishments that we're proud of

I found it satisfying to create a little extension that let users interacts on images anywhere on the web. The performance and bugs challenges quite interesting to tackle on and I learn a lot from this, which helps me a lot on rethinking how should I designs my future projects with this experience alone.

What we learned

With this project I learned a lot on how to rethink writing code with heavy-task computation and offload them to Web Workers, which is the first time I used it in a proper project.

I also found that Pinata API is very user friendly and I really liked how highly composable it is due the chaining functions. The fact that it can also be used with modern syntax like "for await" is also give Pinata API more edge over other storage platforms API that I've tried. All in all, I would love to try another side project using Pinata again in the future!

What's next for Vouch This Art

There are still issues that can still be addressed in future iteration of Vouch This Art, including simple reverse proxy in the backend to bypass CORS, and MD5 hashing make the images on SPA web pages more reliable.

Most importantly, once there's a proper auth implemented, the vouch verification feature then can be tested - once this happened, I might have to rethink how to store a valid user credential in the Pinata server in a more safer manner.

There's also an adjustment needed to address on how to bottleneck API calls to Pinata. A proper bottleneck and concurrency options will need to conform on the limitation imposed by Pinata API before Vouch This Art can enter production mode.

Finally, future iterations can explore more performant list() operations by utilizing Pinata API's async iterator and sink it over HTTP stream to user as soon as it gets a valid data from the Pinata API.

Built With

• bun
• hono
• pinata
• svelte
• vidos