How to Set Up FckSignups Locally: Complete Development Guide

FckSignups is a React + TypeScript Vite application that requires only three commands to run locally—clone, install, and start the dev server.

Setting up the FckSignups project (now known as NoSignups) locally takes minutes thanks to its lightweight, client-first architecture. The repository contains a curated directory of open-source tools built with modern frontend tooling and an optional Cloudflare Worker for minimal API functionality. This guide walks through every step to get the application running on your machine, with or without the edge worker.

Prerequisites

Before starting, ensure you have:

• Node.js 18+ (LTS recommended)
• npm 9+ or yarn / pnpm
• Git for cloning the repository

The project has no database dependencies and requires no authentication, keeping local setup friction minimal.

Clone and Install the Frontend

The core application lives at the repository root and uses Vite for both development and production builds.

# 1. Clone the repository

git clone https://github.com/BraveOPotato/FckSignups.git && cd FckSignups

# 2. Install dependencies (React, Vite, TypeScript, etc.)

npm install

Key dependencies are declared in package.json at the repository root, including vite, react, react-dom, and @types/react for TypeScript support.

Start the Development Server

Launch the Vite dev server with a single npm script:

# 3. Start the development server at http://localhost:5173

npm run dev

This executes vite as declared in package.json's scripts section. Vite provides:

• Hot Module Replacement (HMR) for instant code updates
• TypeScript transpilation without separate tsc step
• ESM-first bundling for fast cold starts

Understanding the Project Structure

Knowing where critical files live helps when extending the application:

Path	Purpose
src/main.tsx	React entry point that creates the root and renders <App />
src/styles/index.css	Global styles with Space Grotesk and Inter fonts
public/fonts/	Self-hosted web font files
src/data/schema.js	JSON schema defining tool entry fields (id, name, url, category, etc.)
vite.config.mts	Vite configuration with TypeScript support

Front-End Architecture

In src/main.tsx, the application bootstrap follows standard React 18 patterns:

// Creates React root and mounts the App component
// Located at: src/main.tsx
createRoot(document.getElementById('root')!).render(<App />);

Custom hooks in src/hooks/ handle data flow:

• useTools.ts — Fetches tool listings from static JSON or worker API
• useReport.ts — Manages tool reporting state
• useModal.ts — Controls modal visibility and content

UI components like ToolCard, Header, and Footer assemble the presentation layer.

Optional: Run the Cloudflare Worker Locally

The Cloudflare Worker provides server-side endpoints for tool submission, suggestions, and reporting. It lives in the cloudflare-worker/ directory and runs independently of the React frontend.

Install Wrangler CLI

# Install Cloudflare's Workers CLI globally

npm install -g @cloudflare/wrangler

Start the Worker in Development Mode

cd cloudflare-worker

# Launch local worker at http://127.0.0.1:8787

wrangler dev

The worker entry point at cloudflare-worker/worker.ts routes requests to handlers:

Handler File	Endpoint Purpose
handleSubmitTool.ts	Processes new tool submissions via /api/submit-tool
handleSuggestTool.ts	Handles tool suggestions via /api/suggest-tool
handleReportTool.ts	Processes tool reports via /api/report-tool

Connect Frontend to Local Worker

By default, the frontend points to production API URLs. To test against your local worker, modify src/constants/global.tsx:

// Change from production URL to local development
export const API_URL = 'http://127.0.0.1:8787';

The useTools hook and other data-fetching utilities will now communicate with your locally running worker instead of remote endpoints.

Available npm Scripts

The package.json defines these development workflows:

Script	Command	Purpose
dev	vite	Start development server with HMR
build	tsc && vite build	Type-check and bundle for production
preview	vite preview	Serve production build locally

# Build for production

npm run build

# Preview production build

npm run preview

Troubleshooting Common Issues

Port 5173 already in use

# Specify alternative port

npm run dev -- --port 3000

Worker connections fail

Verify Wrangler is running and API_URL in src/constants/global.tsx matches the address shown in wrangler dev output (typically http://127.0.0.1:8787).

TypeScript errors during build

Run npx tsc --noEmit separately to isolate type issues before Vite bundling begins.

Summary

Setting up FckSignups locally requires minimal configuration:

• Three commands clone, install, and start the Vite dev server at localhost:5173
• No database or authentication setup needed for core functionality
• Optional Cloudflare Worker runs via wrangler dev for testing API endpoints
• Single constant change (API_URL) connects frontend to local worker

The project's architecture keeps frontend and edge concerns separated, making local development predictable and fast.

Frequently Asked Questions

What Node.js version does FckSignups require?

The project builds successfully on Node.js 18 LTS or newer. Vite 5.x and the React 18 ecosystem in package.json target modern Node features while maintaining broad compatibility.

Do I need the Cloudflare Worker to run the UI?

No. The React frontend functions fully without the worker, displaying tools from static JSON data. The worker only enables interactive features: submitting new tools, suggesting edits, and reporting entries. For UI development and browsing, npm run dev alone suffices.

How do I add custom fonts to the local build?

Place font files in public/fonts/ and reference them in src/styles/index.css. The project currently uses Space Grotesk and Inter loaded via @font-face declarations—follow this pattern for additional typefaces.

Where is the tool data stored?

Tool definitions reside in src/data/schema.js as a JSON-compatible schema describing fields like id, name, url, and category. Runtime data loads through useTools.ts, which can source from static JSON files or the worker API depending on configuration.

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