Project
Roulette

Multi-Step Wizard

A long form broken into steps that never loses your answers.

IntermediateWeb appUI component10–20hAI-buildable 4/5no setup

A wizard where each step validates independently, navigation backwards preserves everything, and some steps only appear based on earlier answers. The conditional step graph is what makes it more than a carousel of forms.

UI
Logic
Useful

Hosting · Free forever

Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.

Deploy it and share a link.

Core features · 7

  • Steps validate independently before allowing progression
  • Navigating backwards preserves all entered data
  • Some steps appear conditionally based on earlier answers
  • A progress indicator reflects the actual remaining path
  • A review step summarises everything with links back to edit
  • Refreshing mid-wizard restores position and data
  • The browser back button moves between steps as expected

The interesting part

  • A progress indicator that is honest when the path length varies
  • Syncing wizard position with browser history
  • Validating only visited steps on final submit

Once it works

  • Add a save-and-resume-later link
  • Add per-step autosave to a draft
  • Add branching that can rejoin a common path

Suggested stack

reacttypescripttailwindreact-hook-formzod

Track it