How to Integrate FckSignups with a Frontend Framework like React

FckSignups (now NoSignups) is a standalone React + TypeScript application that you can either embed wholesale as a component or consume as a JSON data API to build your own custom UI.

Integrating NoSignups into your React project gives you access to its curated, searchable catalogue of open-source tools without signup requirements. The codebase is intentionally lightweight—no authentication layer, no external state management, and minimal dependencies—making it straightforward to adopt according to your needs.

Two Integration Strategies

You have two primary paths when adding NoSignups to your stack. Your choice depends on whether you need the complete pre-built UI or full control over presentation.

Embed the Full App Component

Use this approach when you want instant functionality with zero custom styling or layout work. The App component in src/App.tsx composes everything: Header, ToolFilters, Tools grid, ReportFloatingWidget, and Footer.

First, add the repository as a dependency:

npm install https://github.com/BraveOPotato/FckSignups.git

Then import and render:

import NoSignupsApp from 'fcksignups/src/App';
import 'fcksignups/src/styles/index.css';

function MyDashboard() {
  return (
    <div>
      <h1>My Dashboard</h1>
      <NoSignupsApp />
    </div>
  );
}

The CSS import is mandatory—styles are scoped in src/styles/index.css and rely on standard CSS variables.

Consume the Raw Data API

Use this approach when you need a different visual design, want to mix tool data with other content, or are building in a non-React environment.

The data layer is defined in src/constants/fallbackData.ts, which exports:

export const PROD_JSON_URL = 'https://raw.githubusercontent.com/BraveOPotato/FckSignups/main/tools.json';
export const DEV_JSON_URL = 'https://raw.githubusercontent.com/BraveOPotato/FckSignups/main/tools.json';

During development, the useTools hook automatically switches to DEV_JSON_URL when import.meta.env.DEV evaluates to true.

Fetch and use the data directly:

import React, { useEffect, useState } from 'react';
import type { Tool } from 'fcksignups/src/types';

const PROD_JSON_URL =
  'https://raw.githubusercontent.com/BraveOPotato/FckSignups/main/tools.json';

export default function CustomToolList() {
  const [tools, setTools] = useState<Tool[]>([]);

  useEffect(() => {
    fetch(PROD_JSON_URL)
      .then((r) => r.json())
      .then((data: { tools: Tool[] }) => setTools(data.tools))
      .catch(console.error);
  }, []);

  return (
    <ul>
      {tools.map((t) => (
        <li key={t.id}>
          <a href={t.url}>{t.name}</a> – {t.description}
        </li>
      ))}
    </ul>
  );
}

Customizing the Data Source

If you maintain your own fork of the tool catalogue, override where NoSignups looks for data.

Set the environment variable before building:

VITE_PROD_JSON_URL=https://your-cdn.com/tools.json npm run build

Or modify src/constants/fallbackData.ts directly to point to your hosted JSON file. The fallback object in that same file ensures the UI remains functional even if both remote URLs fail.

Enabling User Submissions and Reporting

The repository includes a Cloudflare Worker at cloudflare-worker/worker.ts that handles community contributions without requiring a backend. It exposes three POST endpoints:

• /submit-tool – Propose a new tool for inclusion
• /report-tool – Flag inaccurate or problematic listings
• /suggest-tool – Submit category or feature suggestions

Each endpoint creates a GitHub issue using repository secrets configured in the worker. To enable this functionality in your integration:

async function submitTool(tool: {
  name: string;
  url: string;
  description: string;
  category: string;
}) {
  const resp = await fetch(
    'https://YOUR_WORKER_DOMAIN/submit-tool',
    {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(tool),
    }
  );
  const result = await resp.json();
  if (result.error) throw new Error(result.error);
  return result;
}

See the header comments in worker.ts for secret configuration requirements.

Key Architectural Components

Understanding these files helps you extend or debug your integration:

File	Responsibility
src/App.tsx	Root component orchestrating all UI sections
src/hooks/useTools.ts	Core hook for data loading, categorization (featured, editors-pick, meets-criteria), and search scoring via tokenize and matchScore
src/constants/fallbackData.ts	URL constants and hard-coded fallback data
src/types/index.ts	TypeScript definitions for Tool, Category, and related interfaces
cloudflare-worker/worker.ts	Serverless endpoints for community submissions

Summary

• Full-embed via App component for instant deployment—import component and CSS, render anywhere in your tree
• Data-only integration by fetching PROD_JSON_URL and using Tool types from src/types/index.ts
• Configurable data source through environment variables or direct modification of fallbackData.ts
• Submission workflow available via Cloudflare Worker endpoints at /submit-tool, /report-tool, /suggest-tool

Frequently Asked Questions

Can I use FckSignups with a framework other than React?

Yes. While the UI components are React-specific, the JSON data format is framework-agnostic. Fetch from PROD_JSON_URL and build your interface in Vue, Svelte, Angular, or vanilla JavaScript. The type definitions in src/types/index.ts can be manually ported or used as reference.

Does NoSignups require any authentication or API keys?

No. The catalogue data is publicly readable from GitHub raw URLs. The submission worker requires GitHub token configuration on the server side, but your frontend integration does not expose or require any credentials.

How does search and filtering work in the full app?

The useTools hook implements client-side search using tokenize to break queries into normalized terms and matchScore to rank tools against those terms. Categories are derived dynamically from the loaded JSON. No server-side search endpoint exists—everything happens in the browser after initial data load.

What happens if the remote JSON fails to load?

useTools falls back to a hard-coded object exported from fallbackData.ts. This ensures the application remains functional offline or during GitHub outages, though with potentially stale data.

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