# How to Add a New Category to the Tool Directory in FckSignups
> Learn how to add a new category to the FckSignups tool directory by defining a new object in fallbackData.ts. Follow the Category interface for seamless integration.
- Repository: [Abdullah/FckSignups](https://github.com/BraveOPotato/FckSignups)
- Tags: how-to-guide
- Published: 2026-09-08
---
**To add a new category to the tool directory, define a new object in the `categories` array within [`src/constants/fallbackData.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/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`](https://github.com/BraveOPotato/FckSignups/blob/main/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`](https://github.com/BraveOPotato/FckSignups/blob/main/src/types/index.ts).
The `useTools` hook in [`src/hooks/useTools.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/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`](https://github.com/BraveOPotato/FckSignups/blob/main/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`](https://github.com/BraveOPotato/FckSignups/blob/main/src/constants/fallbackData.ts) and locate the `categories` array inside the `FALLBACK_DATA` constant. Insert a new object that satisfies the `Category` interface:
```typescript
// 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`](https://github.com/BraveOPotato/FckSignups/blob/main/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`:
```xml
```
Then reference the symbol in your category definition:
```typescript
icon: ""
```
### 4. Assign Tools to the New Category
Update your tool data to use the new category ID. If you maintain a separate [`tools.json`](https://github.com/BraveOPotato/FckSignups/blob/main/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`](https://github.com/BraveOPotato/FckSignups/blob/main/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`](https://github.com/BraveOPotato/FckSignups/blob/main/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`](https://github.com/BraveOPotato/FckSignups/blob/main/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`](https://github.com/BraveOPotato/FckSignups/blob/main/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`](https://github.com/BraveOPotato/FckSignups/blob/main/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`](https://github.com/BraveOPotato/FckSignups/blob/main/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`](https://github.com/BraveOPotato/FckSignups/blob/main/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`](https://github.com/BraveOPotato/FckSignups/blob/main/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.