The latest articles on DEV Community by Pranjal Srivastava (@pranjal_srivastava_b5e55f). https://dev.to/pranjal_srivastava_b5e55f https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2236650%2F5a92e6fb-c278-42a4-9b77-7305ab631556.jpg https://dev.to/pranjal_srivastava_b5e55f en Pranjal Srivastava Wed, 10 Jun 2026 00:02:28 +0000 https://dev.to/pranjal_srivastava_b5e55f/how-i-built-65-free-browser-tools-in-2-weeks-using-ai-astrojs-cloudflare-1fo7 https://dev.to/pranjal_srivastava_b5e55f/how-i-built-65-free-browser-tools-in-2-weeks-using-ai-astrojs-cloudflare-1fo7 <h2> The Problem </h2> <p>Every time I needed a quick tool online, <br> the same loop:</p> <ol> <li>Search for free PDF compressor</li> <li>Find a promising site</li> <li>Hit a sign-up wall or paywall</li> <li>Repeat for every tool</li> </ol> <p>I got tired of it. So I built CrispToolHub — <br> a hub of 65+ free browser-based tools.</p> <h2> What I Built </h2> <p><strong>crisptoolhub.com</strong> — 70 pages, 65+ tools:</p> <ul> <li>📄 PDF Toolkit (10 tools using pdf-lib + PDF.js)</li> <li>📝 Resume &amp; Career (10 tools with Gemini AI)</li> <li>🖼️ Image Tools (7 tools with WASM)</li> <li>💰 Financial Calculators (20 calculators)</li> <li>👨‍💻 Developer Tools (6 tools)</li> <li>✏️ Text Tools (6 tools)</li> <li>📏 Ruler &amp; Compass</li> </ul> <h2> Tech Stack </h2> <ul> <li> <strong>AstroJS v6</strong> — MPA (no SPA), static build</li> <li> <strong>Tailwind CSS v4</strong> — styling</li> <li> <strong>Cloudflare Pages</strong> — hosting (free)</li> <li> <strong>Cloudflare Workers</strong> — Gemini AI proxy</li> <li> <strong>Google Gemini 2.5 Flash</strong> — AI features</li> <li> <strong>pdf-lib</strong> — PDF manipulation</li> <li> <strong>PDF.js</strong> — PDF rendering</li> <li> <strong><a class="mentioned-user" href="https://dev.to/imgly">@imgly</a>/background-removal</strong> — WASM AI</li> <li> <strong>Mammoth.js</strong> — Word doc parsing</li> </ul> <h2> How AI Helped </h2> <p>I used Claude Code (Anthropic) for the entire <br> development. The workflow:</p> <ol> <li>Write detailed specs for each tool</li> <li>Claude Code reads CLAUDE.md (project bible)</li> <li>Builds the tool following all conventions</li> <li>Runs tests automatically</li> <li>Deploys via Cloudflare Pages</li> </ol> <p>This reduced development time from months to weeks.</p> <h2> Key Technical Decisions </h2> <p><strong>MPA over SPA:</strong> Every page is a full reload. <br> Better SEO, better performance, simpler code.</p> <p><strong>Everything client-side:</strong> All processing happens <br> in the browser. No servers, no file uploads, <br> complete privacy. PDF.js renders PDFs, WASM <br> removes backgrounds, pdf-lib manipulates PDFs.</p> <p><strong>Lazy loading:</strong> Heavy libraries (PDF.js, WASM, <br> mammoth) only load when user clicks a button. <br> Initial page load is near-instant.</p> <p><strong>Currency system:</strong> 6-currency toggle (USD/INR/<br> EUR/GBP/AED/SAR) with canonical USD base value <br> to prevent rounding drift.</p> <h2> Lessons Learned </h2> <ol> <li><p><strong>Trailing slashes matter for SEO</strong> — Google <br> Search Console showed redirect errors for /ruler <br> without trailing slash. Fixed with <br> trailingSlash: "always" in Astro config.</p></li> <li><p><strong>Mobile file upload is different</strong> — <br> Blob.arrayBuffer() fails on iOS Safari. <br> Solution: FileReader API universally works.</p></li> <li><p><strong>Gemini thinking models</strong> — gemini-2.5-flash <br> is a thinking model. Without thinkingBudget: 0, <br> it burns all tokens on reasoning and returns <br> empty response.</p></li> <li><p><strong>PDF.js workers on mobile</strong> — Web Workers <br> fail on mobile browsers. Solution: CDN worker <br> fallback with version matching.</p></li> </ol> <h2> Results After 3 Days </h2> <ul> <li>1,900 active users</li> <li>55% US traffic</li> <li>Top pages: Mortgage Calculator, Resume Builder</li> <li>70 pages indexed on Google</li> </ul> <h2> What's Next </h2> <ul> <li>Google AdSense (pending approval)</li> <li>Premium subscriptions (₹199/month)</li> <li>AI-powered reports (resume, finance)</li> <li>Video tools</li> </ul> <h2> Try It </h2> <p><strong><a href="https://crisptoolhub.com" rel="noopener noreferrer">https://crisptoolhub.com</a></strong> — completely free, <br> no account needed.</p> <p>Would love feedback from the dev community — <br> what tools are missing? What would you build next?</p> <p><em>Built with AstroJS + Cloudflare + Claude Code</em></p> astro webdev javascript showdev