54 lines
1.7 KiB
Markdown
54 lines
1.7 KiB
Markdown
# 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>.
|