Home Blog Tools
Tools

I Built 8 Free Tools for Indian Developers — Here Is What I Learned

Building 8 tools taught me more about JavaScript than any tutorial. Here is every lesson, mistake and win.

J
Jay Agarwal
Apr 05, 2026
...

Over the past few months, I set an incredibly ambitious goal for myself: build 8 complete, production-ready web tools for Indian freelancers and developers. But I gave myself one strict, unbreakable rule: Absolutely no frameworks.

No React. No Vue. No Tailwind CSS. No node_modules folder with 50,000 hidden dependencies. Just pure Vanilla JavaScript, native HTML5, and standard CSS.

Building a GST Calculator, a PDF Invoice Generator, a WhatsApp Link Maker, and a CSS Box Shadow Generator from scratch taught me more about the fundamentals of web development than any YouTube bootcamp ever could. In this deep-dive post, I am going to break down the architectural decisions, the mistakes, and the massive performance wins of building an entire ecosystem in Vanilla JS.

Why Vanilla JS in a Framework-Obsessed World?

If you look at modern web development Twitter (X), you would think it's literally impossible to build a button without installing a JavaScript framework. While React is an absolute masterpiece for building massive, highly-interactive enterprise applications (like Facebook or Netflix), using it to build a simple tax calculator is like using a sledgehammer to crack a peanut.

By forcing myself to stick to Vanilla JS, I achieved three things:

  • Zero Bundle Size: My tools load instantly on 3G mobile networks because there is no 150KB JavaScript framework downloading in the background.
  • Perfect Lighthouse Scores: Every single tool scores 100/100 in Performance, Accessibility, and SEO.
  • Deep Browser Knowledge: I learned exactly how the Document Object Model (DOM) paints and repaints, rather than letting a Virtual DOM abstract the magic away from me.

Lesson 1: Architecture is Everything (Escaping Spaghetti Code)

The biggest argument developers make against Vanilla JS is that without React's component structure, your files will inevitably turn into a 2,000-line mess of "spaghetti code." And they are right—if you don't plan your architecture.

To solve this, I heavily utilized native Web Components. Browsers natively allow you to create your own HTML tags using the customElements.define() API.

javascript
// js/components/UI.js
class JayNavbar extends HTMLElement {
    connectedCallback() {
        // This runs the moment  is injected into the DOM
        const basePath = this.getAttribute('base-path') || '../';
        
        this.innerHTML = `
            
        `;
    }
}

// Register the custom element with the browser
customElements.define('jay-navbar', JayNavbar);

By defining my Navbar, Footer, and Sidebar as custom HTML tags, I kept my codebase incredibly DRY (Don't Repeat Yourself). If I need to add a new link to my navigation, I update one single JavaScript file, and it instantly reflects across all 8 tools and my entire blog.

Lesson 2: CSS Variables are a Superpower

I wanted my entire suite of tools to share a premium, tactile, "Dark Skeuomorphic" aesthetic—recessed input fields, raised buttons, and glowing orange accents. Achieving this consistency across 8 different applications required a strict design system.

Instead of using Tailwind utility classes (which clutter the HTML), I built a robust tokens.css file using CSS Custom Properties (Variables).

css
/* css/tokens.css */
:root {
    /* Core Palette */
    --bg: #09090b;
    --surface: #18181b;
    --surface2: #27272a;
    
    /* Accents */
    --orange: #ff4d00;
    --orange2: #ff7333;
    
    /* Typography */
    --text: #ffffff;
    --muted: #a1a1aa;
    
    /* Skeuomorphic Shadows */
    --shadow-recessed: inset 0 2px 4px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
    --shadow-raised: 0 4px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
}

With this global token system, styling a new tool takes minutes. If I ever decide to rebrand my entire portfolio from Orange to Electric Blue, I literally only have to change two hex codes in tokens.css, and all 8 tools will instantly re-theme themselves.

Lesson 3: State Management Without Redux

In React, you use useState. In Redux, you use complex reducers. How do you manage data changes in Vanilla JS? For micro-tools, you keep it simple: centralized objects and explicit UI update functions.

For tools like the GST Calculator, I created a single state object. Whenever an input changed, it updated the state, and then manually called an updateUI() function.

javascript
// Simple Vanilla State Management
const state = {
    amount: 0,
    isInterstate: false
};

// Listen for user input
document.getElementById('amount-input').addEventListener('input', (e) => {
    state.amount = parseFloat(e.target.value) || 0;
    renderCalculations(); // Explicitly trigger the UI update
});

// The Render Function
function renderCalculations() {
    const tax = state.amount * 0.18;
    document.getElementById('total-output').innerText = `₹${state.amount + tax}`;
}

It isn't reactive by magic, but for small tools, this explicit flow is vastly easier to debug than a deeply nested React component tree.

Lesson 4: Native Browser APIs are Incredible

Before you reach for an npm package, you should always check the Mozilla Developer Network (MDN) docs. I realized I didn't need external libraries for almost anything I wanted to build:

  • Copying Text: Instead of downloading a library, I used the native navigator.clipboard.writeText() API.
  • Generating PDFs: Instead of heavy PDF generators, I used window.print() combined with strict @media print CSS queries.
  • Formatting Currency: Instead of writing complex regex to add commas to Indian Rupees, I used the native Intl.NumberFormat('en-IN') API.

Frequently Asked Questions (FAQ)

Is Vanilla JS scalable for large corporate projects?

For micro-SaaS, personal blogs, landing pages, and portfolio sites, Vanilla JS is highly scalable if you strictly utilize ES6 modules and Web Components. However, if you are building a highly complex dashboard with massive real-time state changes (like a stock trading platform or a social media feed), a framework like React or Vue is genuinely superior because of its Virtual DOM diffing algorithms.

Why didn't you use Tailwind CSS?

Tailwind is a fantastic tool for rapidly prototyping layouts, but it teaches you Tailwind, not CSS. By writing pure CSS, I learned the intricacies of Grid, Flexbox, pseudo-elements, and CSS variables. Furthermore, keeping my HTML completely clean of hundreds of utility classes makes it much easier to read and maintain natively.

Which of the 8 tools was the hardest to build?

The PDF Invoice Generator was by far the most complex. Managing dynamic rows (adding/deleting line items), calculating running totals, and formatting the CSS so that it exported perfectly to an A4 piece of paper without breaking the layout took several days of trial and error.

Conclusion

Frameworks come and go. Today it's React, tomorrow it might be Svelte, and in five years it will be something completely new. But standard JavaScript, HTML, and CSS are forever.

By stripping away the layers of abstraction and refusing to rely on magical npm install commands, I became a significantly stronger software engineer. I learned how to debug the browser, how to structure an architecture from scratch, and how to write highly performant code. If you currently rely heavily on frameworks to build everything, I challenge you: try to build your next small project in pure Vanilla JS. You will be amazed at what the modern browser can do.

Check out all 8 tools I built completely for free in my Tools Directory.