I have a wizard where the whole page fills up with a step, user selects the step and clicks next when the step is complete. User can go back and forth between steps and there are provisions to restore previous states. Implementation is in React. I have 2 options/workflows that I can think of:

I. No autosave between steps unless user asks to save a draft stage

1. When user enters wizard/create, query a Staging Ddb for any previously started wizard state for the current user_id

   a. If nothing is received, issue a POST request to the Staging DDB which creates a record for the user_id/request_id combination with no value. Go to step 2.

   b. If a record is found in Staging Ddb, ask the user if they want to restore previous wizard state:

   i.  If yes, restore wizard and move the user to the restored state (say, step 3 of the wizard). Go to step 2.
   
   ii. If user says no, delete the value of the `user_id`/`request_id` combination from the table and start the wizard from the beginning. Go to step 2.
   

2. With each subsequent Save and Exit, a PATCH request is sent to the Staging table with the user_id/request_id

3. When user reaches the end of the wizard with all validations passed, then issue a POST request with the value in Staging table to the Main table. Delete the entry in the staging table for this particular host_id/request_id combination once the POST request is successful.

II. Autosave between steps when the user clicks next to go to the next question

The main table will always be the source of Truth with a complete/incomplete status for the wizardStatus. The complete flag is turned on when the wizard state is complete:

1. When user enters wizard/create, query the Main Ddb for any previously started wizard state for the current user_id with the status incomplete for wizardState

   a. If nothing is received, issue a POST request to the Main DDB which creates a record for the user_id/request_id combination and no value. Go to step 2.

   b. If a record is found in Main Ddb, ask the user if they want to restore previous wizard state.

   i.  If yes, restore wizard and move the user to the restored state (say, step 3 of the wizard). Go to step 2.
   
   ii. If user says no, delete the value of the `user_id`/`request_id` combination from the `Main` table and start the wizard from the beginning. Go to step 2.
   

2. With each subsequent Next after form validation for that page is done, a PATCH request is sent to the Main table with the user_id/request_id

3. When user reaches the end of the wizard with all validations passed, then the status of wizardState is set to complete with the final PATCH request for that step.

On evaluating the 2 approaches, it seems approach 2 will issue more requests with each subsequent Next, but lead to better user experience with crashes of the web-browser, OS, etc. I’m leaning towards starting with approach I to begin with, and as the website sees more traffic/earns revenue, I switch to approach II for better user experience, where I can also afford more requests/resources.

Is there an alternative approach? Anything I can improve?