# How to Extend FckSignups with Custom Features: A Complete Developer Guide

> Extend FckSignups with custom features by modifying its modular React and TypeScript layers. Learn the six-step workflow for data schema, state hooks, UI, and Cloudflare Workers.

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

---

**You extend FckSignups (now NoSignups) by modifying its modular React + TypeScript layers—data schema, state hooks, UI components, and Cloudflare Worker endpoints—following a six-step workflow from type definition to backend persistence.**

FckSignups is a Vite-powered React application designed for extensibility. Its architecture separates concerns into discrete layers, making it straightforward to add custom features without destabilizing existing functionality. This guide walks through the exact file paths and code patterns used in the BraveOPotato/FckSignups repository to extend the platform.

## Understanding FckSignups Architecture

The codebase organizes functionality into seven distinct layers. Each layer exposes specific entry points for extension:

| Layer | Purpose | Key Entry Point |
|-------|---------|---------------|
| **Data model** | Defines tool metadata structure | [`src/data/schema.js`](https://github.com/BraveOPotato/FckSignups/blob/main/src/data/schema.js) |
| **State hooks** | Manages client-side tool state | [`src/hooks/useTools.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/src/hooks/useTools.ts) |
| **UI components** | Renders catalogue and interactions | [`src/components/Home/Tools/Tools.tsx`](https://github.com/BraveOPotato/FckSignups/blob/main/src/components/Home/Tools/Tools.tsx) |
| **Modal system** | Handles pop-up flows | [`src/constants/ModalConfigs.tsx`](https://github.com/BraveOPotato/FckSignups/blob/main/src/constants/ModalConfigs.tsx) |
| **Backend** | Persists data via Cloudflare Worker | [`cloudflare-worker/worker.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/cloudflare-worker/worker.ts) |
| **Styling** | Scoped CSS modules | Component [`.module.css`](https://github.com/BraveOPotato/FckSignups/blob/main/.module.css) files |
| **Utilities** | Helper functions | [`src/utils/highlight.tsx`](https://github.com/BraveOPotato/FckSignups/blob/main/src/utils/highlight.tsx), [`src/utils/formatters.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/src/utils/formatters.ts) |

This separation means you can add a rating system, custom filters, or new submission workflows by touching only the relevant files.

## Six-Step Workflow for Adding Custom Features

### Step 1: Extend the Data Schema in [`src/data/schema.js`](https://github.com/BraveOPotato/FckSignups/blob/main/src/data/schema.js)

The schema file defines every field available for tool records. Required fields include `id`, `name`, `url`, and `category`. Optional metadata covers `tags`, `github`, `stars`, and `featured`.

To add a new property, append it directly to the schema objects:

```javascript
// src/data/schema.js
export const schema = [
  {
    id: "example-tool",
    name: "Example Tool",
    description: "A demo tool",
    url: "https://example.com",
    category: "productivity",
    // NEW FIELD
    rating: 4.5,
    tags: ["demo", "example"],
  },
];

```

This change makes the data available immediately, though TypeScript will flag type errors until you complete Step 2.

### Step 2: Update Type Definitions in [`src/types/index.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/src/types/index.ts)

TypeScript enforces compile-time safety across the codebase. Mirror your schema changes in the central types file:

```typescript
// src/types/index.ts
export interface Tool {
  id: string;
  name: string;
  description: string;
  url: string;
  category: string;
  tags?: string[];
  github?: string;
  license?: string;
  stars?: number;
  featured?: boolean;
  // NEW PROPERTY
  rating?: number;
}

```

Failing to update types will produce errors in [`useTools.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/useTools.ts) and any components consuming tool data.

### Step 3: Expose New State Logic in [`src/hooks/useTools.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/src/hooks/useTools.ts)

The `useTools()` hook in [`src/hooks/useTools.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/src/hooks/useTools.ts) fetches the tool list, merges submissions, and exposes mutation methods. For custom behaviors like sorting by rating or caching ratings locally, modify this hook directly.

The hook provides:
- `addTool()` — for new submissions
- `updateTool()` — for editing existing entries
- Filter and search state management

Inject your custom logic here before components access the data.

### Step 4: Render the Feature in UI Components

**Display in cards:** Modify [`src/components/Home/Tools/ToolCard/ToolCard.tsx`](https://github.com/BraveOPotato/FckSignups/blob/main/src/components/Home/Tools/ToolCard/ToolCard.tsx) to show new fields:

```tsx
// src/components/Home/Tools/ToolCard/ToolCard.tsx
export function ToolCard({ tool }: { tool: Tool }) {
  return (
    <div className={styles.card}>
      <h3>{tool.name}</h3>
      <p>{tool.description}</p>
      {tool.rating && <span className={styles.rating}>⭐ {tool.rating}</span>}
    </div>
  );
}

```

**Update container mapping:** The [`Tools.tsx`](https://github.com/BraveOPotato/FckSignups/blob/main/Tools.tsx) container at [`src/components/Home/Tools/Tools.tsx`](https://github.com/BraveOPotato/FckSignups/blob/main/src/components/Home/Tools/Tools.tsx) maps your tool array to `ToolCard` instances. No changes needed unless you're adding new container-level behavior.

**Add filters:** If your feature needs filtering, extend [`src/components/Home/ToolFilters/ToolFilters.tsx`](https://github.com/BraveOPotato/FckSignups/blob/main/src/components/Home/ToolFilters/ToolFilters.tsx) with new UI controls, then wire the filter logic back through [`useTools.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/useTools.ts).

**Style changes:** Edit the corresponding [`.module.css`](https://github.com/BraveOPotato/FckSignups/blob/main/.module.css) file—[`ToolCard.module.css`](https://github.com/BraveOPotato/FckSignups/blob/main/ToolCard.module.css) for card styling, or create new scoped modules for additional components.

### Step 5: Create Backend Handlers in `cloudflare-worker/urlHandlers/`

The Cloudflare Worker persists data through modular handlers. Existing handlers include:
- [`handleSubmitTool.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/handleSubmitTool.ts) — stores new tools
- [`handleSuggestTool.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/handleSuggestTool.ts) — returns autocomplete
- [`handleReportTool.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/handleReportTool.ts) — records problems

Create a new handler following this pattern:

```typescript
// cloudflare-worker/urlHandlers/handleRateTool.ts
import { jsonResponse } from "../utils";

export async function handleRateTool(request: Request) {
  const { id, rating } = await request.json();
  // Store rating in Cloudflare KV
  await TOOLS_KV.put(`tool:${id}:rating`, rating.toString());
  return jsonResponse({ success: true });
}

```

Then register the route in [`cloudflare-worker/worker.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/cloudflare-worker/worker.ts):

```typescript
// cloudflare-worker/worker.ts
import { handleRateTool } from "./urlHandlers/handleRateTool";

router.post("/rate-tool", handleRateTool);

```

Ensure your KV store schema accommodates the new property before deploying.

### Step 6: Configure Modals for User Interaction

The modal system uses declarative configuration in [`src/constants/ModalConfigs.tsx`](https://github.com/BraveOPotato/FckSignups/blob/main/src/constants/ModalConfigs.tsx). To add a "Rate this tool" modal:

1. Add an entry to [`ModalConfigs.tsx`](https://github.com/BraveOPotato/FckSignups/blob/main/ModalConfigs.tsx) defining the modal type and props
2. Create the component under `src/components/Shared/Modals/`
3. Trigger via the modal provider in `src/hooks/useModal/*`

This pattern keeps modal logic consistent with the existing "Submit a tool" flow.

## Key Files for Extension Reference

| File Path | Extension Purpose |
|-----------|-------------------|
| [`src/data/schema.js`](https://github.com/BraveOPotato/FckSignups/blob/main/src/data/schema.js) | Define new data fields |
| [`src/types/index.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/src/types/index.ts) | Maintain TypeScript safety |
| [`src/hooks/useTools.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/src/hooks/useTools.ts) | Custom state behaviors |
| [`src/components/Home/Tools/Tools.tsx`](https://github.com/BraveOPotato/FckSignups/blob/main/src/components/Home/Tools/Tools.tsx) | Container rendering |
| [`src/components/Home/ToolFilters/ToolFilters.tsx`](https://github.com/BraveOPotato/FckSignups/blob/main/src/components/Home/ToolFilters/ToolFilters.tsx) | Filter UI controls |
| [`src/constants/ModalConfigs.tsx`](https://github.com/BraveOPotato/FckSignups/blob/main/src/constants/ModalConfigs.tsx) | Modal registration |
| [`cloudflare-worker/worker.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/cloudflare-worker/worker.ts) | API routing |
| `cloudflare-worker/urlHandlers/` | Backend endpoint modules |

## Summary

- **FckSignups extension** follows a clear path through schema, types, hooks, components, and backend handlers
- **[`src/data/schema.js`](https://github.com/BraveOPotato/FckSignups/blob/main/src/data/schema.js)** and **[`src/types/index.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/src/types/index.ts)** must stay synchronized for type safety
- **[`src/hooks/useTools.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/src/hooks/useTools.ts)** centralizes state mutations and custom behaviors
- **UI changes** target specific component files with scoped CSS modules
- **Backend extensions** add handler modules to `cloudflare-worker/urlHandlers/` and register routes in [`worker.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/worker.ts)
- **Modal additions** use declarative configuration in [`ModalConfigs.tsx`](https://github.com/BraveOPotato/FckSignups/blob/main/ModalConfigs.tsx)

The modular architecture ensures custom features integrate cleanly without cascading changes across the codebase.

## Frequently Asked Questions

### What technology stack does FckSignups use?

FckSignups runs on **React with TypeScript**, built via **Vite** for fast development. The backend uses **Cloudflare Workers** with **KV storage** for persistence. This stack provides type safety, rapid builds, and edge-distributed hosting.

### Do I need to modify the Cloudflare Worker for every custom feature?

Only for features requiring **data persistence** or server-side processing. Pure UI changes—like displaying existing fields differently or adding client-side filters—require no backend modifications. Features storing new data or accepting user submissions need handler modules in `cloudflare-worker/urlHandlers/`.

### How does the modal system work in FckSignups?

The modal system combines **React Context** in `src/hooks/useModal/*` with **declarative configuration** in [`src/constants/ModalConfigs.tsx`](https://github.com/BraveOPotato/FckSignups/blob/main/src/constants/ModalConfigs.tsx). You define modal types centrally, then implement components under `src/components/Shared/Modals/`. This separates modal state management from individual modal content.

### Where should I add utility functions for data formatting?

Place reusable helpers in `src/utils/`. The repository includes [`highlight.tsx`](https://github.com/BraveOPotato/FckSignups/blob/main/highlight.tsx) for text highlighting and [`formatters.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/formatters.ts) for data transformations. Import these into components or hooks that need custom display logic for new fields.