# Feature and Module Structure Tour
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**
```markdown
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`](https://github.com/betterbugs/dev-tools/blob/main/app/components/developmentToolsComponent/jsonPrittifierComponent.tsx). This is the entire feature—one file:
```jsx
"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 (
);
}
```
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:
```jsx
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`:
```javascript
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:
```jsx
export default function ToolPage({ params }: { params: { slug: string } }) {
const toolConfig = DEVELOPMENTTOOLS[`${params.slug}`];
const ComponentToRender = toolComponents[slug]; // Import the component
return (
{/* JSON Formatter component renders here */}
);
}
```
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`:
```jsx
"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 (