Mofei Dev Tools

Mofei Dev Tools is a free browser-based toolkit for everyday development, API/JSON debugging, GIS and mapping work, MongoDB ObjectID inspection, Base64 conversion, and cross-time-zone planning. Most tools run locally in the browser, require no registration, and are designed for quick developer workflows.

中文文档 | English

Live Site

Production: https://tools.mofei.life

Who It Is For

• Frontend and backend developers debugging API payloads, encodings, IDs, and data formats.
• GIS and map developers preparing coordinates, bounding boxes, and GeoJSON previews.
• Distributed teams comparing city times, work-hour overlap, and shareable meeting setups.

Tools

Development Tools

• Text Base64 Converter (/base64): encode plain text to Base64 or decode Base64 back to readable UTF-8 text.
• Image to Base64 Converter (/base64-image): convert PNG, JPG, WebP, SVG, GIF, and AVIF images to Base64 Data URLs with instant preview.
• JSON Formatter & Viewer (/json-format): format, minify, validate, and inspect JSON with a collapsible tree viewer.
• JSON Path Extractor (/json-extract): extract values from JSON with JSONPath-style expressions, compare JSON objects, and export results.
• MongoDB ObjectID Generator (/objectid): generate ObjectIDs, inspect timestamps, and create IDs with custom timestamps.

Productivity Tools

• World Time Compare (/time): compare city times, date differences, work-hour overlap, and share cross-time-zone meeting setups.

GIS And Mapping Tools

• BBox Drawing Tool (/bbox): draw, preview, parse, share, and copy bounding boxes on an interactive map.
• GeoJSON Preview (/geojson): generate geojson.io preview links for GeoJSON data, including GitHub device-flow support for larger Gist-backed previews.
• GIS Coordinate Converter (/coordinate-converter): convert WGS84, GCJ-02, BD-09, UTM, and Web Mercator coordinates.

Tech Stack

• Framework: Next.js 15 App Router
• Runtime/UI: React 19, TypeScript, @mofei-dev/ui
• Styling: Tailwind CSS 4
• Maps/GIS: Mapbox GL, Proj4
• Animation: Motion
• Deployment: Cloudflare via @opennextjs/cloudflare
• Package manager: pnpm

Routing And SEO

English canonical routes are unprefixed:

/
/base64
/base64-image
/bbox
/geojson
/json-format
/json-extract
/coordinate-converter
/objectid
/time
/privacy

Chinese canonical routes use /zh:

/zh
/zh/base64
/zh/base64-image
/zh/bbox
/zh/geojson
/zh/json-format
/zh/json-extract
/zh/coordinate-converter
/zh/objectid
/zh/time
/zh/privacy

BBox also has additional localized routes:

/de/bbox
/es/bbox
/fr/bbox

/timezone is a legacy redirect to /time; localized /zh/timezone also redirects to the matching time tool route.

Shared URL, canonical, and alternate-link helpers live in src/lib/site.ts; TOOL_SLUGS is the source of truth for the public tool inventory. BBox-specific multilingual routing and hreflang configuration live in src/lib/bbox-i18n.ts. Sitemap and robots are generated by src/app/sitemap.ts and src/app/robots.ts; do not add static public/sitemap.xml or public/robots.txt.

Project Structure

src/
├── app/
│   ├── [lang]/                    # Localized routes
│   ├── api/                       # GitHub device/token proxy routes
│   ├── base64/                    # English canonical tool route
│   ├── base64-image/
│   ├── bbox/
│   ├── coordinate-converter/
│   ├── geojson/
│   ├── json-format/
│   ├── json-extract/
│   ├── objectid/
│   ├── privacy/
│   ├── time/
│   ├── timezone/                  # Legacy redirect to /time
│   ├── layout.tsx                 # Root metadata, html lang, nav, analytics
│   ├── robots.ts                  # Generated robots.txt
│   └── sitemap.ts                 # Generated sitemap.xml
├── components/
│   ├── Common/                    # Shared nav, footer, controls
│   ├── HomePageContent.tsx
│   ├── PrivacyPageContent.tsx
│   └── StructuredData.tsx
├── contexts/
│   └── LanguageContext.tsx
└── lib/
    ├── *-tool.ts                  # Tool-specific browser logic and parsers
    ├── bbox-i18n.ts               # BBox language text, SEO, URLs
    ├── metadata.ts                # Shared tool metadata builder
    ├── site.ts                    # Site URL, route helpers, tool slugs
    ├── tool-content.ts            # Homepage/tool-card copy
    └── tool-seo.ts                # Tool SEO copy

Getting Started

Prerequisites

• Node.js 20+ is recommended.
• pnpm 10.10.0, as declared in package.json.
• The default pnpm dev script starts Next.js with a custom local HTTPS hostname. You can either map that hostname to your machine or change the -H value in package.json to use your own local hostname.

For example, after choosing a local hostname, add it to /etc/hosts:

127.0.0.1 your-local-hostname.test

