Minimal Qwik pre-order reservation desk with optimistic receipts
Orderpulse is a compact Qwik pet project for a fictional pre-order product. The product shell stays static, while reservation receipts appear immediately, sync after the UI responds, and remain retryable if the mock sync fails.
- Static-first Qwik City project with the Qwik static adapter, not Netlify Edge
- Distinct reservation-table composition with product card, availability strip, form, receipt stack, and pulse log
- Optimistic reservation receipts that appear before mock sync confirmation
- Retryable failed receipts and local browser persistence
- Quantity, tier, region, and note controls without any external state library
- Tailwind CSS 4 with a warm editorial product palette
This project shows Qwik as a better fit for static pages that still need meaningful interaction:
- The product story is useful as static HTML
- Form handlers wake only after user interaction
- The reservation receipt appears immediately
- Failed optimistic work stays visible and retryable
| Layer | Technology |
|---|---|
| Framework | Qwik 1.19 |
| Routing | Qwik City |
| Styling | Tailwind CSS 4 + custom CSS tokens |
| State | Qwik useStore and optimistic local mutations |
| Persistence | localStorage |
| Deployment | Static output for Netlify |
qwik-order-pulse-reservation/
├── adapters/
│ └── static/
│ └── vite.config.ts
├── public/
│ ├── favicon.svg
│ └── manifest.json
├── src/
│ ├── lib/
│ │ └── order-pulse.ts
│ ├── routes/
│ │ └── index.tsx
│ ├── global.css
│ └── root.tsx
├── netlify.toml
├── package.json
└── README.md
npm installnpm run devThe dev script binds to 0.0.0.0 for dev containers.
npm run buildnpm run preview- Push your code to GitHub
- Connect repository to Netlify
- Build settings are auto-configured via
netlify.toml - Deploy
Qwik City uses undici during build and preview work. undici tracks modern Node Web API support closely, so newer undici releases can require newer Node versions. If this project keeps undici floating with "undici": "*", keep Netlify and CI on a fresh Node version; newer Node is the safer default. The included netlify.toml sets the build runtime explicitly for that reason.
MIT License. See LICENSE.