# Tools

A collection of small, self-contained developer tools built with **React + TypeScript + Vite**.
Everything runs entirely in the browser — no backend, no data leaves your machine.

## Tools included

**Encoders**
- **Base64** — encode/decode with full UTF-8 support
- **URL Encode/Decode** — component (`encodeURIComponent`) or full-URL (`encodeURI`) modes
- **JSON Formatter** — pretty-print, minify, and validate
- **JWT Decoder** — decode header & payload (does not verify signatures)

**Dev Utilities**
- **Regex Tester** — live match highlighting, flags, and capture groups
- **Diff Viewer** — line-by-line comparison of two texts
- **Markdown Preview** — live GitHub-Flavored Markdown rendering
- **QR Code Generator** — encode text/URLs, download as PNG

## Architecture

Tools are driven by a single registry at [`src/tools/registry.ts`](src/tools/registry.ts).
Routes ([`src/main.tsx`](src/main.tsx)) and the home grid ([`src/pages/Home.tsx`](src/pages/Home.tsx))
are both generated from it, and each tool is lazy-loaded.

**To add a tool:** create a component under `src/tools/<name>/`, then append one entry to the
`tools` array in `registry.ts`. No routing or navigation changes needed.

## Local development

```bash
npm install
npm run dev        # start Vite dev server (http://localhost:5173)
```

Other scripts:

```bash
npm run build      # type-check + production build into dist/
npm run preview    # serve the production build locally
npm run typecheck  # type-check only
```

## Docker

Multi-stage build: Vite builds the static site, then nginx serves it with an SPA routing fallback.

```bash
docker build -t tools .
docker run --rm -p 8080:80 tools
```

Then open <http://localhost:8080>.