Building ToolHover: A Privacy-First Toolkit That Ranked #107 on Product Hunt 🚀

QuantumRegex — Wed, 01 Oct 2025 17:57:59 +0000

TL;DR

I built a privacy-first web toolkit with 20+ free online tools using Next.js 15 and React 19. It ranked #107 out of 400+ products on Product Hunt. All processing happens client-side—your data never leaves your browser. Check it out at toolhover.com

The Problem 🤔

Ever needed to quickly convert text to base64, generate a secure password, or format JSON, but hesitated because you didn't trust where your data was going?

Most online tools send your data to their servers. For sensitive information like passwords, API keys, or personal data, this is a privacy nightmare.

The Solution: Privacy-First Architecture 🔒

ToolHover processes everything in your browser using modern Web APIs. Zero server-side processing. Zero data collection. Zero cookies.

User Input → Browser Memory → Processing → Result
                     ↑
              Never leaves here!

Tech Stack 💻

I went all-in on modern web technologies:

Next.js 15.5.2 (App Router) - Static site generation
React 19.1.0 - Component architecture
TypeScript - Type safety across the board
Tailwind CSS - Rapid UI development
Cloudflare CDN - Global distribution
Nginx - Static file serving

Why Static Site Generation?

npm run build
# Generates pre-rendered HTML/CSS/JS
# Deploy anywhere - no Node.js runtime needed
# Lightning fast: <1.2s FCP, <2.0s LCP

SSG gives us:

Performance: Core Web Vitals in the "Good" range
Security: No server-side attack surface
Cost: Serve from any CDN for pennies
Reliability: No backend to crash

Tool Categories 🛠️

1. Text Tools

Text Counter - Real-time word, character, and reading time analysis
Text Case Converter - Transform text between camelCase, snake_case, and more
Base64 Text Encoder - Encode/decode text and files
Text Hash Generator - Generate MD5, SHA-256, SHA-512 hashes

2. Developer Tools

Base64 Encoder/Decoder - Full file support
JSON Formatter - Validate, beautify, and minify JSON
Hash Generator - Cryptographic hash functions
UUID Generator - RFC4122 compliant unique IDs
JWT Decoder - Parse JSON Web Tokens
Password Generator - Cryptographically secure passwords

3. Math & Unit Tools

Percentage Calculator - Multiple calculation modes
Unit Converter - Length, weight, temperature, area, volume
Age Calculator - Precise age calculations

4. Productivity Tools

QR Code Generator - Create downloadable QR codes
Random Picker - Unbiased random selections (coming soon)

Key Implementation Details 🔨

Cryptographically Secure Password Generation

function generateSecurePassword(length: number, charset: string): string {
  const array = new Uint8Array(length);
  crypto.getRandomValues(array); // CSPRNG - not Math.random()!

  return Array.from(array)
    .map(x => charset[x % charset.length])
    .join('');
}

Why this matters: Math.random() is NOT cryptographically secure. We use the Web Crypto API for true randomness.

Hash Generation with SubtleCrypto API

async function generateHash(
  text: string,
  algorithm: 'SHA-256' | 'SHA-512'
): Promise<string> {
  const encoder = new TextEncoder();
  const data = encoder.encode(text);
  const hashBuffer = await crypto.subtle.digest(algorithm, data);

  return Array.from(new Uint8Array(hashBuffer))
    .map(b => b.toString(16).padStart(2, '0'))
    .join('');
}

Native browser crypto APIs are fast and secure.

Real-Time Text Analysis

interface TextStats {
  characters: number;
  charactersNoSpaces: number;
  words: number;
  sentences: number;
  paragraphs: number;
  readingTime: number; // minutes at 200 WPM
}

function analyzeText(text: string): TextStats {
  return {
    characters: text.length,
    charactersNoSpaces: text.replace(/\s/g, '').length,
    words: text.trim() ? text.trim().split(/\s+/).length : 0,
    sentences: text.split(/[.!?]+/).filter(s => s.trim()).length,
    paragraphs: text.split(/\n\n+/).filter(p => p.trim()).length,
    readingTime: Math.ceil(text.trim().split(/\s+/).length / 200)
  };
}

Time complexity: O(n) - efficient even for long documents.

Performance Optimization 🚄

Code Splitting

Each tool is lazy-loaded:

const TextCounter = dynamic(() => import('./text-counter/page'));
const Base64Tool = dynamic(() => import('./base64-encoder/page'));

Results:

Initial bundle: ~85 KB (gzipped)
Per-tool chunks: ~15-30 KB
60% reduction in initial load time

Bundle Analysis

Page                     Size      First Load JS
─ /                      2.5 kB    85.2 kB
─ /text-tools            3.1 kB    88.8 kB
─ /developer-tools       2.9 kB    87.6 kB
─ /tools/text-counter    4.2 kB    89.9 kB

Average: ~88 KB per route

Lighthouse Score

