How I built PRIVATE IMAGE TOOLS in just 2 days with Cursor

Software Engineer

I've been using AI tools in my development process for a while now, and they've significantly boosted my performance by reducing the knowledge gap. In today's post, I'll share my process of building custom image tools using AI.

App: https://img-tools.namvo.net/

Why I choose to build PRIVATE IMAGE TOOLS

My main job involves many frontend tasks which I have to optimize loading times. As you know, assets like images are much larger in size compared to text files like JavaScript or CSS, and they cannot be split into smaller chunks. Therefore, it's important to:

Crop images to a suitable size. I usually use images that are 1.5 times larger than the render size. For example, if an image container is 100x200, I will crop my image to 150x300.
Convert to a suitable format. JPEG offers better compression, and WebP is recommended for modern browsers. I prefer JPEG because I want to support as many browsers as possible. You can check the WebP support at caniuse.com/webp.
Convert small icons to Base64 to load them immediately along with the website. I prefer this method for important icons that are under 2KB.

There are many tools available, but most require uploading images to their servers, which then send the results back. This is fine for public assets, as users can leverage these services' server power. However, some tools impose daily free limits or charge for the best-quality images. For private images, this is NOT ideal.

Fortunately, this image conversion process can be implemented using HTML Canvas, which runs directly in your browser. That's why I built these Private Image Tools.

PRIVATE IMG TOOLS features

The core app value is: No uploads, no tracking - just pure, private image editing

Image Converter

Convert images between formats: PNG, JPEG, WEBP, AVIF, BMP, TIFF
Compress and resize your images
Batch process multiple files without any limits

Metadata Remover

Unveil image metadata including GPS, Camera, Date taken, ...
Erase metadata instantly
Check file location on Google Maps, if available

Base64 Converter

Convert images in different formats to base64 encoded strings

Background Remover

Remove backgrounds from batch of images with one click
All free with the best image quality

The disadvantage of my app is that it uses your computer's hardware, so it might be slower on older machines.

My experience with Cursor

Cursor is one of the most popular and powerful AI editors, especially with its new Agent mode. It offers a 2-week Pro trial.

Firstly, I used ChatGPT to understand the process of initializing a project using the following stack:

Vite + React + TypeScript
TailwindCSS + Shadcn

The world of frontend development changes rapidly. Even though I have experience with React, I discovered new and interesting project settings thanks to AI recommendations.

In Cursor, you can create a Cursor Rule to set code conventions, project structure, and more, that you want AI to align with. This is very helpful in maintaining a consistent codebase during production. I then used Composer to describe a feature like:

I would like to build an image converter app. Please help me implement the following components:
- A drag & drop zone that allows users to select multiple image files
- A select box that allows users to choose the target image type: JPEG, PNG, WebP, etc.
- A slider that allows users to select the compression ratio
- An input field that allows users to select the target image height/width
- A result grid that shows the converted image, with before and after dimensions and image size
Please use TailwindCSS + Shadcn (you can add it to the Cursor rule).

My experience taught me to split features into small batches, rather than tackling them all at once. For example, if the above request works well, I will ask Composer to add the "Show Diff" modal for visualizing before and after processing. This ensures the AI focuses on the current task before moving on to the next one. However, it will cost more if you pay for the Pro subscription (currently, it limits 500 requests/month and charges extra for additional requests).

The first image tool took me just about an hour to complete, and the AI-generated code (I used Sonnet 3.7) ran without bugs. It even identifies lint errors and continues generating until error-free - an impressive feature!
Subsequent features took only around 20 minutes to implement. I added @src when implementing the next feature, allowing the AI to have context from the previous code and build upon it.

However, I did encounter some issues:

It used the old Shadcn versions. Despite asking multiple times, it continued using the outdated version, so I had to manually add Shadcn components.
The code is runnable but with poor structure. If you don't instruct it to separate the logic, it will add all the logic inside a component. Therefore, developers need to guide it and monitor the output to avoid technical debt as the project grows.

Conclusion

I built an efficient PRIVATE IMAGE TOOLS in just two days (around 8 working hours, most of which involved refactoring AI code). The release speed is impressive, saving a lot of time. However, this is just a small personal project. For production and larger codebases, we must read AI-generated code carefully before applying it and it is very IMPORTANT. I'm quite tired of reading AI-generated code with over-optimized code and deprecated APIs

I will try more AI tools like Windsurf, Claude Code, etc., and share my experiences with you soon.

Thanks for reading!

Created at 2025-04-11 10:27:04 +0700

Related blogs

One Design Pattern a Week: Week 4

Welcome back to my "One Design Pattern a Week" series!Try to solve this real problem: Request HandlingImagine you're building an enterprise applicatio...

Software Engineer

2024-10-28 16:46:15 +0700

How to customize YJIT in the Rails app

In this post, we'll dive into what YJIT is, how to enable it in your Rails app, and how to monitor and configure it for optimal performance.What is YJ...

Software Engineer

2024-12-04 16:29:15 +0700