Designing a user-friendly autosave functionality — Part 2
A while ago, I wrote an article on ‘Designing a user-friendly autosave functionality’. It was primarily aimed at autosaving work done in applications. However, a lot of it could be used for forms (multi-step ones).
And it was mostly theory.
In this article, we’ll actually write code that can enable this auto-save for forms and see how it can be used to create interesting prompts in the user journey.
tl;dr
Demo page: https://autosave.rkakodker-dev.cloud/
GitHub link: medicantBias117/Auto-Save-Demo (github.com)
Objectives
The objectives here are simple:
- Demonstrate auto-saving mechanisms in browser across 2 journeys.
- Enable field validation (content & uniqueness)
- Write to database the final values.
I won’t be actually writing to database the values but will demonstrate how this can be handled on the server side.
For our tech stack, I’ll be using Vue3 with Tailwind & Daisy UI for beautiful looking UI.
I’ll add that I’m not a developer, and hence the code produced should not be taken into production. It’s to be used as a direction/demonstration.
User Journey
Before we begin, let’s set the user journey.