hegrid

Hegrid Banner
Image Processing Page
Image History Details
Generated Tiles Section

Inspiration

In my organization, I'm part of the media and communication team, which means I also manage our social media accounts. Like many organizations, we aim to create visually appealing Instagram feeds with consistent themes. Every time I want to post new content, I have to design and split the image using Illustrator. But sometimes, I just need to split an image without doing any design work and opening Illustrator feels like a waste of time, especially since it loads so slowly on my laptop. After splitting the image, I also have to post it manually. It's difficult to assign the posting order to my team, and I end up sending the image slices one by one. That's why I need a tool like Hegrid to split images effortlessly and make it easier to assign and share posting tasks with my team.

What it does

It can slice an image into multiple grids based on the selected layout (3x1, 3x2, 3x3, ... 3xn) and aspect ratio (1:1 or 4:5). Users can then download individual tiles or multiple tiles as a ZIP file. They can also view the processed image in the history page and share a link that displays a preview of all the slices in the chosen grid layout.

How we built it

We built it using the HTML Canvas API to crop images into multiple grids, and we store the data and images in Supabase. This allows users to view their processing history and access a shareable public preview page. I also created a webhook using a Supabase Edge Function to receive pings from Gumroad, which are used to toggle the user's free or pro plan status.

Challenges we ran into

Sometimes, the logic generated by Bolt doesn't match what I have in mind, so I need to give it suggestions or feedback to adjust the logic. Additionally, since Indonesia is not listed in Stripe’s supported countries, I decided to use an alternative global payment solution although it’s not as commonly used as Stripe.

Accomplishments that we're proud of

This is my first SaaS product launched on the internet.

What we learned

I learned what BaaS (Backend as a Service) platforms like Supabase are, which features I can leverage in Supabase, how to connect it to my app, what a webhook is, and how to trigger my app using webhooks from third-party services.