Minimal Qwik waitlist console with optimistic local outbox state
Readyline is a compact Qwik pet project for a fictional waitlist desk. The page renders as static HTML first, while waitlist tickets 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 paper-queue composition with a vertical rail, access slip, latest ticket, and outbox tape
- Optimistic waitlist tickets that appear before mock sync confirmation
- Retryable failed tickets, local outbox logs, and browser persistence
- Name, email, role, team size, and note controls without any external state library
- Tailwind CSS 4 with a tactile paper-and-ink visual palette
This project shows Qwik as a better fit for static pages that still need meaningful interaction:
- The waitlist story is useful as static HTML
- Form handlers wake only after user interaction
- The waitlist ticket 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-readyline-waitlist-console/
├── adapters/
│ └── static/
│ └── vite.config.ts
├── public/
│ ├── favicon.svg
│ └── manifest.json
├── src/
│ ├── lib/
│ │ └── readyline.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.