Make the catalog declarative
The navigation registry is the single source for tool discovery, reducing drift between routes, menus, and command search.
DevTools
tool
A searchable toolbox of more than 50 developer workflows, with a deliberate boundary between local transformations and server-backed features.
- Role
- Product design and full-stack engineering
- Scope
- Developer utilities, shared interaction patterns, and account-backed tools
- Status
- Actively deployed
Problem
Small development tasks often send people across unrelated single-purpose websites. Each tool has a different interface, unclear privacy behavior, and no shared path for search, history, saved work, or reuse.
Constraints
- C1
Many transformations should stay in the browser, while network diagnostics necessarily contact a target or server endpoint.
- C2
A catalog with more than 50 workflows must remain quick to search, navigate, and extend without duplicating page infrastructure.
- C3
Saved items, shares, webhooks, and short links introduce authentication, expiration, and persistence concerns absent from local tools.
Architecture
A navigation registry acts as the catalog source of truth. Tool features own their tabs and logic, shared app infrastructure handles auth and storage, and route handlers isolate network and persistence work.
01
Tool registry
Searchable navigation, routes, labels, and keyboard discovery
02
Feature modules
Focused formatters, generators, testers, inspectors, and references
03
Browser boundary
Local transforms, preferences, input history, and reusable state
04
Server boundary
Next.js APIs, Better Auth, PostgreSQL, Prisma, and target services
Decisions
Keep local work local by default
Formatters, encoders, parsers, and generators process current input in the browser; server contact is reserved for workflows that require it.
Standardize the tool shell
Shared layouts, tabs, editors, history, and actions let new utilities focus on their domain logic while keeping interactions familiar.
Contribution
- Designed and implemented the searchable toolbox and its shared tool interaction patterns.
- Built local formatters and generators alongside network diagnostics and reference utilities.
- Added account sync, expiring shares, short links, webhook inspection, and database-backed saved items.
- Established TypeScript, lint, production-build, and GitHub Actions checks for changes targeting main.
Outcomes
- More than 50 workflows are available through one catalog and command-search model.
- Common transformations can run without an account and without sending their current input to the server.
- Server-backed features add reuse and sharing without obscuring when data leaves the browser.
- The architecture supports both small local utilities and stateful workflows without forcing them through one execution path.
Product screenshot
Verified stack
- Next.js
- React
- TypeScript
- CodeMirror 6
- TanStack Query
- PostgreSQL
- Prisma
- Better Auth
- Tailwind CSS
- shadcn/ui
- Radix UI
- Zod
- Vitest
- GitHub Actions
- CI/CD
- System Design
Working through something similar?
Share your challenge, scope, and timeline to start a focused conversation.