Developer Builds 700+ Static Site Tools with Next.js and Zod

How I built 700+ developer tools as a static site with Next.js, Zod, and Claude Code

Kranthi Kumar Muppala built a static site with 700+ developer tools using Next.js and Zod. The site, utils.live, offers a wide range of tools, including a JSON formatter and a Base64 encoder, all running entirely in the browser with zero server dependency.

Why This Matters

The technical reality of building and maintaining a large number of developer tools can be daunting, with potential failures and costs scaling rapidly. However, by using a static site approach with Next.js and Zod, Muppala was able to create a scalable and efficient solution, with the entire codebase built using Claude Code, resulting in a significant reduction in potential failure scales and costs.

Key Insights

• Next.js and Zod can be used to build a large number of developer tools as a static site, as seen in utils.live, which has 734 tools across 34 categories.
• Claude Code can be used to efficiently build and maintain a large codebase, with features such as mechanical tool generation and parallel agents for bulk operations, as used in the development of utils.live.
• A schema-first design approach, using Zod schemas to describe what a tool does before writing the logic, can result in more reliable and efficient code, as seen in the development of utils.live.

Working Examples

Example of a JSON formatter tool defined using the defineTool function

export const jsonFormatter = defineTool({
  meta: {
    id: "json/formatter",
    name: "JSON Formatter",
    description: "Format and prettify JSON with configurable indentation",
    category: "json",
    keywords: ["json", "format", "prettify", "beautify", "indent"],
  },
  inputSchema: z.object({
    input: z.string().describe("JSON string to format"),
  }),
  outputSchema: z.object({
    output: z.string().describe("Formatted JSON string"),
  }),
  optionsSchema: z.object({
    indent: z.number().int().min(0).max(8).default(2),
    sortKeys: z.boolean().default(false),
  }),
  execute: (input, options) => {
    const parsed = JSON.parse(input.input);
    return {
      output: JSON.stringify(parsed, null, options?.indent ?? 2),
    };
  },
});

Practical Applications

• Utils.live, a static site with 700+ developer tools, uses Next.js and Zod to provide a scalable and efficient solution for developers, with potential use cases including JSON formatting and Base64 encoding.
• The use of Claude Code in the development of utils.live demonstrates its potential for efficient code generation and maintenance, with potential pitfalls including the need for careful planning and design to avoid complexity and scalability issues.

References:

• https://dev.to/kranthi_kumarmuppala_f22/how-i-built-700-developer-tools-as-a-static-site-with-nextjs-zod-and-claude-code-19e0