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.
Top comments (0)