State, Utilities, and Constants

Where shared logic lives

• app/libs/helpers.tsx — Utility functions (string manipulation, formatting, etc.)

• app/libs/constants.tsx — App-wide constants (routes, metadata)

• app/libs/developmentToolsConstant.tsx — Tool registry and configuration

• app/contexts/ — React context providers for shared state

Using helpers

Before writing logic in your component, check if a helper already exists in helpers.tsx. Common helpers:

• Text transformations (uppercase, lowercase, etc.)

• Data validation

• Formatting utilities

If you need something that could be reused, add it to helpers.tsx.

Tool configuration

Every tool needs an entry in developmentToolsConstant.tsx. This tells the app:

• The tool's slug (URL identifier)

• Display name and description

• Category (Text, Code, Data, Color, etc.)

• Which component to render

{
  slug: "json-formatter",
  name: "JSON Formatter",
  description: "Format and validate JSON",
  category: "code",
  component: JsonFormatter,
}

Using context for state

Global state like theme or layout preferences lives in app/contexts/:

• themeContext.tsx — Dark/light mode

• layoutContexts.tsx — Layout state

Use these for state that affects multiple tools. Small, single-tool state can stay in the component.