Skip to content

Seeratzahra500/DevTools_Experiment

BranchesTags

Repository files navigation

DevTools Hub

A collection of free, fast, browser-based developer utilities — no signup, no tracking, no ads. Each tool runs entirely in your browser where possible, with three AI-powered tools for tasks that benefit from language model assistance.

Built as a programmatic SEO play: 18 tools across 18 dedicated URLs, each with structured data, server-rendered metadata, and on-page content targeting high-intent developer search queries.

Live Tools

Data & Encoding

Tool URL Description
JSON Formatter /tools/json-formatter Format, minify, and validate JSON with line-level error reporting
Base64 Encoder/Decoder /tools/base64 Encode and decode Base64 with full UTF-8 support
URL Encoder/Decoder /tools/url-encoder Encode and decode URL components using encodeURIComponent
YAML / JSON / TOML Converter /tools/yaml-json-converter Convert between YAML, JSON, and TOML with structural error explanation

Crypto & Identity

Tool URL Description
JWT Decoder /tools/jwt-decoder Decode JWT headers, payloads, and signatures with expiration status
UUID Generator /tools/uuid-generator Generate v1, v4, and v7 UUIDs in bulk
Hash Generator /tools/hash-generator Compute MD5, SHA-1, SHA-256, and SHA-512 hashes

Time & Dates

Tool URL Description
Timestamp Converter /tools/timestamp-converter Convert Unix timestamps to human-readable dates across timezones, with live clock

Text & Code

Tool URL Description
Regex Tester /tools/regex-tester Test regex patterns with match highlighting, capture groups, and ReDoS protection
Diff Checker /tools/diff-checker Compare text side-by-side at character, word, or line level
SQL Formatter /tools/sql-formatter Format SQL across six dialects: Standard, MySQL, PostgreSQL, SQLite, T-SQL, BigQuery

CSS & Design

Tool URL Description
Color Picker & Converter /tools/color-converter Convert colors between HEX, RGB, HSL, HSV, OKLCH, and CMYK
CSS Gradient Generator /tools/css-gradient-generator Build linear and radial gradients with a live preview and copyable CSS
CSS Box-Shadow Generator /tools/box-shadow-generator Generate stacked box-shadow values with sliders and live preview

Utilities

Tool URL Description
Cron Expression Builder /tools/cron-builder Build, validate, and describe cron expressions with next-run preview

AI-Powered

Tool URL Description
Regex Generator /tools/regex-generator Describe what you want to match in plain English, get a regex pattern
SQL Query Generator /tools/sql-generator Paste your schema and ask a question in plain English, get a SQL query
Code Explainer /tools/code-explainer Paste any code snippet and get a plain-English step-by-step explanation

Tech Stack

Layer Choice Reason
Framework Next.js 15 (App Router) Server-side rendering for SEO; file-based routing gives each tool its own URL automatically
Language TypeScript (strict mode) Type safety across all tool logic and API routes
Styling Tailwind CSS v4 + shadcn/ui Fast, consistent UI with accessible components
Fonts Inter + JetBrains Mono (next/font) Self-hosted, zero layout shift
AI OpenAI API (gpt-4o-mini) Cost-efficient model, sufficient quality for the three AI tools
Rate limiting Upstash Redis (@upstash/ratelimit) Per-IP sliding window limiting on all AI routes
Input validation Zod Schema validation on every server action and API route
Hosting Vercel Free tier handles static pre-rendering; CDN edge delivery
Analytics Plausible Privacy-friendly, no cookies

Architecture

Tool Registry Pattern

All 18 tools are registered in lib/tools.ts as a typed array. The dynamic route app/tools/[slug]/page.tsx reads the registry, dynamically imports the matching component, and wraps it in the shared ToolLayout. Adding a new tool means adding one entry to the registry and creating two files — the component map, sitemap, homepage grid, and SEO metadata all update automatically.

File Structure

app/
  layout.tsx                  # Root layout: fonts, theme, header, footer
  page.tsx                    # Homepage: hero + tool grid by category
  sitemap.ts                  # Dynamic sitemap (18 tool pages + index)
  robots.ts                   # Allows all crawlers
  tools/
    [slug]/page.tsx           # Dynamic per-tool page (SSG, 18 pre-rendered routes)
  api/
    ai/[tool]/route.ts        # Rate-limited AI endpoints

components/
  tool-layout.tsx             # Shared wrapper: breadcrumb, h1, how-to, FAQ, related tools
  tool-card.tsx               # Homepage grid cards
  site-header.tsx             # Sticky header with dark mode toggle
  site-footer.tsx             # Footer links

lib/
  tools.ts                    # Tool registry (single source of truth)
  env.ts                      # Zod-validated env vars
  schemas.ts                  # Zod schemas for API routes
  rate-limit.ts               # Upstash sliding window rate limiter
  ai.ts                       # OpenAI client + callModel helper
  utils.ts                    # cn() helper

lib/tools/[slug]/
  logic.ts                    # Pure functions — no React, no DOM, fully testable
  component.tsx               # 'use client' UI component

types/
  js-md5.d.ts                 # Module declaration for js-md5

Client vs Server

  • Tool pages: server components by default (SSR for SEO)
  • Tool UI: client components ('use client') with all interactivity
  • Tool logic: pure TypeScript functions in logic.ts — no React, no DOM, independently testable
  • AI routes: server-only API routes; the OpenAI key never touches client code
  • localStorage: used for client-side state persistence where applicable (no database for v1)

Security

Every tool was built against a set of hard security requirements:

Input validation

  • All user input validated with Zod schemas on server-side routes
  • Hard size limits enforced in logic functions: 100KB for text tools, 5000 chars for AI inputs
  • Inputs rejected with 400 errors — never silently truncated

