|
| 1 | +# Dev Toolbox |
| 2 | + |
| 3 | +A privacy-first, offline-friendly toolbox of developer utilities that runs entirely in the browser. No backend required, and no tracking by default. |
| 4 | + |
| 5 | +## Highlights |
| 6 | +- Built with Angular + TypeScript and shipped as static assets. |
| 7 | +- TailwindCSS + Angular Material with a glassmorphism UI. |
| 8 | +- CodeMirror 6 for rich editor inputs. |
| 9 | +- Web Workers for heavy JSON/Text operations. |
| 10 | +- Offline-ready PWA in production builds. |
| 11 | +- Modular, lazy-loaded routes per tool category. |
| 12 | + |
| 13 | +## Supported Tools |
| 14 | +JSON Core: |
| 15 | +- JSON Formatter / Validator |
| 16 | +- JSON Minifier |
| 17 | +- JSON Canonicalizer |
| 18 | +- JSON Diff |
| 19 | +- JSON <-> YAML |
| 20 | +- JSON Schema Validator |
| 21 | +- JSONPath Evaluator |
| 22 | +- JSON Patch (RFC 6902) |
| 23 | +- JSON Merge Patch |
| 24 | +- JSON -> Types |
| 25 | +- JSON5 / JSONC -> JSON |
| 26 | + |
| 27 | +Text Tools: |
| 28 | +- Text Diff |
| 29 | +- Regex Tester |
| 30 | +- Text Editor + Counter |
| 31 | +- Whitespace Normalizer |
| 32 | +- Markdown Preview |
| 33 | +- Unicode Inspector |
| 34 | + |
| 35 | +Crypto & Encoding: |
| 36 | +- Base64 Encode/Decode |
| 37 | +- URL Encode/Decode |
| 38 | +- JWT Decoder |
| 39 | +- Hash Generator |
| 40 | +- UUID Generator |
| 41 | +- UUIDv7 / ULID |
| 42 | +- HMAC Generator |
| 43 | +- Password Generator |
| 44 | + |
| 45 | +Data Utilities: |
| 46 | +- Timestamp Converter |
| 47 | +- CSV <-> JSON |
| 48 | +- Cron Next Run |
| 49 | +- Timezone Converter |
| 50 | +- CSV Profiler |
| 51 | +- OpenAPI Snippet Viewer |
| 52 | + |
| 53 | +SQL Tools: |
| 54 | +- SQL Formatter / Minifier |
| 55 | +- SQL IN Clause Builder |
| 56 | +- SQL Identifier Escaper |
| 57 | +- Execution Plan Analyzer |
| 58 | + |
| 59 | +## Quick Start |
| 60 | +```bash |
| 61 | +npm install |
| 62 | +npm start |
| 63 | +``` |
| 64 | + |
| 65 | +Then open `http://localhost:4200/`. |
| 66 | + |
| 67 | +## Scripts |
| 68 | +- `npm start`: Run the dev server (development configuration). |
| 69 | +- `npm run build`: Production build. |
| 70 | +- `npm run watch`: Build in watch mode for development. |
| 71 | +- `npm test`: Run unit tests. |
| 72 | + |
| 73 | +## Build Output |
| 74 | +Production builds emit static assets to `dist/devtools`. |
| 75 | + |
| 76 | +## Deploying (S3 + CloudFront) |
| 77 | +1. Build the app and upload the contents of `dist/devtools` to your S3 bucket. |
| 78 | +2. Enable S3 static website hosting. |
| 79 | +3. CloudFront: |
| 80 | + - Set default root object to `index.html`. |
| 81 | + - Add custom error responses for 403/404 to serve `/index.html` with HTTP 200 (SPA routing). |
| 82 | +4. Cache headers (recommended): |
| 83 | + - `index.html`: `Cache-Control: no-cache` |
| 84 | + - `/*.js`, `/*.css`, assets: `Cache-Control: public, max-age=31536000, immutable` |
| 85 | + |
| 86 | +## Ads / Monetization |
| 87 | +Ad placeholder lives here: |
| 88 | +- `src/app/shared/components/ad-slot/ad-slot.component.html` |
| 89 | + |
| 90 | +Paste your Carbon Ads / EthicalAds / AdSense snippet in the commented section within that file. |
| 91 | + |
| 92 | +## Privacy & Security Notes |
| 93 | +- All processing happens locally in the browser. |
| 94 | +- No user input is sent to any server. |
| 95 | +- Analytics are off by default and optional. |
| 96 | +- JWT decoder is **decode-only** and does not verify signatures. |
| 97 | +- "Remember my inputs" is off by default; enabling it stores inputs locally on this device. |
| 98 | + |
| 99 | +## Contributor Guidelines |
| 100 | +- Keep changes focused and incremental; avoid drive-by refactors. |
| 101 | +- Follow existing Angular + TypeScript patterns and keep lint/build clean. |
| 102 | +- Prefer pure, testable functions for data transforms and heavy parsing. |
| 103 | +- Use Web Workers for CPU-heavy operations to keep the UI responsive. |
| 104 | +- Keep UI components accessible (labels, contrast, keyboard focus, ARIA where needed). |
| 105 | +- Respect privacy-by-default: no new tracking, network calls, or telemetry without explicit discussion. |
| 106 | +- Update docs when you add or change tools, routes, or build behavior. |
| 107 | + |
| 108 | +Before opening a PR: |
| 109 | +- Run `npm test` and `npm run build`. |
| 110 | +- Verify the affected tool in the browser (inputs, outputs, and error states). |
0 commit comments