Building FoxyInvoice — Chapter 12: Engagement & automation — UI first, then automate

The useful part

This chapter is the engagement surface: onboarding, progress you don't lose, and gentle machines that act for the user. [All chapters and diagrams live in the public repo.] "Engagement" conjures dark-pattern streaks and notification spam. Engagement is the product working so well that leaving it half-finished feels like loss — progress the user doesn't want to abandon, moments of completion worth screenshotting, and gentle machines that act on the user's behalf.

How it works

• Each step is one decision, skippable, and writes real data — so finishing onboarding is having a workspace.
• The invoice editor has a "Save draft" that stays on the page (URL swapping to the edit route so a refresh can't duplicate it), plus local autosave with a resume banner — mid-form work survives navigation.
• The onboarding staircase (first five minutes) A new signup lands on a three-step wizard: name your business + pick currency → add your first client → "you're ready" (with the founding- code hint for testers).
• Then the dashboard's get-started checklist walks the rest: first invoice, first send, first payment link.
• The metric this staircase serves is the only one that matters early: time to first sent invoice.

What to take from it

Progress you can see (and don't want to lose) Draft save & resume, twice over. The template generator offers the same to anonymous visitors (Chapter 11's slice 1).

Details worth keeping

The psychology is honest: no dark patterns, just do...