The Scenario
Users are complaining that their browser crashed on Step 3 and they lost all their work. The product manager wants the form to automatically save progress to the backend every time a field is blurred (loses focus), and to restore that draft if the user comes back later.
The Brief
Implement an Auto-Save feature. 1) Write a `useDebounce` or `onBlur` logic to trigger an API save request without spamming the server. 2) Implement an initialization sequence that checks the server for a "draft" upon load and hydrates the form state. 3) Provide visual feedback to the user (e.g., "Saving..." -> "Saved at 10:42 AM").
Deliverables
- The React code managing the auto-save trigger (debounced or onBlur)
- The initialization logic (fetching the draft and hydrating the form library)
- The visual indicator logic (handling saving/error states gracefully without blocking the user)
Submission Guidance
The biggest risk here is a race condition: what if the user types fast and the save requests arrive out of order? Explain how you mitigate this.
Submit Your Work
Your submission is graded against the rubric on the right. If you pass, you get a public Badge URL you can share on LinkedIn. There is no draft save, so work offline first and paste your finished response here.