We recently added a dedicated Developer Tools section to Learn Code Camp and shipped multiple utility tools in one go.

The goal was simple:

Client-side only. Your data stays in your browser on this page.

That requirement shaped every implementation choice.

What We Added

We added a new /tools section with these live tools:

  1. JSON Formatter + Validator
  2. Base64 Encode/Decode
  3. URL Encode/Decode
  4. UUID Generator (v4)
  5. Unix Timestamp Converter
  6. JWT Decoder
  7. Regex Tester
  8. Text Diff Checker
  9. Hash Generator (SHA-256, MD5)

Why Client-Side Only?

For utility tools, people often paste sensitive payloads: tokens, configs, logs, API responses, and JSON with private fields.

A server round-trip is unnecessary for most transformations, so we kept all logic in browser JavaScript.

Benefits:

  • Better privacy posture (no backend data processing)
  • Faster interaction (no API latency)
  • Lower ops complexity (no tool backend to deploy/monitor)
  • Fits static hosting perfectly on Cloudflare Pages

Project Structure Changes (Hugo)

We introduced a dedicated Hugo section instead of mixing tools with blog posts.

1) New content section

  • content/tools/_index.md for landing page copy
  • One markdown file per tool under content/tools/

2) New layouts for tools

  • layouts/tools/list.html for /tools
  • layouts/tools/single.html for each tool page

This gave us full control over tool UI without affecting normal article templates.

3) Shared client-side runtime

All tool behavior lives in:

  • static/js/tools.js

Each page declares a tool_id, and the script initializes the correct module by reading data-tool.

4) Shared tool styling

Custom styling is handled in:

  • assets/css/extended/tools.css

We later widened the layout for all tools to better use desktop screen space and support large payload workflows.

5) Navigation + content isolation

In hugo.toml:

  • Added a top nav item for /tools
  • Set mainSections = ["posts"] so homepage article listing stays post-focused

JSON Formatter: Special UX Improvements

The JSON tool needed extra work because big payloads are hard to manage in small editors.

We upgraded it to a wide workspace and added:

  • Upload JSON file
  • Validate JSON
  • Beautify with indentation options (2 spaces, 4 spaces, tab)
  • Minify/compact
  • Convert JSON to CSV/XML/YAML
  • Download output
  • Copy output
  • Better parse error feedback (line/column context)

Unix Timestamp Converter: Live Current Epoch

We added a live banner that shows the current epoch value and updates every second, plus quick copy.

This makes the converter useful even before typing anything.

Cloudflare Pages Fit

Because this is a Hugo static site on Cloudflare Pages, the tools deploy as static assets with no backend runtime.

That keeps deploys simple and costs predictable while still giving rich interactive behavior.

Implementation Notes

A few practical lessons from this build:

  • Build tools as a separate Hugo section early; template control matters.
  • Keep one shared JS runtime and initialize by tool_id to avoid code duplication.
  • Design for large inputs from day one (especially JSON and diff tools).
  • Make privacy messaging explicit on each tool page.

Closing

This tools rollout was guided by one non-negotiable principle:

Client-side only. Your data stays in your browser on this page.

That gave us a clean architecture, fast UX, and a safer default for users.