Wizard workflow with autosave/save on exit - UX/API/Database Design Strategy evaluation

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

A Staging and Main table is maintained.

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

   a. If nothing is received, issue a POST request to the Staging DDB which creates a record in the Ddb like: {'userId': 1234}. 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, return the record to the original state, i.e. the record looks like: `{'userId`: 1234}` with no other values. Now, 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 for the userId. For example, if the step asks for email, then the value sent to the Ddb is: {'email': '[email protected]'}. In the next stage, if the address is being asked, then it's, {'address': '123 St, XYZ'} and so on.

3. When user reaches the end of the wizard with all validations passed at each stage, 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 userId once the POST request is successful. Record in the Staging table before delete and the Main table record both look like this:

{
  'userId': 1234,
  'username': johndoe1
  'email': '[email protected]',
  'address': '123 St, XYZ',
  'phoneno': '12345678'
}

I'm considering NoSQL for Staging and a SQL table for Main table. In terms of validations, the user can store only the current step (from which 'Save & Exit' is clicked) in invalid state when the wizard is incomplete, but no previous step may be in invalid state. User resumes from the step they where they clicked 'Save & Exit'.

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 flag for a wizardStatus field:

1. When user enters wizard, query the Main Ddb for any previously started wizard state for the current userId 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 userId/wizardState=incomplete combination. Go to step 2.

   b. If a record is found in Main Ddb with wizardState=incomplete, 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, update the record to have only the `userId` and `wizardState` values in 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 userId. Same as before, the PATCH request contains: {'email': '[email protected]'} or {'address': '123 St, XYZ'} depending upon the user-provided input for that stage. User can also optionally click 'Save & Exit' as before which saves the current state in the Main table with status incomplete.

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. Record in the Main Ddb may look like:

{
  'userId': 1234,
  'username': 'johndoe1'
  'email': '[email protected]',
  'address': '123 St, XYZ',
  'phoneno': '12345678',
  'wizardState': 'complete'
}

In this case, NoSQL will be used for the Main table. Alternatively, we can have this as a staging table and when the wizardStatus is complete, move the record to a SQL table. In terms of validations, the user can store the current step (from which 'Save & Exit' is clicked) in invalid state when the wizard is incomplete, as before. When Next is clicked for saving, the step will not be saved until the validation is complete for that page.

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.

• I'm looking for validation of both of these strategies and trying to understand if this seems reasonable/if there are any improvements that can be suggested.
• Does the sequence of POST/PATCH and NOSQL/SQL strategy also make sense? I do prefer the Main table to be SQL due to joins/other requirements, so considering to always follow a Staging/Main table approach for the wizard.