Skip to main content

​
Overview

Who To Bother is built with modern web technologies focused on performance, type safety, and developer experience. The application is deployed on Cloudflare Pages and uses React 19 with TanStack Start for routing.

​
Core Technologies

​
Frontend Framework

​
React
19.1.0
Modern React with concurrent features and server components support.
  • Latest stable version with improved performance
  • Server Components for optimal data fetching
  • Suspense boundaries for progressive loading
​
TypeScript
5.x
Full type safety across the codebase.Configuration (tsconfig.json):
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "target": "ES6",
    "strict": true,
    "jsx": "react-jsx",
    "moduleResolution": "bundler",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

​
Routing & Server Framework

​
TanStack Start
1.134.10
Full-stack React framework with file-based routing.
  • Server-side rendering (SSR)
  • API routes in src/app/api/
  • File-based routing in src/app/
  • Deployed as Cloudflare Workers
Configuration (vite.config.ts):
tanstackStart({
  srcDirectory: "src",
  router: {
    routesDirectory: "app",
  },
})
​
TanStack Router
1.134.9
Type-safe routing with automatic route generation.
  • Generated route tree in src/routeTree.gen.ts
  • Type-safe navigation and params
  • Nested layouts and error boundaries

​
Build Tools

​
Bundler & Development

​
Vite
rolldown-vite@latest
Next-generation frontend tooling using Rolldown.Development Server:
  • Port: 3311
  • HMR timeout: 30 seconds
  • Fast refresh for instant updates
Build Optimizations:
  • Advanced chunk splitting for React vendor code
  • Tree-shaking and minification
  • Asset optimization
​
Cloudflare Vite Plugin
1.13.18
Enables Cloudflare Pages integration with Vite.
cloudflare({ 
  viteEnvironment: { name: "ssr" } 
})

​
Code Quality

​
Ultracite
6.3.10
Zero-config Biome preset for strict code quality standards.Commands:
# Auto-fix formatting and linting issues
npx ultracite fix

# Check for issues without fixing
npx ultracite check

# Diagnose setup
npx ultracite doctor
  • Rust-based for extremely fast linting
  • Automatic formatting on save
  • Most issues auto-fixable
​
Biome
2.3.8
Fast formatter and linter (underlying engine for Ultracite).Enforces:
  • Code formatting standards
  • React best practices
  • Accessibility rules
  • Performance optimizations

​
Styling

​
Tailwind CSS
4.1.9
Utility-first CSS framework with Vite integration.
// vite.config.ts
plugins: [
  tailwindcss(),
  // ...
]
  • JIT compilation for fast builds
  • Custom design tokens
  • Dark mode support
​
Tailwind Animate
1.0.7
Animation utilities for Tailwind CSS
​
tw-animate-css
1.3.3
Additional animation utilities
​
class-variance-authority
0.7.1
Type-safe variant management for components.Used for creating reusable component variants with TypeScript support.
​
clsx
2.1.1
Conditional className utility
​
tailwind-merge
2.5.5
Merge Tailwind classes without conflicts

​
UI Components

​
Radix UI Primitives

Accessible, unstyled component primitives from Radix UI:
  • @radix-ui/react-checkbox (1.1.3)
  • @radix-ui/react-label (2.1.1)
  • @radix-ui/react-radio-group (1.2.2)
  • @radix-ui/react-select (2.1.4)
  • @radix-ui/react-slider (1.2.2)
  • @radix-ui/react-switch (1.1.2)
  • @radix-ui/react-toggle (1.1.1)
  • @radix-ui/react-toggle-group (1.1.1)

​
Additional UI Libraries

​
cmdk
1.0.4
Command menu component (Command+K interface)
​
sonner
1.7.4
Toast notifications system
​
vaul
0.9.9
Drawer component for mobile interfaces
​
embla-carousel-react
8.5.1
Carousel/slider component
​
lucide-react
0.454.0
Icon library with 1000+ icons
​
react-resizable-panels
2.1.7
Resizable panel layouts

​
Data & Validation

​
Valibot
1.0.0
Schema validation library for runtime type checking.Key Features:
  • Single source of truth for data schema
  • TypeScript type inference with InferOutput
  • Custom error messages
  • Pipe-based validation chains
