How to Add a New Category to the Tool Directory in FckSignups

To add a new category to the tool directory, define a new object in the categories array within src/constants/fallbackData.ts following the Category interface, ensuring you use a unique id that matches the tool.category field used in filtering logic.

The FckSignups repository manages its tool directory through a centralized data architecture. All category definitions live in a single TypeScript constant that propagates through the component tree via a custom React hook, enabling you to extend the taxonomy without touching UI components.

Understanding the Category Architecture

The category system relies on a master data file and a consumption layer. The FALLBACK_DATA constant in src/constants/fallbackData.ts serves as the source of truth, containing an array of Category objects that conform to the interface defined in src/types/index.ts.

The useTools hook in src/hooks/useTools.ts loads this data and exposes it to the interface. When users interact with the filter bar rendered by src/components/Home/ToolFilters/ToolFilters.tsx, the application matches the active category ID against each tool's category property to determine visibility.

Step-by-Step Guide to Adding a New Category

1. Define the Category in fallbackData.ts

Open src/constants/fallbackData.ts and locate the categories array inside the FALLBACK_DATA constant. Insert a new object that satisfies the Category interface:

// src/constants/fallbackData.ts
export const FALLBACK_DATA: ToolsData = {
  categories: [
    // ... existing categories
    {
      id: "ai-automation",
      name: "AI Automation",
      icon: "🤖",
      description: "Tools leveraging artificial intelligence for workflow automation"
    }
  ],
  tools: [
    // ... existing tools
  ]
};

The interface requires four fields: id (string), name (string), icon (string), and description (string).

2. Ensure Unique ID Consistency

Choose a unique, lowercase id using hyphenated formatting. This string must match the value assigned to tools in your dataset. In src/hooks/useTools.ts, the filtering logic performs strict equality checks (tool.category === activeCategory) around lines 97-98. Any mismatch between the category ID and tool assignments will exclude tools from the filtered view.

3. Configure the Icon

The icon field accepts Unicode characters or inline SVG markup. For standard emoji, insert the character directly. For custom SVG icons, first add the symbol to the sprite file at public/icons-sprite.svg:

<!-- public/icons-sprite.svg -->
<svg style="display:none;">
  <symbol id="ai-automation-icon" viewBox="0 0 24 24">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
  </symbol>
</svg>

Then reference the symbol in your category definition:

icon: "<svg class=\"icon\"><use href=\"#ai-automation-icon\"/></svg>"

4. Assign Tools to the New Category

Update your tool data to use the new category ID. If you maintain a separate tools.json for production environments, ensure the category field matches your new ID exactly. During local development, adding entries to FALLBACK_DATA.tools with the matching category ID will immediately display them in the filter and card views.

Verifying Your Changes

After saving fallbackData.ts, run the development server. The ToolFilters component automatically renders the new category in the filter bar, and any tools assigned to that category display the corresponding badge. No additional imports or component modifications are required because the useTools hook dynamically calculates available categories from the data source.

Summary

• Centralized definition: Categories are defined in src/constants/fallbackData.ts within the FALLBACK_DATA.categories array.
• Type safety: All categories must conform to the Category interface exported from src/types/index.ts.
• ID matching: The id field must exactly match the category value on tools for filtering to function in src/hooks/useTools.ts.
• Icon flexibility: Support exists for Unicode characters or SVG symbols referenced from public/icons-sprite.svg.
• Automatic propagation: The useTools hook feeds categories to ToolFilters and tool cards without manual UI updates.

Frequently Asked Questions

Where is the category data stored in FckSignups?

The master category list lives in src/constants/fallbackData.ts as part of the exported FALLBACK_DATA constant. This file serves as the TypeScript source of truth and provides fallback data when the application runs in development mode or when remote data fails to load.

What format should I use for category icons?

You can use any Unicode emoji string for simple icons, or provide inline SVG markup that references the sprite in public/icons-sprite.svg. The ToolFilters component renders the icon field directly inside filter buttons, so valid HTML/SVG strings display correctly alongside standard characters.

Do I need to modify React components to show the new category?

No. The useTools hook in src/hooks/useTools.ts dynamically extracts categories from FALLBACK_DATA and supplies them to the UI. As long as you add the category to fallbackData.ts and assign the correct category ID to your tools, the filter bar and tool cards update automatically.

How does the filtering logic match tools to categories?

The filtering mechanism in src/hooks/useTools.ts compares the tool.category string against the active filter selection using strict equality. Around lines 97-98, the code executes tool.category === activeCategory, so your category IDs must exactly match the values stored in your tool data records.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}