Frontend Developer project
Build a multi-step onboarding form that survives a refresh
A three-step signup form where losing progress on refresh is the bug that gets a resume thrown out — state management and validation are the actual skill being tested here, not the visual design.
The brief
Build a three-step onboarding form: step one collects account details (name, email, password with strength feedback), step two collects profile details (role, company size, a multi-select of interests), step three is a review screen showing everything entered with an edit link back to the relevant step. Each field validates as the user leaves it, not only on final submit, and every error message says what to do, not just what's wrong. The user's progress and entered data must survive a full page refresh on any step, and there is no backend — persist to localStorage or an equivalent.
Suggested stack
What you hand in
- A public GitHub repository with the running app and a README
- The README explains how to run it and how state persistence works
- A short section in the README naming one edge case you handled deliberately
Grading happens against the rubric below, so read it before you start — not after.
How this is graded
Published in advance and weighted out of 100. Nothing here is a surprise.
Fields validate on blur, not only on submit. Every error message names the specific problem and what to change, not a generic 'invalid input'. A user cannot advance past a step with invalid data.
Refreshing on step two returns the user to step two with every previously entered value intact, including partially-filled fields. Stale or corrupted saved state fails gracefully instead of crashing the form.
Errors are associated with their field for screen readers, focus moves to the first invalid field on a failed attempt to advance, and errors aren't conveyed by colour alone.
Each step is its own component, validation logic isn't duplicated per field, and the review step reads from the same state the input steps write to rather than a second copy.
No console errors, the back/edit links from the review step land on the right step with data intact, no leftover placeholder text or commented-out code.
Why this project is worth your weekend
- Multi-step forms with real persistence are one of the most commonly assigned take-home tasks at product companies, because they reveal state management skill fast.
- Losing a user's data on refresh is the single most common way a real onboarding flow loses signups.
- An interviewer can break it in ten seconds by filling step two and refreshing — there's nowhere to hide a shortcut.
Where people lose points
- Storing all step state in a single component so the review step and the input steps quietly get out of sync.
- Persisting to localStorage but never handling the case where the saved data is missing a field the form now expects.
- Validating only on final submit, so a user only discovers a bad email address after filling in two more steps.
Other Frontend Developer projects
Two or three of these turn an empty resume into a portfolio.
Built it? Get it scored against this rubric.
Submit your work and get a score on every criterion above, written feedback, and three resume bullets you can use straight away.