Check the dev script in package.json for the current hostname and replace it if that does not fit your setup.

Install

pnpm install

Environment

Copy the local env template when setting up a local checkout:

cp .env.local.example .env.local

For regular local development, the main variable to check is the Mapbox public token used by the BBox map:

NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=pk.your-mapbox-public-token

NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN is required by the BBox tool's interactive Mapbox map. If it is missing, the BBox page still renders the tool panel, but the map area shows this configuration message instead of the interactive map:

Map is not configured
Set NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN in .env.local for local development, or in Cloudflare Build variables for deploys. See README > Environment.

Other optional analytics, GitHub preview, and site-verification variables are documented in .env.local.example and .env.example.

NEXT_PUBLIC_* values are inlined by Next.js at build time. For local CLI deploys, keep required public values in .env.local before running pnpm run deploy.

For Cloudflare Workers Git Builds, add required public frontend variables in Cloudflare Dashboard:

1. Open Workers & Pages.
2. Select the mofei-dev-tools Worker.
3. Open Settings > Build.
4. Add these under Build variables and secrets:

NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=pk.your-mapbox-public-token

Do not rely on runtime Variables and Secrets alone for NEXT_PUBLIC_* values. Runtime variables are available to the deployed Worker, but they are too late for next build. After changing a build variable, trigger a fresh deploy so the client bundle is rebuilt with the updated value.

Develop

pnpm dev

The dev script runs Next.js with a custom HTTPS host. The exact hostname is defined in package.json; conceptually it is:

next dev -H your-local-hostname.test --turbopack --experimental-https

Open the HTTPS local URL printed by Next.js.

Verification

pnpm test
pnpm run build
pnpm run cf:build

• pnpm test runs the Node test suite for tool logic, route contracts, metadata/SEO wiring, sitemap and robots generation, localized route behavior, BBox multilingual routing, JSON parsing/formatting, Base64 image parsing, coordinate conversion, ObjectID generation, GeoJSON preview URL generation, and time-zone calculations.
• pnpm run build runs the standard Next.js build.
• pnpm run cf:build creates the Cloudflare/OpenNext Worker artifact.

Deployment

Cloudflare/OpenNext commands:

pnpm run cf:build
pnpm run preview
pnpm run deploy
pnpm run cf-typegen

pnpm run build is useful for a regular Next.js production build, but it is not the Cloudflare Worker artifact. pnpm run cf:build runs OpenNext and produces .open-next/worker.js plus .open-next/assets; wrangler.jsonc also uses pnpm run cf:build as its build command.

Relevant deployment files:

• open-next.config.ts
• wrangler.jsonc
• next.config.ts
• cloudflare-env.d.ts

@mofei-dev/ui is consumed as an npm dependency and is transpiled by next.config.ts; it is not an in-repo package in this repository.

Adding Or Updating Tools

1. Add the route and shared PageComponent under src/app/<slug>/.
2. Add localized thin wrappers under src/app/[lang]/<slug>/, including localized layouts where metadata is needed. Localized pages should set dynamicParams = false.
3. Update TOOL_SLUGS and route helpers in src/lib/site.ts when adding a public tool.
4. Add homepage/tool-card copy in src/lib/tool-content.ts.
5. Add SEO copy in src/lib/tool-seo.ts; use src/lib/metadata.ts for route metadata.
6. Add or update structured data in src/components/StructuredData.tsx when the tool needs custom JSON-LD.
7. Update generated sitemap and robots behavior in src/app/sitemap.ts and src/app/robots.ts.
8. Add or update tests under tests/ for route presence, metadata, structured data, and core tool behavior.
9. Keep this README's tool list, route list, and project structure in sync with the code.

For BBox-specific language work, update src/lib/bbox-i18n.ts first because BBox supports en, zh, de, es, and fr.

Analytics And Privacy

Google Analytics is loaded from src/components/GoogleAnalytics.tsx when NEXT_PUBLIC_GA_ID is configured. Because this is a NEXT_PUBLIC_* variable, it must be available at build time, including in the Cloudflare build environment. The same component exposes a shared event helper used by tool-level “Tool Usage” events.

Tool processing is primarily client-side. API routes under /api/ are used for GitHub device/token proxying and are disallowed in robots.

See the privacy page at /privacy or /zh/privacy.

Contributing

Contributions are welcome. Please keep routing, metadata, sitemap, robots, and shared tool content in sync when changing public pages.

• Tool ideas and general feedback: GitHub Discussion #7
• Bugs and broken behavior: GitHub Issues

See CONTRIBUTING.md for the broader contribution workflow.

Algorithm Declaration

The GIS Coordinate Converter uses public, widely used GIS conversion formulas for WGS84, GCJ-02, BD-09, UTM, and Web Mercator transformations. These are intended for developer tooling, debugging, and data-preparation workflows.

License

This project is open source and available under the MIT License.

Author

Mofei

• Website: mofei.life
• GitHub: @zmofei