# How Categories Are Defined for Tools in FckSignups: A Complete Technical Guide

> Discover how FckSignups defines tool categories statically in tools.json and dynamically with the useTools hook. Get the complete technical guide.

- Repository: [Abdullah/FckSignups](https://github.com/BraveOPotato/FckSignups)
- Tags: how-to-guide
- Published: 2026-09-08

---

**Categories in FckSignups are defined statically in [`tools.json`](https://github.com/BraveOPotato/FckSignups/blob/main/tools.json) with a standardized schema (id, name, icon, description) and enhanced at runtime by the `useTools` hook, which injects an "All" pseudo-category for unified browsing.**

FckSignups organizes its utility collection using a hierarchical category system that balances static data management with dynamic UI behavior. Understanding how these **categories are defined for tools in FckSignups** requires examining both the JSON data structure and the TypeScript logic that manipulates it at runtime.

## Static Category Definitions in tools.json

The canonical source of truth for category definitions resides in the repository root file **[`tools.json`](https://github.com/BraveOPotato/FckSignups/blob/main/tools.json)**. This file declares every available category using a consistent four-field schema that the application consumes during hydration.

### Category Schema and Structure

Each category object in [`tools.json`](https://github.com/BraveOPotato/FckSignups/blob/main/tools.json) (starting at line 2) must conform to the following structure:

- **`id`** – A lowercase string identifier used for filtering logic (e.g., `"productivity"`, `"design"`)
- **`name`** – The human-readable label displayed in the navigation UI
- **`icon`** – A single emoji character rendered alongside the category name
- **`description`** – A concise summary explaining the category's purpose

```json
{
  "id": "privacy",
  "name": "Privacy & Security",
  "icon": "🔒",
  "description": "Protect your data without trusting servers"
}

```

The complete category list lives in **[`tools.json`](https://github.com/BraveOPotato/FckSignups/blob/main/tools.json)** alongside the tools array, ensuring that category metadata travels with the dataset without requiring separate API calls.

## Runtime Category Injection and State Management

While [`tools.json`](https://github.com/BraveOPotato/FckSignups/blob/main/tools.json) provides the base categories, the application modifies this array at runtime to improve user experience. The **`useTools`** hook in [`src/hooks/useTools.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/src/hooks/useTools.ts) handles data loading and state initialization.

### Adding the "All" Pseudo-Category

Before rendering the category navigation, the hook programmatically prepends a synthetic category with `id: "all"`. This allows users to view unfiltered results without modifying the underlying JSON source. The injection logic appears at lines 73-82:

```typescript
if (!cats.find((c) => c.id === "all")) {
  cats.unshift({
    id: "all",
    name: "All",
    icon: "◈",
    description: "All tools",
  });
}

```

This check prevents duplicate insertion during React re-renders and ensures the "All" option always appears first in the navigation list.

## Type Safety and the Category Interface

To maintain consistency between the static JSON and runtime TypeScript logic, FckSignups defines a strict `Category` interface in **[`src/types/index.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/src/types/index.ts)** (lines 21-26):

```typescript
export interface Category {
  id: string;
  name: string;
  icon: string;
  description: string;
}

```

This interface enforces that all category objects—whether loaded from [`tools.json`](https://github.com/BraveOPotato/FckSignups/blob/main/tools.json) or injected by the `useTools` hook—contain the required fields. The `category` field on each `Tool` object references these `id` values, creating a relational constraint that prevents orphaned tools.

## How Category Filtering Works in the UI

When users select a category, the application filters the master tool list using a memoized computation. The filtering logic (lines 96-99 in [`src/hooks/useTools.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/src/hooks/useTools.ts)) compares each tool's `category` property against the `activeCategory` state:

```typescript
const scoredTools = useMemo(() => {
  return allTools
    .filter(
      (tool) => activeCategory === "all" || tool.category === activeCategory,
    )
    // …scoring omitted for brevity
}, [allTools, activeCategory, searchQuery]);

```

This approach treats "all" as a special bypass value while enforcing strict string matching for specific categories, ensuring that only tools explicitly tagged with the selected category `id` appear in the results.

## Summary

- **Canonical definitions** reside in [`tools.json`](https://github.com/BraveOPotato/FckSignups/blob/main/tools.json) using a standardized schema with `id`, `name`, `icon`, and `description` fields.
- **Runtime enhancement** occurs in [`src/hooks/useTools.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/src/hooks/useTools.ts), which injects an "All" category to enable unfiltered browsing without modifying source data.
- **Type safety** is enforced through the `Category` interface in [`src/types/index.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/src/types/index.ts), ensuring consistency across JSON and TypeScript contexts.
- **Filtering logic** uses simple string comparison between `tool.category` and `activeCategory`, with "all" serving as a wildcard bypass.

## Frequently Asked Questions

### Where are the category names and icons stored in FckSignups?

According to the FckSignups source code, category metadata is stored in **[`tools.json`](https://github.com/BraveOPotato/FckSignups/blob/main/tools.json)** at the repository root. Each category object contains a `name` field for the display label and an `icon` field for the emoji character, alongside `id` and `description` properties.

### How does FckSignups handle the "All" category option?

The "All" category is not stored in [`tools.json`](https://github.com/BraveOPotato/FckSignups/blob/main/tools.json). Instead, the **`useTools`** hook programmatically prepends this pseudo-category during data hydration (lines 73-82 of [`src/hooks/useTools.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/src/hooks/useTools.ts)) by calling `cats.unshift()` with a hardcoded object, allowing users to reset filters without API changes.

### What TypeScript type defines a category in FckSignups?

The **`Category`** interface in [`src/types/index.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/src/types/index.ts) (lines 21-26) defines the category structure with four required string fields: `id`, `name`, `icon`, and `description`. Both the JSON parser and the runtime injection logic must satisfy this contract.

### Can I add new categories to FckSignups by editing tools.json?

Yes, new categories can be added by appending objects to the `categories` array in [`tools.json`](https://github.com/BraveOPotato/FckSignups/blob/main/tools.json), provided each entry includes the required fields and uses a unique `id`. The application will automatically include these in the navigation and filtering system without requiring changes to the TypeScript source code.