# How to Set Up FckSignups Locally: Complete Development Guide

> Learn to set up FckSignups locally with this easy development guide. Clone, install, and start the React TypeScript Vite app in just three commands.

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

---

**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.

```bash

# 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`](https://github.com/BraveOPotato/FckSignups/blob/main/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:

```bash

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

npm run dev

```

This executes `vite` as declared in [`package.json`](https://github.com/BraveOPotato/FckSignups/blob/main/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`](https://github.com/BraveOPotato/FckSignups/blob/main/src/main.tsx) | React entry point that creates the root and renders `<App />` |
| [`src/styles/index.css`](https://github.com/BraveOPotato/FckSignups/blob/main/src/styles/index.css) | Global styles with Space Grotesk and Inter fonts |
| `public/fonts/` | Self-hosted web font files |
| [`src/data/schema.js`](https://github.com/BraveOPotato/FckSignups/blob/main/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`](https://github.com/BraveOPotato/FckSignups/blob/main/src/main.tsx), the application bootstrap follows standard React 18 patterns:

```typescript
// 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`](https://github.com/BraveOPotato/FckSignups/blob/main/useTools.ts)** — Fetches tool listings from static JSON or worker API
- **[`useReport.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/useReport.ts)** — Manages tool reporting state
- **[`useModal.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/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

```bash

# Install Cloudflare's Workers CLI globally

npm install -g @cloudflare/wrangler

```

### Start the Worker in Development Mode

```bash
cd cloudflare-worker

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

wrangler dev

```

The worker entry point at [`cloudflare-worker/worker.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/cloudflare-worker/worker.ts) routes requests to handlers:

| Handler File | Endpoint Purpose |
|--------------|----------------|
| [`handleSubmitTool.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/handleSubmitTool.ts) | Processes new tool submissions via `/api/submit-tool` |
| [`handleSuggestTool.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/handleSuggestTool.ts) | Handles tool suggestions via `/api/suggest-tool` |
| [`handleReportTool.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/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`](https://github.com/BraveOPotato/FckSignups/blob/main/src/constants/global.tsx):

```typescript
// 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`](https://github.com/BraveOPotato/FckSignups/blob/main/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 |

```bash

# Build for production

npm run build

# Preview production build

npm run preview

```

## Troubleshooting Common Issues

**Port 5173 already in use**

```bash

# Specify alternative port

npm run dev -- --port 3000

```

**Worker connections fail**

Verify Wrangler is running and `API_URL` in [`src/constants/global.tsx`](https://github.com/BraveOPotato/FckSignups/blob/main/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`](https://github.com/BraveOPotato/FckSignups/blob/main/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`](https://github.com/BraveOPotato/FckSignups/blob/main/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`](https://github.com/BraveOPotato/FckSignups/blob/main/src/data/schema.js) as a JSON-compatible schema describing fields like `id`, `name`, `url`, and `category`. Runtime data loads through [`useTools.ts`](https://github.com/BraveOPotato/FckSignups/blob/main/useTools.ts), which can source from static JSON files or the worker API depending on configuration.