Feature and Module Structure Tour

Understanding a feature (tool) in this repo How features are built and how new ones should fit in

Every tool is a self-contained feature. Let's walk through how one actually works using the JSON Formatter tool as an example:

What files make up a single feature

JSON Formatter tool uses:
├── app/components/developmentToolsComponent/
│   └── jsonPrittifierComponent.tsx        (The actual tool component)
├── app/libs/
│   ├── developmentToolsConstant.tsx       (Tool metadata & registration)
│   ├── helpers.tsx                        (Shared formatting utilities)
│   └── constants.tsx                      (Route definitions)
└── app/components/ui/                     (Reusable UI: buttons, inputs, copy)

1. The Tool Component

Open app/components/developmentToolsComponent/jsonPrittifierComponent.tsx. This is the entire feature—one file:

"use client";
import { Editor } from "@monaco-editor/react";  // Monaco editor for code
import { useState } from "react";

export default function JsonPrettifier() {
  const [input, setInput] = useState("");
  const [output, setOutput] = useState("");
  const [error, setError] = useState("");

  const handlePrettify = () => {
    try {
      const parsed = JSON.parse(input);
      setOutput(JSON.stringify(parsed, null, 2));
      setError("");
    } catch (err) {
      setError("Invalid JSON");
    }
  };

  return (
    <div>
      <Editor value={input} onChange={setInput} />
      <button onClick={handlePrettify}>Prettify</button>
      <div>{output}</div>
    </div>
  );
}

The pattern here is: Input → Process → Output

2. Tool Registration in Constants

Every tool is registered in app/libs/developmentToolsConstant.tsx. Here's what an entry looks like:

export const DEVELOPMENTTOOLS: any = {
  [`json-formatter`]: {
    hero_section: {
      title: 'JSON Formatter',
      description: 'Format and validate JSON',
    },
    development_tools_list: [
      { tool: 'JSON Validator', url: PATHS.JSON_VALIDATOR },
      { tool: 'JSON Minifier', url: PATHS.JSON_MINIFIER },
    ],
    development_tools_about_details: {
      about_title: 'What is a JSON Formatter?',
      about_description: [
        { description: 'Formats minified JSON into readable structure...' },
      ],
    },
    development_tools_steps_guide: {
      guide_title: 'How to Use',
      steps: [
        {
          step_key: 'Step 1:',
          step_title: 'Paste Your JSON',
          step_description: 'Enter or paste your JSON in the input area',
        },
        {
          step_key: 'Step 2:',
          step_title: 'Click Format',
          step_description: 'The JSON will be formatted automatically',
        },
      ],
    },
  },
};

This configuration file does A LOT:

• Defines the URL slug (json-formatter)

• Sets page title and description (used for SEO)

• Lists related tools shown on the page

• Provides the step-by-step guide text

• Contains the "about" section content

When you add a new tool, you're essentially just adding an entry here.

3. Route Registration

The route path is defined in app/libs/constants.tsx:

export const PATHS = {
  JSON_FORMATTER: '/json-formatter',
  JSON_MINIFIER: '/json-minifier',
  JSON_VALIDATOR: '/json-validator',
  // ... 100+ more tools
};

4. How the route actually works

The file app/[slug]/page.tsx handles ALL tool routes:

export default function ToolPage({ params }: { params: { slug: string } }) {
  const toolConfig = DEVELOPMENTTOOLS[`${params.slug}`];
  const ComponentToRender = toolComponents[slug];  // Import the component

  return (
    <Layout>
      <HeroSection title={toolConfig.hero_section.title} />
      <ComponentToRender />  {/* JSON Formatter component renders here */}
      <StepsGuide steps={toolConfig.steps} />
      <RelatedTools tools={toolConfig.development_tools_list} />
    </Layout>
  );
}

One file handles 170+ tools. The slug automatically maps to the config and the component.

Real Example: Adding a New Tool

Let's say you want to add a "YAML to JSON" converter:

Step 1: Create the component

Create app/components/developmentToolsComponent/yamlToJsonConverter.tsx:

"use client";
import { useState } from "react";
import CopyButton from "../ui/CopyButton";  // Reuse this

export default function YamlToJson() {
  const [input, setInput] = useState("");
  const [output, setOutput] = useState("");

  const handleConvert = () => {
    try {
      // Use a YAML parser (or helper from app/libs/helpers.tsx)
      const converted = yamlToJson(input);
      setOutput(converted);
    } catch (err) {
      setError("Invalid YAML");
    }
  };

  return (
    <div className="tool-container">
      <textarea value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={handleConvert}>Convert to JSON</button>
      <div className="output">
        {output}
        <CopyButton text={output} />
      </div>
    </div>
  );
}

Step 2: Register in constants

Add to constants.tsx:

export const PATHS = {
  // ... existing paths
  YAML_TO_JSON: '/yaml-to-json',
};

Step 3: Register in tool config

Add to developmentToolsConstant.tsx:

[`yaml-to-json`]: {
  hero_section: {
    title: 'YAML to JSON Converter',
    description: 'Convert YAML to JSON format',
  },
  development_tools_list: [
    { tool: 'JSON to YAML', url: PATHS.JSON_TO_YAML },
  ],
  // ... add steps, about, etc.
},

That's it. The route /yaml-to-json automatically works. The component renders. The page has SEO metadata. Related tools appear below.

5. Shared UI Components

Your tool uses common UI from app/components/ui/:

• Copy button component → handles copy-to-clipboard

• Input field component → consistent styling

• Error message component → standard error display

• Loading spinner → async operations

You can build these yourself again, if not you can reuse existing ones.

Structure matters because:

Organization	Benefit
Component file = one tool	Easy to find and modify
Config = separate from code	Change metadata without touching component logic
UI components shared	Consistency, no duplication
One route handler	Easy to understand flow
Helpers in libs/	Logic reused across tools

Where to put what

What	Where	Example
New tool UI	developmentToolsComponent	yamlToJsonConverter.tsx
Tool metadata, steps, about	developmentToolsConstant.tsx	Tool config entry
Route path constant	constants.tsx	YAML_TO_JSON: '/yaml-to-json'
Shared logic (formatting, validation)	helpers.tsx	formatJson(), parseYaml()
Reusable UI (buttons, inputs, copy)	ui	CopyButton, Input
Styles for a single tool	In the component file as module or inline	SCSS module

Consistency Pattern

Look at existing similar tools and copy their structure:

• Text converter? → Look at upperCaseConverterComponent.tsx

• Code formatter? → Look at jsonPrittifierComponent.tsx (uses Monaco Editor)

• Generator? → Look at randomPasswordGenerator.tsx

• Validator? → Look at jsonValidator.tsx

Copy the closest match. Don't reinvent.

Key files you'll edit 90% of the time

1. app/libs/developmentToolsConstant.tsx — Add tool metadata

2. app/libs/constants.tsx — Add route constant

3. app/components/developmentToolsComponent/YourTool.tsx — Build the tool

4. app/libs/helpers.tsx — Add shared logic if needed

Everything else just works automatically!