# How to Integrate FckSignups with a Frontend Framework like React > Learn to integrate FckSignups with React. Use this standalone React + TypeScript app as a component or JSON API to build your custom UI. - Repository: [Abdullah/FckSignups](https://github.com/BraveOPotato/FckSignups) - Tags: how-to-guide - Published: 2026-09-07 --- **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`](https://github.com/BraveOPotato/FckSignups/blob/main/src/App.tsx) composes everything: Header, ToolFilters, Tools grid, ReportFloatingWidget, and Footer. First, add the repository as a dependency: ```bash npm install https://github.com/BraveOPotato/FckSignups.git ``` Then import and render: ```tsx import NoSignupsApp from 'fcksignups/src/App'; import 'fcksignups/src/styles/index.css'; function MyDashboard() { return (

My Dashboard

); } ``` The CSS import is mandatory—styles are scoped in [`src/styles/index.css`](https://github.com/BraveOPotato/FckSignups/blob/main/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`](https://github.com/BraveOPotato/FckSignups/blob/main/src/constants/fallbackData.ts), which exports: ```typescript 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: ```tsx 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([]); useEffect(() => { fetch(PROD_JSON_URL) .then((r) => r.json()) .then((data: { tools: Tool[] }) => setTools(data.tools)) .catch(console.error); }, []); return ( ); } ``` ## 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: ```bash VITE_PROD_JSON_URL=https://your-cdn.com/tools.json npm run build ``` Or modify [`src/constants/fallbackData.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/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`](https://github.com/BraveOPotato/FckSignups/blob/main/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: ```tsx 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`](https://github.com/BraveOPotato/FckSignups/blob/main/worker.ts) for secret configuration requirements. ## Key Architectural Components Understanding these files helps you extend or debug your integration: | File | Responsibility | |------|--------------| | [`src/App.tsx`](https://github.com/BraveOPotato/FckSignups/blob/main/src/App.tsx) | Root component orchestrating all UI sections | | [`src/hooks/useTools.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/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`](https://github.com/BraveOPotato/FckSignups/blob/main/src/constants/fallbackData.ts) | URL constants and hard-coded fallback data | | [`src/types/index.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/src/types/index.ts) | TypeScript definitions for `Tool`, `Category`, and related interfaces | | [`cloudflare-worker/worker.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/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`](https://github.com/BraveOPotato/FckSignups/blob/main/src/types/index.ts) - **Configurable data source** through environment variables or direct modification of [`fallbackData.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/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`](https://github.com/BraveOPotato/FckSignups/blob/main/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`](https://github.com/BraveOPotato/FckSignups/blob/main/fallbackData.ts). This ensures the application remains functional offline or during GitHub outages, though with potentially stale data.