How the Featured and Editor's Pick Tool Selection Process Works in FckSignups

The FckSignups tool selection process categorizes tools into Featured, Editor's Pick, and Meets Criteria sections based on boolean flags and string identifiers in the tool data, processed by the useTools hook and rendered hierarchically in the UI.

The FckSignups repository (also known as NoSignups) implements a curated directory architecture that automatically organizes utilities into distinct visibility tiers. Understanding this tool selection process is essential for contributors aiming to highlight specific applications or for maintainers customizing the presentation layer. The system relies on declarative data flags defined in the tool schema and processed through a centralized React hook that filters and groups entries at runtime.

The Three-Tier Categorization System

The application divides tools into three distinct sections based on specific data flags evaluated in sequence:

• Featured Section: Tools marked with featured: true appear at the top of the page with a special badge. This boolean flag takes precedence over all other categorization logic.

• Editor's Pick Section: Tools explicitly assigned section: "editors-pick" are displayed below the featured list with an "Editor's Pick" badge. This allows curators to highlight high-quality tools without assigning the top-tier featured status.

• Meets Criteria Section: All remaining tools that satisfy baseline quality filters—specifically those without a notRecommendedReason, lacking the abandoned flag, and possessing a valid URL—populate the default tool listing.

The Data Layer: Tool Schema and Flags

The selection logic depends on fields defined in the tool schema. According to the [src/data/schema.js](https://github.com/BraveOPotato/FckSignups/blob/main/src/data/schema.js) file, each tool entry supports a featured boolean and a section string that drives the categorization engine.

When adding or editing tools in the data file (typically src/data/tools.json), contributors set these flags to control visibility:

{
  "id": "privacy-search",
  "name": "Privacy Search",
  "description": "Search without tracking.",
  "url": "https://privacysearch.example.com",
  "category": "utilities",
  "tags": ["search", "privacy"],
  "featured": true
}

Explicit section assignment for editorial curation uses the string identifier:

{
  "id": "markdown-pro",
  "name": "Markdown Pro",
  "description": "Advanced markdown editing.",
  "url": "https://mdpro.example.com",
  "section": "editors-pick"
}

The Logic Layer: useTools Hook Implementation

The grouping logic resides in [src/hooks/useTools.ts](https://github.com/BraveOPotato/FckSignups/blob/main/src/hooks/useTools.ts). This hook loads the raw tool dataset and iterates through each entry to assign it to the appropriate category array.

The hook implements the following filtering algorithm:

1. Featured Check: If tool.featured === true, the tool is pushed into the featured array immediately.
2. Editor's Pick Check: Else if tool.section === "editors-pick", the tool enters the editorsPicks array.
3. Quality Gate: For all remaining tools, the hook verifies the absence of notRecommendedReason, confirms the tool is not marked abandoned, and validates the presence of a URL. Passing tools populate the meetsCriteria array.

The hook returns a sections object containing these three arrays for consumption by the presentation layer.

The Presentation Layer: Rendering Sections

The [src/components/Home/Tools/Tools.tsx](https://github.com/BraveOPotato/FckSignups/blob/main/src/components/Home/Tools/Tools.tsx) component receives the grouped sections and renders them in strict hierarchical order, ensuring Featured content appears above Editor's Picks:

{sections.featured.length > 0 && (
  <ToolsSection variant="featured" tools={sections.featured} label="Featured" />
)}

{sections.editorsPicks.length > 0 && (
  <ToolsSection variant="editors" tools={sections.editorsPicks} label="Editor’s Pick" />
)}

<ToolsSection variant="meets" tools={sections.meetsCriteria} label="All Tools" />

Individual tool cards in [src/components/Home/Tools/ToolCard/ToolCard.tsx](https://github.com/BraveOPotato/FckSignups/blob/main/src/components/Home/Tools/ToolCard/ToolCard.tsx) check the section prop to determine badge rendering:

{tool.section === "featured" && (
  <span className={s.featuredBadge}>Featured</span>
)}
{tool.section === "editors-pick" && (
  <span className={s.editorsBadge}>Editor's Pick</span>
)}

Code Examples: Configuring Tool Visibility

To mark a tool as an Editor's Pick, set the section field in the tool data:

{
  "id": "awesome-tool",
  "name": "Awesome Tool",
  "description": "A curated utility.",
  "url": "https://tool.example.com",
  "category": "productivity",
  "section": "editors-pick"
}

To feature a tool at the top of the directory:

{
  "id": "must-have-app",
  "name": "Must Have App",
  "description": "Essential daily utility.",
  "url": "https://musthave.example.com",
  "featured": true
}

Consuming the grouped sections in a custom component:

import { useTools } from '@/hooks/useTools';

export const CuratedList = () => {
  const { sections } = useTools();

  return (
    <div>
      {sections.featured.map(tool => (
        <ToolCard key={tool.id} tool={tool} />
      ))}
    </div>
  );
};

Summary

• The tool selection process is data-driven through the featured boolean flag and section string identifiers defined in the tool schema.
• The useTools hook in src/hooks/useTools.ts performs runtime categorization into featured, editorsPicks, and meetsCriteria arrays.
• Featured tools appear first in the UI, followed by Editor's Pick tools, then the default Meets Criteria listing.
• The quality gate for the default section explicitly excludes abandoned tools or those with a notRecommendedReason, ensuring only maintained utilities appear in the general directory.
• ToolCard.tsx renders contextual badges by evaluating the tool.section property for each entry.

Frequently Asked Questions

How do I mark a tool as Featured or Editor's Pick?

Add "featured": true for featured status, or set "section": "editors-pick" for the editor's pick classification in the tool's JSON entry. According to the FckSignups source code, the useTools hook automatically detects these flags during the partitioning phase and assigns the tool to the corresponding array.

What happens if a tool has both featured: true and section: "editors-pick"?

The hook evaluates the featured boolean first in its conditional chain, so the tool will appear in the Featured section and bypass the Editor's Pick classification. The boolean flag takes precedence in the selection hierarchy as implemented in src/hooks/useTools.ts.

Why does a tool not appear in the Meets Criteria section?

Tools are excluded from this default section if they contain a notRecommendedReason, are flagged as abandoned, or lack a valid url property. These quality filters ensure only maintained, recommended utilities appear in the general listing, while problematic entries are filtered out during the array construction phase.

Where is the tool selection logic defined?

The core selection algorithm is implemented in [src/hooks/useTools.ts](https://github.com/BraveOPotato/FckSignups/blob/main/src/hooks/useTools.ts), which processes the raw data and returns categorized arrays. The presentation order is controlled by [src/components/Home/Tools/Tools.tsx](https://github.com/BraveOPotato/FckSignups/blob/main/src/components/Home/Tools/Tools.tsx), which renders the sections in the specified sequence.

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