sahalamgir miah

Posted on Jun 11, 2025

What if I could build a simple tool that automatically resizes PAN card photos online – without any software or design skills?

Absolutely! Below is a Dev.to-style article written in a natural, developer-friendly way. It’s educational, story-driven, and cleverly places your website link (https://www.clickandpan.in/) in a way that makes people feel they should click it to learn more or try it.

🛠️ কেমন করে আমি একটি অনলাইন টুল বানালাম – আর আপনিও বানাতে পারেন!

Have you ever struggled to upload your PAN card photo online, only to get an error saying "Image too large" or "Invalid dimensions"?

That frustration gave me an idea.

❝What if I could build a simple tool that automatically resizes PAN card photos online – without any software or design skills?❞

That’s how my journey began, and today I’ll walk you through:

🎯 What problem I solved
💡 How I planned and built the tool
⚙️ What tech stack I used
🔗 And of course, how you can build your own tool

🚩 Identifying a Real-Life Problem

In India, millions of users need to upload PAN card photos for:

Bank accounts
Aadhaar linking
Government services

But most platforms reject images unless they’re:

Under 50 KB
Proper 200x300 px dimensions
JPEG or PNG format

Most people don’t have Photoshop or editing knowledge. So they:

Try random apps
Compress image quality too much
Get confused or give up

This led to building a one-click online solution.

🌐 Meet the Tool – Click & PAN

Here’s the live version of what I built:
👉 https://www.clickandpan.in

It’s an online tool where users can:

Upload their PAN image

Automatically resize and compress it to the required specs

Download instantly for free

No login, no ads, no confusion.

Try it here → https://www.clickandpan.in

🧠 Tech Stack I Used

The tool is simple but powerful. Here's what I used:

Component	Tech Used
🧑‍💻 Frontend	HTML, Tailwind CSS, Vanilla JS
🖼️ Image Handling	JavaScript canvas, `FileReader` API
💾 Compression	`canvas.toBlob()` + quality ratio logic
☁️ Hosting	Vercel (free tier)
🔒 SSL & Privacy	HTTPS, no backend storage

💡 Core Logic (Simplified)

Here’s a rough idea of what the code does:

const resizeImage = (file) => {
  const reader = new FileReader();
  reader.onload = (e) => {
    const img = new Image();
    img.onload = () => {
      const canvas = document.createElement("canvas");
      canvas.width = 200;
      canvas.height = 300;
      const ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, 200, 300);
      canvas.toBlob((blob) => {
        const downloadLink = URL.createObjectURL(blob);
        // Let user download resized image
      }, "image/jpeg", 0.7); // Compression level
    };
    img.src = e.target.result;
  };
  reader.readAsDataURL(file);
};

📦 Deployment Tips

Host on Netlify, Vercel, or GitHub Pages – free and fast
Use SEO keywords – e.g., "PAN photo resize tool"
Mobile optimization – Most users will come from phones
Speed matters – Compress JS and remove unnecessary assets

🔗 Why Add Your Own Tool to the Web?

By building tools like this:

You solve real-world problems
You get real traffic
You create passive income (ads, freemium, or affiliate)

Want to see how I did it?
Try the live tool here 👉 https://www.clickandpan.in

💬 Comment below if you want me to open-source a basic version.

✍️ Final Thoughts

If you’ve ever thought "I’m not good enough to build a tool", trust me – start with one small real-life problem.

You don’t need AI or massive backend systems.
All you need is:

Curiosity
JavaScript
A few hours

👉 Still confused? Just study how my tool works: https://www.clickandpan.in
You’ll learn more from reverse-engineering than any course.

https://www.clickandpan.in/

DEV Community