Performance:     96/100 ✅
Accessibility:   100/100 ✅
Best Practices:  100/100 ✅
SEO:             100/100 ✅

Security Best Practices 🛡️

Security Headers (Nginx)

add_header X-Frame-Options "DENY" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
add_header Permissions-Policy "geolocation=(), microphone=(), camera=()" always;

SSL/TLS Configuration

Let's Encrypt SSL (auto-renewal)
Cloudflare Full (Strict) SSL
TLS 1.2+ only
Modern cipher suites
HSTS enabled

Content Security Policy

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'unsafe-inline';
  style-src 'self' 'unsafe-inline';

Product Hunt Success 🎯

Achievement: Ranked #107 out of 400+ products on Product Hunt

Key Takeaways:

Privacy sells: Users care about data security
Developer tools market: Strong demand for comprehensive toolkits
Performance matters: Fast tools get shared
SEO is essential: Organic traffic drives growth

Lessons Learned 💡

What Worked

Client-side processing: Users love privacy
Static site generation: Amazing performance + low cost
TypeScript: Caught bugs early
Tailwind CSS: Rapid prototyping
Code splitting: Essential for bundle size

What I'd Do Differently

Progressive Web App: Add offline support earlier
Analytics: Need privacy-preserving metrics
Testing: More automated tests
Documentation: API docs from day one
Mobile app: React Native version

Future Roadmap 🗺️

Short-term (Q4 2025)

[ ] Advanced JSON tools (JSON Path, Schema validation)
[ ] Image processing (compression, format conversion)
[ ] More crypto tools (RSA keys, digital signatures)
[ ] Public API for developers

Medium-term (Q1-Q2 2026)

[ ] Progressive Web App (offline mode)
[ ] Browser extension (Chrome, Firefox)
[ ] Collaborative features (shareable sessions)
[ ] VS Code extension

Long-term (2026+)

[ ] Mobile apps (iOS, Android)
[ ] Developer API with rate limiting
[ ] Premium features (bulk operations)
[ ] Open source the codebase

Open Source Plans 📖

Planning to open source the entire project under MIT license. The goal is to create a reference implementation for:

Privacy-first web applications
Next.js 15 static sites with optimal performance
Client-side cryptography best practices
SEO for tool-based websites

GitHub: Coming soon (cleaning up code first!)

Try It Out! 🎮

Live site: toolhover.com

Popular tools:

Conclusion 🎬

Building ToolHover taught me that:

Privacy is a feature: Users actively seek privacy-respecting tools
Performance is marketing: Fast tools get bookmarked and shared
Static sites are underrated: Modern SSG can handle complex applications
Community validation matters: Product Hunt feedback shaped the roadmap

The modern web platform is incredibly powerful. With the Web Crypto API, SubtleCrypto, and other native APIs, we can build sophisticated tools entirely client-side.

No servers. No tracking. No compromises.

If you're building web tools, consider the privacy-first approach. Your users will thank you.

Discussion 💬

Questions for the community:

What tools would you like to see added?
Should I open source it now or wait until more polished?
Any security concerns with the current architecture?
Interested in contributing once it's open sourced?

Drop your thoughts in the comments! 👇

Connect 🤝

Website: toolhover.com
Email: support@toolhover.com
Product Hunt: ToolHover
ORCID: 0009-0003-7903-5678

This post is part of a series documenting the development of ToolHover. Follow for updates on new tools, performance optimizations, and eventually open-sourcing the codebase!

Performance metrics and rankings accurate as of October 2025.

Why I built Toolhover: free online tools that make everyday tasks easier

QuantumRegex — Wed, 24 Sep 2025 20:14:24 +0000

We often waste time on tiny, repetitive tasks: converting text case, counting words, formatting JSON, or creating a quick QR code.

Instead of installing random apps or dealing with bloated websites full of ads, I wanted something fast, clean, and privacy-first.

That’s why I built Toolhover — a growing collection of free browser-based tools. Everything runs client-side, so your data never leaves your device.

A few examples you can try

🔹 Text Counter

Counts characters (with/without spaces), words, lines, paragraphs, sentences, and even reading time.

👉 Try Text Counter

🔹 JSON Formatter & Validator

Pretty-print, validate, or minify JSON instantly. Great for debugging APIs.

👉 Try JSON Formatter

🔹 Other tools

Hash Generator → MD5, SHA-1, SHA-256, SHA-512
Base64 Encoder/Decoder → Encode/decode instantly
QR Code Generator → Create QR codes for text, URLs, or contacts
Password Generator → Secure random passwords

(And more are on the way!)

Final thoughts

I didn’t want to reinvent the wheel — just to make the wheel smoother 🙂

If you’re tired of cluttered sites and just want simple, no-login tools that work, give it a try:

👉 Toolhover.com

I’d love feedback: What small tool would save **you* the most time if it existed?*

DEV Community: QuantumRegex