Usage:
import { object, string, pipe, minLength } from "valibot";

const Schema = object({
  id: pipe(
    string(), 
    minLength(1, "ID is required")
  ),
});
See Data Schema for complete schema documentation.
​
@valibot/to-json-schema
1.0.0
Generate JSON Schema from Valibot schemas for IDE autocomplete support.
pnpm generate-schema

​
Forms & State

​
TanStack Form
1.27.1
Headless form management with type-safe validation.
  • Field-level validation
  • Form state management
  • Integration with Valibot via adapter
​
@tanstack/valibot-form-adapter
0.42.1
Adapter connecting TanStack Form with Valibot validation
​
nuqs
2.7.3
Type-safe URL search params state management

​
Search & Data Visualization

​
Fuse.js
7.1.0
Fuzzy search library for client-side search functionality.Used for searching companies and contacts.
​
recharts
2.15.4
Composable charting library for React.Used for statistics and data visualization.
​
date-fns
4.1.0
Modern date utility library

​
Authentication

​
better-auth
1.4.5
Authentication library for the contribution workflow.Manages user authentication for GitHub integration when contributing companies.

​
Deployment & Hosting

​
Cloudflare Pages

​
wrangler
4.45.3
Cloudflare CLI for deployment and development.Configuration (wrangler.jsonc):
{
  "name": "who-to-bother-at-cf",
  "compatibility_date": "2025-09-02",
  "compatibility_flags": ["nodejs_compat"],
  "main": "@tanstack/react-start/server-entry",
  "placement": {
    "mode": "smart"
  },
  "observability": {
    "logs": {
      "enabled": true,
      "invocation_logs": true
    }
  }
}
Commands:
# Deploy to production
pnpm deploy

# Generate Cloudflare types
pnpm cf-typegen
​
@cloudflare/vite-plugin
1.13.18
Vite integration for Cloudflare Workers
Custom Domains:
  • who-to-bother-at.com
  • bother.at
  • whotobotherat.com
  • whotobother.at

​
Fonts

​
Geist Sans
5.2.5
Primary sans-serif font by Vercel
​
Geist Mono
5.2.7
Monospace font for code
Loaded via @fontsource packages for self-hosting and optimal performance.

​
Additional Utilities

​
@takumi-rs/helpers
0.45.3
Rust-powered helper utilities compiled to WebAssembly
​
@takumi-rs/wasm
0.45.3
WebAssembly runtime for performance-critical operations
​
input-otp
1.4.1
One-time password input component
​
react-day-picker
9.8.0
Date picker component

​
Build Scripts

Custom build scripts in src/scripts/:

​
Favicon Generation

pnpm generate-favicons
Generates favicon assets from source images.

​
Sitemap Generation

pnpm generate-sitemap
Creates sitemap.xml for SEO with all company pages.

​
Schema Validation

pnpm validate
Validates all company JSON files against the Valibot schema. Runs automatically before builds.

​
JSON Schema Generation

pnpm generate-schema
Generates JSON Schema from Valibot schema for IDE support.

​
Development Workflow

​
Local Development

# Install dependencies
pnpm install

# Start dev server (with pre-build scripts)
pnpm dev

# Build for production
pnpm build

​
Git Hooks

​
lefthook
2.0.9
Git hooks manager for running checks before commits.Typically runs:
  • Code formatting (Ultracite)
  • Type checking
  • Schema validation

​
Architecture Decisions

​
Why Valibot over Zod?

  • Performance: Smaller bundle size (~1kb vs ~10kb)
  • Type Inference: Direct InferOutput type utility
  • Composability: Pipe-based validation chains
  • Error Messages: Built-in custom error messages

​
Why TanStack Start?

  • Type Safety: Full type inference for routes and loaders
  • Performance: Automatic code splitting and streaming SSR
  • Developer Experience: File-based routing with hot reload
  • Cloudflare: First-class Workers/Pages support

​
Why Cloudflare Pages?

  • Global Performance: Edge deployment in 300+ cities
  • Cost: Free tier for open-source projects
  • DX: Automatic deployments from GitHub
  • Reliability: 100% uptime SLA

Build docs developers (and LLMs) love

Get started for freeTalk to us