Overview

DevTools is a comprehensive collection of browser-based utilities built to support everyday developer workflows — from formatting and encoding to cryptography, generators, and CSS debugging. Rather than juggling dozens of separate websites or desktop tools, this platform brings them all together into one fast, unified interface accessible from a single tab. The application was designed with developer experience and privacy as core priorities. Every tool runs entirely client-side, meaning sensitive inputs such as JSON payloads, JWT tokens, passwords, encryption keys, and hashes are processed locally in the browser and never transmitted to a server.

Key Features

• Code Formatting & Validation: Format, minify, and validate JSON, JavaScript, TypeScript, HTML, CSS/SCSS/SASS, and SQL (with selectable dialects including MySQL, PostgreSQL, T-SQL, SQLite, and PL/SQL) using Prettier and sql-formatter.
• Encoding & Token Utilities: Encode/decode Base64 with a one-click swap, encode/decode URL strings and HTML entities, decode JWT tokens into readable headers and payloads with automatic timestamp conversion and expiration badges, and generate SHA-1/256/384/512 hashes via the Web Crypto API.
• Text Processing Tools: Compare two texts line-by-line with an LCS-based Diff Checker showing additions and deletions, test regex patterns live with flag toggles and capture group breakdowns, convert text across 8 naming conventions simultaneously, and edit Markdown in a split-view live preview editor.
• Generators: Bulk-generate UUIDs (v1, v4, v7) up to 100 at a time, create customizable Lorem Ipsum placeholder text, generate strong passwords with adjustable length and charset options plus a strength indicator, and produce downloadable QR codes and barcodes (CODE128, EAN-13, EAN-8, UPC, CODE39, ITF-14, MSI, Pharmacode).
• Cryptography Suite: Encrypt and decrypt text using AES-256, DES/3DES, and RC4 ciphers; generate RSA key pairs (1024–4096-bit) for OAEP encryption/decryption; generate ECDSA key pairs for signing and signature verification; and produce HMAC API signatures with configurable hash algorithms and key/output encodings.
• Frontend Utilities: Convert colors between HEX, RGB, and HSL with a native color picker and live preview, and convert PX to REM (and back) with a customizable base font size and quick-reference table.
• Persistent Per-Tool State: A custom useToolState hook backed by Zustand keeps each tool's input/output intact when navigating between pages, so work is never lost mid-session.

Technologies Used

• Next.js (App Router): Provides the routing structure and overall application architecture.
• TypeScript: Ensures type safety and a more maintainable codebase across all tools.
• Tailwind CSS v4: Handles utility-first styling and responsive design.
• shacdn/ui: Supplies accessible, composable UI primitives with a consistent visual language.
• Lucide React: Provides the icon set used throughout the interface.
• Zustand: Manages in-memory, per-tool state for a smooth multi-tool experience.
• Prettier (standalone build): Runs entirely in the browser to power JS/TS/HTML/CSS formatting.
• sql-formatter: Handles SQL formatting across multiple dialects.
• crypto-js + Web Crypto API: Powers AES/DES/RC4 ciphers (crypto-js) and RSA/ECDSA/HMAC operations (native Web Crypto).
• marked + @tailwindcss/typography: Renders live Markdown previews with polished typographic styling.
• qrcode & JsBarcode: Generate downloadable QR codes and barcodes.
• next-themes: Enables dark/light mode switching.

Challenges and Learnings

Integrating such a broad range of tools — from formatters and encoders to full cryptographic primitives — into a single cohesive application required careful architectural planning. Each category had different state, validation, and output requirements, which made a unified, reusable pattern (such as the useToolState hook) essential for keeping the codebase maintainable as the number of tools grew well beyond a dozen. Implementing the cryptography tools in particular required balancing usability with correctness: generating and formatting RSA/ECDSA key pairs in PEM format, handling multiple key/output encodings for HMAC, and supporting legacy ciphers like DES alongside modern AES-256 all needed to work reliably entirely on the client side without exposing any sensitive data externally. Designing the navigation system — where adding a single entry to config/nav.ts automatically updates the sidebar, header, and home page — also reinforced the value of a single source of truth for scaling the project smoothly as new tools were added.

Outcome

DevTools brings together over 25 developer utilities spanning formatting, encoding, text processing, generation, cryptography, and frontend debugging into one cohesive, privacy-respecting platform. By keeping all computation client-side and designing a consistent, extensible architecture, the project delivers a fast and reliable alternative to scattered single-purpose tools, making everyday development tasks — from decoding a JWT to generating an RSA key pair — significantly more efficient.

This project demonstrates expertise in building high-performance frontend applications, designing developer-focused user experiences, and implementing browser-native solutions that balance functionality, security, and maintainability.