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

Categories in FckSignups are defined statically in 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. 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 (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

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

The complete category list lives in 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 provides the base categories, the application modifies this array at runtime to improve user experience. The useTools hook in 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:

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 (lines 21-26):

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

This interface enforces that all category objects—whether loaded from 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) compares each tool's category property against the activeCategory state:

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 using a standardized schema with id, name, icon, and description fields.
• Runtime enhancement occurs in 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, 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 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. Instead, the useTools hook programmatically prepends this pseudo-category during data hydration (lines 73-82 of 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 (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, 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.

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