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

> Discover how FckSignups selects Featured and Editor's Pick tools. Learn about the data flags and the useTools hook that drive this process for clear UI categorization.

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

---

**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)](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`](https://github.com/BraveOPotato/FckSignups/blob/main/src/data/tools.json)), contributors set these flags to control visibility:

```json
{
  "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:

```json
{
  "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)](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)](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:

```tsx
{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)](https://github.com/BraveOPotato/FckSignups/blob/main/src/components/Home/Tools/ToolCard/ToolCard.tsx) check the `section` prop to determine badge rendering:

```tsx
{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:

```json
{
  "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:

```json
{
  "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:

```tsx
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`](https://github.com/BraveOPotato/FckSignups/blob/main/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`](https://github.com/BraveOPotato/FckSignups/blob/main/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)](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)](https://github.com/BraveOPotato/FckSignups/blob/main/src/components/Home/Tools/Tools.tsx), which renders the sections in the specified sequence.