Jooni

Bonsai is a traditional form of Japanese art, with forums dedicated to discussing and posting pictures of the plant. Noticing there was no place where progress could be tracked in a easy and organized way, I teamed up with an UX designer to make a product using Angular integrated with Google’s Firebase, and shipped as a progressive web app.

Jooni is available as a website, as an app for Android!

It’s common for bonsai practitioners to take photos of their plants, showing its growth and interventions, such as cutting and shaping. These photos are usually shared in forums, but people have no way to access a single plant history and see its progress in time.

Jooni is a social media app where you can post the pictures of the plant, with the date and interventions that were done, to create a timeline of the plant’s progress. Users are able to share the plants history with the community, and rate them.

blurhash

To improve the user experience, I implemented BlurHash in Jooni. BlurHash is a small representation of a placeholder for an image, allowing us to display a blurred preview until the full image loads. Blurhash is used to improve the perceived performance, especially on slower connections where images take longer to load.

The integration process involved generating a BlurHash string for each image as it was uploaded to the platform. This string is then stored together with the image metadata in Firestore. When rendering images on the client side, the BlurHash string is used to create a canvas element that displays the blurred image preview until the actual image is fully loaded.

Here's an example of how a BlurHash appears before the full image is displayed. It's a smooth transition that provides context of the content that's loading, improving the aesthetic and functionality of Jooni.