XSS prevention

  • dangerouslySetInnerHTML never used anywhere in the codebase
  • All output rendered as React text nodes, <pre> elements, or element arrays built from explicit React components
  • Match highlighting in the Regex Tester is built from an array of <span> and <mark> elements — never from injected HTML strings

ReDoS protection

  • The Regex Tester runs user-provided patterns in a Web Worker with a 200ms hard timeout
  • Catastrophic backtracking patterns (e.g. ^(a+)+$) time out cleanly without freezing the browser tab

AI route security

  • OpenAI API key is server-only (lib/ai.ts), never bundled or sent to clients
  • Per-tool rate limit: 10 requests per hour per IP
  • Global AI rate limit: 30 requests per hour per IP across all AI tools
  • Rate limit implemented with Upstash Redis sliding window
  • All AI routes: max_tokens capped, 15-second server-side AbortController timeout
  • No prompts or responses are logged or persisted
  • AI model output defensively parsed (strips accidental markdown fences, try/catch on JSON.parse)

HTTP headers (configured in next.config.ts)

  • X-Frame-Options: DENY
  • X-Content-Type-Options: nosniff
  • Referrer-Policy: strict-origin-when-cross-origin
  • Permissions-Policy: camera=(), microphone=(), geolocation=()
  • Strict-Transport-Security: max-age=63072000; includeSubDomains; preload
  • Content Security Policy (strict in production, unsafe-eval relaxed in dev only)

Dependencies

  • TypeScript strict mode enabled — no any types or @ts-ignore suppressions
  • pnpm audit run before handoff; no high or critical vulnerabilities

SEO

The entire project is built around organic search discovery:

  • Per-tool metadata: unique <title>, <meta name="description">, canonical URL, OpenGraph, Twitter card — generated dynamically from the tool registry
  • Structured data: every tool page includes JSON-LD for SoftwareApplication, FAQPage, and BreadcrumbList
  • Static pre-rendering: all 18 tool pages are statically generated at build time (generateStaticParams) — fully server-rendered HTML for crawlers
  • Sitemap: auto-generated at /sitemap.xml from the tool registry
  • On-page content: every tool page includes a "How to use this tool" section (200+ words) and an FAQ with 5 real questions — both rendered in HTML, not JavaScript
  • Internal linking: each tool page links to 3-5 related tools via the ToolLayout component
  • Core Web Vitals: fonts self-hosted via next/font, Monaco editor lazy-loaded only on tools that need it, no render-blocking third-party scripts

Getting Started

Prerequisites

  • Node.js 20 LTS
  • pnpm

Installation

git clone https://github.com/Seeratzahra500/DevTools_Experiment.git
cd devtools-hub
pnpm install

Environment Variables

Copy .env.example to .env.local and fill in the values:

cp .env.example .env.local
# Required for AI tools (Phase 3)
OPENAI_API_KEY=sk-...

# Required for rate limiting on AI tools
UPSTASH_REDIS_REST_URL=https://...
UPSTASH_REDIS_REST_TOKEN=...

# Public site URL (used for sitemap + OG images)
NEXT_PUBLIC_SITE_URL=https://your-domain.com

The non-AI tools (Tools 1-15) work without any environment variables. Set NEXT_PUBLIC_SITE_URL to http://localhost:3000 for local development.

Development

pnpm dev

Open http://localhost:3000.

Production Build

pnpm build
pnpm start

The build pre-renders all 18 tool pages as static HTML. Verify 0 errors before deploying.

Deploy

The project is configured for Vercel. Connect the GitHub repository in the Vercel dashboard, add the environment variables, and deploy. No additional configuration required.

Adding a New Tool

  1. Add an entry to lib/tools.ts (slug, name, description, category, keywords, usesAI, howToUse, faq)
  2. Create lib/tools/[slug]/logic.ts with pure processing functions
  3. Create lib/tools/[slug]/component.tsx as a 'use client' component
  4. Add the slug → component mapping in app/tools/[slug]/page.tsx
  5. Run pnpm build to verify the new static route pre-renders correctly

The sitemap, homepage grid, tool index, and related-tool links all update automatically from the registry.

Notable Implementation Details

Base64 UTF-8 handling — Uses TextEncoder byte-by-byte conversion rather than plain btoa(), which breaks on non-Latin characters. Decode uses TextDecoder with fatal: true to distinguish invalid Base64 characters from invalid UTF-8 byte sequences.

JWT base64url decoding — Handles the +/- and //_ substitution and variable padding that standard atob() can't handle directly.

Hash generator async pattern — SHA-1, SHA-256, and SHA-512 computed in parallel via Promise.all using the Web Crypto API. MD5 uses js-md5 since Web Crypto doesn't support MD5.

Timestamp converter hydration — The live clock uses the mounted pattern (useState(false) + useEffect(() => setMounted(true))) to prevent server/client hydration mismatches. The setInterval is cleaned up in the useEffect return to prevent timer leaks on navigation.

Regex ReDoS protection — Pattern matching runs in a dedicated Web Worker. The main thread sets a 200ms timeout; if the worker hasn't responded, it's terminated and the user sees a clear "pattern too slow" error rather than a frozen browser tab.

AI output parsing — All three AI tools defensively parse model responses: markdown fences are stripped before JSON.parse, and both the "success" and "refusal" response shapes are explicitly handled.

Project Info

GitHub: https://github.com/Seeratzahra500/DevTools_Experiment

Built with: Next.js · TypeScript · Tailwind CSS · shadcn/ui · OpenAI API · Upstash Redis · Vercel

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages