I Built 24+ Free Developer Tools That Run in Your Browser — Here's the Full Stack

I got tired of jumping between 10 different websites every time I needed to format JSON, encode Base64, test a regex, or check DNS records.

So I built DevPik — a collection of 24+ free developer tools, all in one place. No signups, no ads, no data leaving your browser.

Here's what I built, how I built it, and what I learned.

What's Inside

Text Tools (9)

• Word Counter — words, characters, sentences, paragraphs
• Case Converter — uppercase, lowercase, title case, camelCase, snake_case
• Text Diff — compare two texts side by side
• Slug Generator — SEO-friendly URL slugs from any text
• Markdown Converter — markdown to clean HTML
• Lorem Ipsum Generator — placeholder text for designs
• Text Repeater — repeat any text N times
• Text to HTML — plain text to formatted HTML
• Unicode Text Converter — fancy fonts for social media bios

Developer Tools (12)

• JSON Formatter — format, validate, beautify with tree view
• Regex Tester — real-time match highlighting, capture groups, cheat sheet
• Base64 Encoder/Decoder
• URL Encoder/Decoder
• UUID Generator
• JWT Decoder — decode tokens, inspect headers and payloads
• HTML Minifier
• Color Converter — HEX, RGB, HSL, CMYK with visual picker
• Unit Converter — length, weight, temperature, data, speed, time
• Mermaid Converter — mermaid code to PNG/SVG
• Code Share — share code snippets with shareable links
• URL Shortener — shorten URLs with QR codes

Network Tools (3)

• Internet Speed Test — download, upload, ping
• IP Address Checker — IP, location, ISP details
• DNS Lookup — query A, AAAA, MX, TXT, NS, SOA records

The Tech Stack

Here's exactly what powers DevPik:

Frontend: Next.js (App Router) + TypeScript + Tailwind CSS

Backend: Supabase (PostgreSQL + Auth + Storage)

Hosting: Vercel

Architecture:

• Most tools run 100% client-side — your data never leaves the browser
• Two tools (Code Share & URL Shortener) use Supabase for storage since they need to generate shareable links
• DNS Lookup uses a Next.js API route as a proxy to Google's DNS-over-HTTPS API (browsers block direct calls due to CORS)
• Blog content is managed through Supabase with a custom admin dashboard
• Newsletter subscribers, contact form submissions, tool feedback, and anonymous usage analytics all flow into Supabase

Why I Built This

Every developer has this workflow:

1. Need to format some JSON → google "json formatter online"
2. Land on a site with 3 popup ads and a cookie banner
3. Paste your API response containing sensitive data
4. Hope the site isn't logging everything to their server
5. Repeat for Base64, regex, JWT, DNS...

I wanted one clean site where:

• No data leaves the browser (for client-side tools)
• No signups required
• No ads anywhere
• Fast — tools respond in milliseconds, not seconds
• Everything is in one place

A Few Things I Learned Building This

1. Client-side processing is a real competitive advantage

When I tell developers their data doesn't touch a server, they actually care. Especially when pasting JWT tokens, API keys, or production JSON. The privacy angle isn't just marketing — it's a genuine feature.

2. Supabase's free tier is incredibly generous

I'm running a blog CMS, newsletter system, contact forms, anonymous analytics, a paste bin (Code Share), and a URL shortener — all on the free tier. PostgreSQL + Row Level Security + Storage + Auth in one place made this possible as a solo project.

3. Google's DNS-over-HTTPS API blocks browser requests

I tried calling dns.google/resolve directly from the client. CORS said no. The fix was a simple Next.js API route that proxies the request server-side. Took 20 minutes but saved the entire tool.

4. SEO for tool pages needs more than just the tool

A page with just a JSON formatter widget won't rank. Each tool page needs: a descriptive H1, a "How to Use" section, an "About" paragraph, an FAQ with structured data, and links to related tools. It's more content work than code work.

5. Build the tools people actually search for

I prioritized tools based on search volume, not what I thought was cool. JSON Formatter, Regex Tester, Base64 Encoder, Word Counter — these are the workhorses that bring in traffic. Niche tools are nice, but the basics are what people actually need daily.

What's Next

• More tools: Hash Generator, CSS/JS Minifier, Cron Parser, Timestamp Converter, QR Code Generator
• More blog content supporting each tool (each post = a new keyword entry point)
• Possibly a public API so developers can use these tools programmatically

Try It Out

👉 devpik.com

Everything is free. No signup. No ads. Just tools.

If you find it useful, I'd love to hear which tool you use the most — or which tool you wish existed. Drop a comment below.

I'm Muhammad Tayyab, a full stack developer from Pakistan building DevPik. I write about developer tools, Next.js, and building in public. Follow me here to see what I ship next.