Dev Toolkit on https://mopplications.com/
A TypeScript-first Next.js 16 App Router project for showcasing developer utilities. The homepage renders a searchable, tag-filterable grid of tools sourced from a single configuration file so new tools can be added with minimal effort.
Made by Chandan Singh · GitHub
- ⚡️ Next.js 16 App Router with React Server Components
- 🎨 Tailwind CSS v4, shadcn/ui primitives, and lucide-react icons
- 🌗 Dark / light mode toggle with localStorage persistence and zero flash-of-unstyled-content
- 🔍 Fuse.js fuzzy search and tag filtering across tool titles and tags
- 🧱 Modular tool registry via
lib/tools.config.ts - 🗺️ SEO-ready with autogenerated
robots.txtand dynamicsitemap.xml - 🔒 Nonce-based Content Security Policy via Next.js middleware (
proxy.ts) - 🛡️ Privacy Policy page at
/privacy
| Tool | Description |
|---|---|
| Base64 Tool | Encode plain text or decode Base64 strings with copy-friendly output |
| Basic Calculator | Evaluate arithmetic expressions with full operator and parentheses support, % percentage operator (context-aware: 200+10%=220), GST and Discount quick-action buttons, Weight Price tab (per kg/500g/100g/2kg, rounding, reverse mode), keyboard input, and a localStorage-backed history of the last 50 calculations |
| Brainstorm | Infinite, hand-drawn whiteboard for sketching ideas — pen, shapes, text, and more; drag a selection from anywhere inside its box; two-finger pinch-to-zoom and pan on touch devices; full-bleed layout |
| Compare Tools | Side-by-side diff for JSON payloads and cURL commands |
| Editor Pad | Browser-based notepad with multiple notes, plain text, rich text (WYSIWYG), and Markdown (write/preview/split) modes, multi-note sidebar, find & replace, font size control, word wrap, file import/export, and PDF download (adaptive resolution, dark-mode safe); per-note cap of 500 k chars and 2 M char aggregate limit with inline warning banner |
| JSON Tools | Prettify, validate, and explore JSON with a collapsible tree viewer |
| JWT Generator | Craft HS256 JWTs with custom payload fields directly in the browser |
| Password Generator | Generate cryptographically random passwords with configurable length, character sets, and custom symbols |
| QR Code Generator | Encode text or URLs into QR codes with instant preview and PNG download |
| Regex Tester | Build and test regular expressions with live match highlighting, flag toggles, and named group support |
| Short URL Expander | Follow redirects and surface the final destination behind shortened links |
| Timestamp Converter | Convert Unix timestamps to human-readable dates and back; supports seconds/milliseconds and local/UTC timezones |
| URL Encoder / Decoder | Percent-encode or decode URL components instantly; safe for query params, path segments, and full URLs |
| UUID Generator | Generate RFC 4122 compliant UUIDs on demand |
Tools are displayed in alphabetical order on the homepage, except Brainstorm which renders full-bleed (no page padding). The Weight Price Calculator lives as a tab inside Basic Calculator.
pnpm install
pnpm devpnpm dev– start the development serverpnpm build– create an optimized production buildpnpm start– run the production serverpnpm lint– lint with ESLint and Next.js rulespnpm format– format all supported files with Prettierpnpm test– run regression tests (Vitest)pnpm test:watch– run tests in watch mode
| Doc | Contents |
|---|---|
| docs/ARCHITECTURE.md | Stack, directory structure, tool registry, request lifecycle, security model, Mermaid diagrams |
| docs/CONTRIBUTING.md | Local setup, code style, commit format, step-by-step guide to adding a new tool, PR checklist |
| docs/DEPLOYMENT.md | Docker multi-stage build, Jenkins pipeline, environment variables, reverse proxy setup |
| docs/AGENTS.md | Rules and memory for AI coding agents working in this repo |
| testcase.md | Per-tool regression test cases and post-change checklist |
Nonce-based Content Security Policy enforced on every request via proxy.ts (Next.js 16 middleware). Strict in production (script-src 'nonce-...' 'strict-dynamic'), relaxed for HMR in development. Full HSTS, COOP, COEP, CORP headers included.
The Short URL Expander API (/api/expand-url) blocks SSRF via protocol allowlist, private host detection (RFC-1918, loopback, link-local), and per-hop redirect validation.
Password generation uses rejection-sampling (unbiasedRandom) to eliminate modulo bias in crypto.getRandomValues.
→ Full header table and CSP details: docs/ARCHITECTURE.md — Security model
Vitest 4 + @testing-library/react, jsdom environment. 25 test files across all tools, including a dedicated Brainstorm test suite (canvas geometry, scene, history, viewport, serialization, storage, touch-gesture math) and SEO/sitemap tests.
pnpm test→ Per-tool test cases and post-change checklist: testcase.md
→ Full step-by-step guide: docs/CONTRIBUTING.md — Adding a new tool
Ships as a Docker container via a multi-stage Dockerfile (Node 26 Alpine, output: standalone). Jenkins pipeline included for ARM64 builds and remote deploy to Raspberry Pi via SSH.
→ Full instructions: docs/DEPLOYMENT.md