# What Are the Different Tiers for Loading Tool Data in FckSignups?

> Discover the three tiers for loading tool data in FckSignups. Learn how the system prioritizes local JSON, remote endpoints, and static constants for resilient data retrieval.

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

---

**The FckSignups front-end implements a resilient three-tier fallback system that attempts to load tool data from a local development JSON file first, then falls back to a remote production JSON endpoint, and finally resorts to hard-coded static constants if all network requests fail.**

The **BraveOPotato/FckSignups** repository uses this layered approach to guarantee that the tools catalog remains available even when network conditions degrade or configuration errors occur. According to the source code in [`src/hooks/useTools.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/src/hooks/useTools.ts), the application consults three distinct data sources in sequence, tracking the current state through a strongly-typed **LoadStatus** enum.

## The Three-Tier Loading Architecture

The data loading strategy prioritizes developer experience while ensuring production stability. Each tier serves a specific purpose in the fallback chain.

### Tier 1: Development JSON

The first tier references a local **[`tools.json`](https://github.com/BraveOPotato/FckSignups/blob/main/tools.json)** file that ships with the repository root. This tier provides instantaneous updates during local development without requiring network round-trips or deployments.

- **Location**: Repository root ([`tools.json`](https://github.com/BraveOPotato/FckSignups/blob/main/tools.json))
- **Use case**: Local development and hot-reloading
- **Advantage**: Zero latency, instant reflection of local changes

### Tier 2: Production JSON

When the development JSON is unavailable (as in production builds), the hook attempts to fetch from a remote URL defined by **`PROD_JSON_URL`** in [`src/constants/fallbackData.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/src/constants/fallbackData.ts). This typically points to a GitHub Pages deployment or CDN-hosted version of the tools catalog.

- **Location**: Remote endpoint (configurable via constants)
- **Use case**: Production deployments
- **Configuration**: Defined in [`src/constants/fallbackData.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/src/constants/fallbackData.ts)

### Tier 3: Hard-Coded Fallback Data

If both JSON sources fail to load or return empty data, the application falls back to **`FALLBACK_DATA`**, a static array exported from [`src/constants/fallbackData.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/src/constants/fallbackData.ts). This guarantees that the UI can still render a functional tools list during complete network outages.

- **Location**: [`src/constants/fallbackData.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/src/constants/fallbackData.ts)
- **Use case**: Network failure resilience
- **Characteristics**: Immutable, synchronous, always available

## Load Status Tracking

The UI tracks which tier is active through the **`LoadStatus`** type defined in [`src/types/index.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/src/types/index.ts):

```typescript
// src/types/index.ts
export type LoadStatus = "idle" | "loading" | "success" | "error";

```

- **`idle`**: No fetch operation has started
- **`loading`**: Currently attempting to fetch from one of the three tiers
- **`success`**: Valid data retrieved from either JSON source or fallback
- **`error`**: All tiers exhausted; displaying fallback data as last resort

## Implementation of Tool Data Loading Tiers

The `useTools` hook orchestrates the tiered loading logic sequentially. According to the source in [`src/hooks/useTools.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/src/hooks/useTools.ts), it attempts each data source in order:

```typescript
// src/hooks/useTools.ts
const [loadStatus, setLoadStatus] = useState<LoadStatus>("loading");

// Attempt Tier 1: Development JSON
let data = await loadTools(DEV_JSON_URL);

// Attempt Tier 2: Production JSON (if Tier 1 fails)
if (!data) {
  data = await loadTools(PROD_JSON_URL);
}

// Attempt Tier 3: Fallback Data (if all else fails)
if (!data) {
  data = FALLBACK_DATA;
}

setLoadStatus(data ? "success" : "error");

```

The `loadTools` helper function handles the actual fetch operations and validation, returning `null` when a tier fails to provide valid data.

## React Integration Examples

### Displaying Loading States

Consume the hook in your components to render appropriate UI for each tier state:

```tsx
import { useTools } from "./hooks/useTools";

function ToolsCatalog() {
  const { tools, loadStatus } = useTools();

  if (loadStatus === "loading") {
    return <div className="spinner">Loading tool data...</div>;
  }

  if (loadStatus === "error") {
    return (
      <div className="warning">
        Showing offline tool data (fallback tier active)
      </div>
    );
  }

  return (
    <ul>
      {tools.map(tool => (
        <li key={tool.id}>{tool.name}</li>
      ))}
    </ul>
  );
}

```

### Determining Which Tier Loaded

For debugging purposes, you can determine which data source succeeded:

```typescript
import { loadTools } from "./hooks/useTools";
import { DEV_JSON_URL, PROD_JSON_URL, FALLBACK_DATA } from "./constants/fallbackData";

async function identifyActiveTier(): Promise<string> {
  const devData = await loadTools(DEV_JSON_URL);
  if (devData) return "development (local JSON)";
  
  const prodData = await loadTools(PROD_JSON_URL);
  if (prodData) return "production (remote JSON)";
  
  return "fallback (hard-coded constants)";
}

```

## Summary

- **Three-tier fallback**: The system attempts local development JSON, then remote production JSON, and finally hard-coded constants.
- **Status tracking**: The `LoadStatus` type ("idle" | "loading" | "success" | "error") provides granular UI state management.
- **Key files**: [`src/hooks/useTools.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/src/hooks/useTools.ts) implements the logic, [`src/constants/fallbackData.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/src/constants/fallbackData.ts) defines URLs and fallback data, and [`src/types/index.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/src/types/index.ts) declares the status types.
- **Resilience**: This architecture ensures the tools catalog remains functional even during complete network failures or configuration drift.

## Frequently Asked Questions

### What happens if all three tiers fail to provide data?

The hook guarantees that **`FALLBACK_DATA`** from [`src/constants/fallbackData.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/src/constants/fallbackData.ts) will always render, as it consists of hard-coded constants embedded in the application bundle. While the `loadStatus` will indicate `"error"`, the UI will never crash due to missing tool data.

### How does the application know which tier is currently active?

The application does not explicitly track which specific tier succeeded within the state object. However, you can infer the active tier by checking the environment and network conditions, or by manually calling `loadTools` against each URL constant to determine which resolves successfully according to the logic in [`src/hooks/useTools.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/src/hooks/useTools.ts).

### Where is the production JSON URL configured?

The **`PROD_JSON_URL`** constant is defined in [`src/constants/fallbackData.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/src/constants/fallbackData.ts). This file centralizes all fallback-related configuration, including the production endpoint and the static fallback data array, making it easy to update deployment targets without modifying the hook logic.

### Can I modify the fallback data without rebuilding the application?

No. Because **`FALLBACK_DATA`** is imported as a static constant from [`src/constants/fallbackData.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/src/constants/fallbackData.ts) and bundled at build time, any modifications require a new deployment. For dynamic updates without rebuilding, you must ensure either the development or production JSON tiers remain accessible.