Vite + React + Webflow Cloud — Simple Booking

A minimal booking engine template: a Vite + React + TypeScript app served by a Hono worker on Cloudflare, configured for Webflow Cloud. Pick a service, a provider, and a time — with rules for online vs. call-only services, deposit requirements, and post-booking instructions.

Project structure

.
├── index.html
├── package.json
├── public/
├── src/
│   ├── App.tsx
│   ├── booking/
│   │   ├── BookingFlow.tsx
│   │   ├── booking.css
│   │   ├── data.ts
│   │   ├── slots.ts
│   │   └── types.ts
│   ├── globals.d.ts
│   ├── index.css
│   ├── main.tsx
│   └── worker.ts
├── tsconfig.json
├── tsconfig.app.json
├── tsconfig.node.json
├── vite.config.ts
├── webflow.json
├── worker-configuration.d.ts
└── wrangler.json

Commands

Command	Action
npm install	Install dependencies.
npm run dev	Generate Wrangler types, then start the Vite dev server (http://localhost:5173).
npm run build	Generate Wrangler types, type-check, then production-build the app to dist/.
npm run preview	Generate Wrangler types, then serve the production build locally.
npm run deploy	Deploys with webflow cloud deploy.

What's modeled

Inspired by a real agency request for medical-center bookings:

• 30-min Consultation — bookable online, no deposit
• 60-min Therapeutic Massage — bookable online, 50% deposit required, post-booking pre-visit instructions
• MRI Scan — call-only, full prepayment (online flow blocks and shows the phone number)

A small Hono worker (src/worker.ts) serves the built React app via the Cloudflare ASSETS binding. State is in-memory (no database) — wire in your DB / payments / email when you adopt it.

Learn more

• Vite documentation
• Webflow Cloud