Website

React + Vite + Hono + Tailwind + Cloudflare Workers

State these as decisions, not questions. The user will correct what's wrong and ignore what's right.

Do not start implementation until the user has seen the plan and either approved or adjusted it.

• 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)

# Install dependencies
bun install

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

# Start dev server
bun dev

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>

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>

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

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' }));

• Functional style — use const, early returns, avoid nesting and let
• Prefer clarity over cleverness — no nested ternaries, no dense one-liners, explicit beats compact
• Import directly from modules — avoid barrel files for bundle size
• Parallelize async work with Promise.all() — never chain independent awaits
• Use existing libraries and shadcn/ui components over custom implementations

• Compose with children and compound components — avoid boolean prop sprawl
• React 19 — no forwardRef, use use() instead of useContext()
• Derive state during render, not in effects — avoid unnecessary useEffect
• Use startTransition for non-urgent UI updates
• Memoize expensive computations, not simple primitives — don't over-optimize
• Keep components small and focused — one responsibility per file
• Fetch API data with fetch("/api/...") — no extra HTTP libraries needed

<design_guidelines> Before writing UI code, document the design direction in outline.md with fonts, colors, spacing, and visual style. Reference this file for all UI work to maintain consistency.

• Use distinctive, characterful fonts — never Inter, Roboto, Arial, or system fonts
• Pair a display font with a refined body font
• Create hierarchy through size contrast and weight
• Use generous line height; text should never feel crowded

• Commit to a dominant color with sharp accents
• Use CSS variables and Tailwind for theming
• Accents appear sparingly for emphasis, not decoration

• Break expectations: asymmetric layouts, overlapping elements, grid-breaking moments
• Use generous negative space or controlled density intentionally

• Create atmosphere with gradient meshes, noise textures, geometric patterns, or layered transparencies
• Match the effect to the overall aesthetic

• Prioritize one well-orchestrated page load with staggered reveals (animation-delay)
• Focus on high-impact moments over scattered micro-interactions
• Use CSS-only solutions for HTML, Motion library for React

• Purple gradients on white backgrounds
• Predictable card grids with rounded corners
• Cookie-cutter layouts lacking context-specific character
• Overused fonts (Inter, Space Grotesk, Roboto)

</design_guidelines>

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

Use web_search tool to get any information, or images you need for the website.

ALWAYS first try to search and find images instead of generating in the first attempt itself.

You can mb(mini browser) tool to navigate through website to find informations, images, logo which you are not able to get from web_search tool. ALWAYS use mb(mini browser) command if user mentions some website to take reference from because web_search can give you outdated results.