How I Built an AI-Assisted Image SaaS with Astro, Supabase, Stripe, R2, and Electron

ImgKit began with a simple product bet: people search for practical image tasks all the time. They need to compress a file, convert PNG to WebP, resize an image, or understand why an upload looks blurry.

That made the first version intentionally small. Instead of starting with a dashboard, ImgKit shipped free browser-side tools and practical guides. The site could solve real jobs while the product direction was still being tested.

The Stack

The public site uses Astro because the first growth channel is content and tools. Static pages, fast loading, and clean SEO matter more than a complex app shell at this stage.

Supabase handles account login and product access. Stripe handles checkout. Cloudflare R2 stores private downloadable assets. Cloudflare Workers serve API routes for checkout, webhook, and protected download flows.

Electron became the desktop layer for local batch image workflows. That app lets ImgKit explore software value without forcing source images through a hosted conversion service.

The Product Path

The first useful surface was free tools:

1. Convert images in the browser.
2. Compress toward real upload limits.
3. Resize copies for websites and stores.
4. Teach the surrounding workflow with guides.

Then came Pro-style local workflows: batch conversion, background removal, reports, and desktop packaging lessons.

The commercial question was harder. A paid desktop app needs signing, support expectations, update handling, and trust. ImgKit had working software, but the better first paid product was the build process itself.

Why The First Paid Product Is A Builder Case Study

The real value was already there for builders:

• the Astro content and product surfaces;
• the Supabase membership foundation;
• Stripe checkout and webhook decisions;
• R2 protected download delivery;
• Electron desktop app lessons;
• Codex review and implementation workflow;
• the pricing pivot from software sale to educational product.

That briefly became the ImgKit Builder Case Study, a source-code and tutorial package with setup notes and the honest decision trail. That standalone offer is now retired.

How AI Helped

AI coding was most valuable when it was paired with product judgment. The workflow looked like this:

1. Inspect the existing repository before changing code.
2. Make small scoped edits.
3. Build or test immediately.
4. Review the product consequence, not only the syntax.
5. Turn repeated work into scripts or reusable notes.

The goal was not to let AI invent a product in isolation. The goal was to use AI to move faster through implementation while keeping the product direction grounded.

What Builders Can Learn

The useful lesson is not “copy this exact app.” It is the sequence:

1. Start with a specific repeated problem.
2. Publish free tools and guides that solve real jobs.
3. Add protected delivery before public checkout.
4. Pause paid software if support and trust are not ready.
5. Sell the part that is already valuable.

For ImgKit, that briefly meant selling the build record first. The active paid path later moved to portrait animation.

Archived Case Study

If you are building an AI-assisted SaaS, local desktop MVP, protected download product, or source-code education package, the archived Builder Case Study page preserves the implementation trail. It is no longer a checkout offer.

FAQ

Is ImgKit a finished SaaS template?

No. ImgKit is a real product project, and the old Builder Case Study page is now archived rather than sold as a separate source-code package.

Why build browser image tools first?

Browser tools create useful search pages, solve immediate user problems, and prove demand before heavier paid software is pushed.

What role did AI coding play?

AI assistance helped inspect the codebase, implement scoped changes, review flows, and turn product decisions into working pages and scripts.