Building SmartUtils: A Privacy-First Developer Tools Suite with Next.js

Telmo Marques — Wed, 12 Nov 2025 09:31:22 +0000

Building SmartUtils: A Privacy-First Developer Tools Suite

The Problem

As developers, we constantly need quick utilities - formatting data, decoding tokens, converting between formats. But most online tools require you to paste potentially sensitive data into unknown servers.

I wanted something better.

The Solution

I built smartutils.dev - a growing collection of 10+ developer tools that process everything locally in your browser. All processing happens on your machine.

What It Does

An Ongoing Project

SmartUtils is actively growing based on developer needs. Currently featuring:

Formatters & Validators - for common data formats
Converters - between different data types and encodings
Decoders - for tokens and encoded data
Testing Tools - for pattern matching and validation
Text Utilities - for text manipulation and analysis
Data Generators - for development and testing purposes

Everything from working with APIs to generating test data for your projects.

Tech Stack

Framework: Next.js 15 (App Router)
Language: TypeScript
Styling: Tailwind CSS
Components: shadcn/ui (Radix primitives)
State: React hooks + Context API
Storage: LocalStorage for favorites

Key Decisions

1. Client-Side Processing

All data processing happens in the browser using standard Web APIs. No server endpoints for sensitive operations.

2. Next.js App Router

The new App Router provides better performance and cleaner code organization. Each tool is a separate route under /tools/* or /generators/*.

3. Centralized Configuration

All tools are defined in a single source of truth (lib/constants/tools-data.ts), making it easy to add new tools and maintain consistency.

export const TOOLS: Tool[] = [
  {
    id: 'json-formatter',
    title: 'JSON Formatter',
    description: 'Format and validate JSON data',
    href: '/tools/json-formatter',
    icon: FileJson,
    categories: ['formatter', 'validator'],
    highlighted: true,
  },
  // ... more tools
];

4. Privacy First

All sensitive data processing happens client-side
No external API calls for core functionality
LocalStorage only for user preferences
Your data stays on your machine

Challenges & Learnings

Challenge 1: Large File Processing

CSV files can be massive. I implemented streaming processing and size limits (10MB) to prevent browser crashes.

Challenge 2: Regex Performance

Real-time regex testing can lock up the UI. Solution: debounced input and error handling for catastrophic backtracking.

Challenge 3: Mobile Responsiveness

Complex tools need to work on mobile. Used collapsible sidebar and touch-friendly controls.

An Ongoing Project

SmartUtils is actively evolving. I'm regularly adding new tools based on developer feedback and needs. This is a living project that grows with the community.

Coming soon:

API endpoint tester
Cron expression builder
Color palette generator
Diff tool
More international data generators
Your suggestions!

Try It Out

Check it out at smartutils.dev

What tools would you like to see added? Let me know in the comments! 👇

webdev #nextjs #javascript #typescript #privacy #opensource

Forem: Telmo Marques

Building SmartUtils: A Privacy-First Developer Tools Suite with Next.js