Website

React + Vite + Hono + Tailwind + Cloudflare Workers

Project Structure

• src/web/ — React frontend: pages, components, styles, hooks
• src/api/ — Hono API server (/api/*), database schema and migrations
• public/ — Static assets (favicon, og-image, logo)

Quick Start

# Install dependencies
bun install

# Generate types and run migrations
bun cf-typegen
bun db:generate
bun db:migrate

# Start dev server
bun dev

shadcn/ui

Add components you need, customize them however you want.

bun x shadcn@latest add button card dialog

Components land in src/web/components/ui/, import with @/components/ui/button.

import { Button } from "@/components/ui/button"

<Button variant="outline">Click me</Button>

Routing

Client-side routing uses wouter. Add routes in src/web/app.tsx:

import { Route, Switch } from "wouter";

<Switch>
  <Route path="/" component={Home} />
  <Route path="/about" component={About} />
</Switch>

Database

Uses Drizzle ORM with Cloudflare D1.

bun db:generate       # Generate migrations from schema
bun db:migrate        # Apply migrations locally

Schema is in src/api/database/schema.ts, migrations in src/api/migrations/.

API

Backend uses Hono on Cloudflare Workers. All routes are under /api/* in src/api/index.ts.

app.get('/api/hello', (c) => c.json({ message: 'Hello' }));

Config

website.config.json contains the site name, description, and URL — use it as the source of truth for site-wide values.

Agent Rules

CRITICAL: This project uses Tailwind CSS v4. No tailwind.config.js, no postcss.config.js, no @tailwind directives. All configuration is CSS-first via @theme in src/web/styles.css and the @tailwindcss/vite plugin. Do NOT use Tailwind v3 syntax.

IMPORTANT: Don't assume how a package works from memory. Run bun build to catch type errors. If anything fails, check the package docs.