DEV Community

Cover image for How I Built a 25-Tool Next.js Micro-SaaS in 24 Hours (and let an Hermes AI Agent handle my SEO)
Harsha Dev
Harsha Dev

Posted on

How I Built a 25-Tool Next.js Micro-SaaS in 24 Hours (and let an Hermes AI Agent handle my SEO)

Hey DEV community! 👋

As a developer and digital marketer, I got sick of using random, ad-stuffed websites every time I needed to quickly format JSON, calculate a margin, or compress an image. Even worse, I hated the idea of uploading sensitive PDFs or client code to third-party servers just to split a page or convert a format.

So, I decided to build my own privacy-first solution. In just 24 hours, I built and launched WebToolSync.

It's a free suite of 25+ browser utilities designed for developers, creators, and operators.

🛠️ The Tech Stack
I wanted this to be lightning-fast and incredibly secure, so here is the architecture I went with:

Frontend/Backend: Next.js (App Router)

Hosting: Hostinger VPS (Ubuntu)

Process Manager: PM2 (to keep the Node server alive)

Reverse Proxy: Nginx

Security: Certbot / Let's Encrypt for auto-renewing SSL

The "Secret Sauce": Client-Side Processing
The biggest feature of WebToolSync isn't what it does, but where it does it.

For the Image Converters (JPG to PNG, Compressors) and the PDF Tools (Split, Merge, Rotate), everything happens locally inside the user's browser. By utilizing modern browser APIs and client-side processing, zero files are ever uploaded to a server. This means zero latency, no file size limits, and 100% data privacy.

The Wild Part: Delegating SEO to an Autonomous Agent
Building 25 tools in a day is fun. Writing 800 words of SEO-optimized content and FAQ schema for 25 different tool pages? Not fun.

Instead of doing it manually, I spun up Hermes-Agent (an autonomous local LLM) directly on my VPS via SSH. I gave it access to my Next.js codebase and literally gave it the prompt: "Rewrite my SeoContent.tsx component to include 500+ words of educational content and Schema markup for all 25 tools so it ranks on Google."

I sat back and watched the terminal as the AI navigated my directories, read my Next.js components, realized it made a truncation error, automatically deployed a sub-agent to fix its own mistake, and successfully rebuilt my codebase.

Try It Out
I'm building this entirely in public. You can check out the live site here:
👉 WebToolSync.com

I also recorded a full breakdown of how I built the SaaS without writing traditional code on my YouTube channel if you want to see the exact workflow!

I'd love to hear your feedback on the UI/UX. What tool should I add to the platform next? Let me know in the comments!

Top comments (0)