How I Built a Free Image Tools Website Using React and TypeScript

Question

As developers, we often come across simple tasks that should take a few seconds but somehow end up taking much longer.

A common example is working with images.

Whether it's resizing a screenshot, compressing a large image before uploading it somewhere, converting formats, or adding a watermark, most of us have searched for a quick online tool at some point.

After repeatedly facing these small but frequent problems, I decided to build my own solution: Free Image Tools.

In this article, I'll share the motivation, tech stack, architecture decisions, and lessons I learned while building the project.

The Problem

Most image utility websites offer similar features:

• Crop images
• Resize images
• Compress images
• Convert image formats

While many of them work well, I noticed a few recurring issues:

• Too many ads and popups
• Cluttered user interfaces
• Multiple steps for simple operations
• Features hidden behind subscriptions
• Slow user experience

I wanted to create something simpler and focused on the essentials.

The Goal

The goal was straightforward:

Create a collection of image utilities that are:

• Fast
• Easy to use
• Mobile friendly
• Free
• Focused on common image editing tasks

The first version includes:

• Crop Image
• Resize Image
• Compress Image
• JPG to PNG
• PNG to JPG
• JPG to WebP
• WebP to PNG
• Rotate Image
• Flip Image
• Add Watermark

You can try it here:

https://www.freeimagetools.click

Choosing the Tech Stack

Since I'm primarily a React developer, React was the obvious choice.

The final stack includes:

Frontend

• React
• TypeScript
• Vite
• Tailwind CSS
• React Router
• Zustand

Deployment

• GitHub
• Vercel

Why Vite?

Vite offers:

• Fast development startup
• Excellent TypeScript support
• Simple deployment process
• Small configuration overhead

For utility-focused projects, development speed matters a lot, and Vite helps achieve that.

Project Structure

One of my goals was to make the project scalable.

Instead of putting everything into a few folders, I followed a feature-based architecture.

Example:

src/
├── features/
│   ├── crop/
│   ├── resize/
│   ├── compress/
│   ├── convert/
│   └── watermark/
│
├── components/
├── hooks/
├── services/
└── utils/

This makes it easier to add new tools later without creating a large, difficult-to-maintain codebase.

Challenges During Development

1. Reusability

Many tools perform different operations but follow the same workflow:

1. Upload image
2. Preview image
3. Apply transformation
4. Download result

Instead of building separate implementations for every tool, I created reusable components for:

• File upload
• Image preview
• Download actions
• Tool layouts

This significantly reduced duplication.

2. SEO Considerations

A utility website depends heavily on organic search traffic.

I designed the routing structure around searchable keywords.

Examples:

/crop-image
/resize-image
/compress-image
/jpg-to-png
/png-to-jpg

These URLs are easier for users to understand and align well with common search queries.

3. Mobile Experience

A large percentage of users access utility websites from mobile devices.

This meant:

• Large touch targets
• Responsive layouts
• Minimal distractions
• Fast loading pages

Every tool page was tested with mobile users in mind.

What I Learned

Building this project reminded me that not every product needs to be complex.

Sometimes solving a simple problem well creates more value than building something packed with features.

A few lessons stood out:

Start Small

It's tempting to add dozens of features immediately.

Instead, I focused on the most commonly used image operations first.

Consistency Matters

A consistent design system makes the application easier to use and maintain.

SEO Is a Product Feature

For utility websites, discoverability is just as important as functionality.

A great tool that nobody finds is still invisible.

What's Next?

I'm planning to expand the platform with additional tools such as:

• Batch Resize
• Batch Compression
• Instagram Post Resizer
• YouTube Thumbnail Resizer
• LinkedIn Banner Resizer
• Passport Photo Resizer

The goal is to gradually build a complete collection of image utilities while keeping the experience simple and accessible.

Final Thoughts

Building Free Image Tools was a great opportunity to combine frontend development, user experience design, and SEO strategy into a single project.

If you're working on a side project, my biggest recommendation is simple:

Start with a real problem, keep the scope manageable, and focus on delivering value consistently.

You can check out the project here:

https://www.freeimagetools.click

I'd love to hear your feedback, suggestions, or ideas for future tools.

Thanks for reading!