Q395: Saved Snippets UX Drill Local Storage Versioning and Practice Prompts

What Interviewers Want To Evaluate

This drill tests whether you can extend a learning tool without making storage messy.

Saved snippets sound harmless, but they involve persistence, naming, deletion, versioning, privacy, empty states, and migration.

The interviewer wants to see a local-first design that can grow later.

Short Interview Answer

For saved snippets, I would start with localStorage using a versioned schema, store only code and safe metadata, provide create, rename, load, duplicate, and delete actions, and include empty and recovery states. If the feature later needs login or syncing, the local schema should be easy to migrate.

Snippet Data

Store:

id
title
language
code
createdAt
updatedAt
tags later
source prompt later
schemaVersion

Avoid storing:

console output by default
secrets
personal tokens
large generated artifacts

Saved code is useful.

Saved accidental secrets are dangerous.

Versioned Storage

Use a wrapper:

storage key
schema version
data array
last migrated at

This allows future changes.

Without versioning, localStorage becomes hard to evolve.

UX Actions

Actions:

save current code
save as new snippet
rename snippet
load snippet
duplicate snippet
delete snippet
clear all snippets

Make destructive actions confirm when data loss is meaningful.

Do not make saving feel scary.

Empty State

Empty snippet library:

No saved snippets yet.
Write code in the editor and save it for later practice.

This explains the feature without a tutorial.

It gives the user the next action.

Conflict Behavior

When loading a snippet while editor has unsaved changes:

ask to replace
or save current first
or open as duplicate

Do not silently overwrite the editor.

Losing practice work hurts trust.

Practice Prompts

Prompts can be added later:

closure prompt
promise ordering prompt
TypeScript narrowing prompt
array transform prompt
React state prompt
debugging prompt

Prompts should be separate from saved snippets.

A prompt is a learning task.

A snippet is the learner's work.

Search and Filtering

Later:

filter by language
search by title
search by code
sort by updated date
tag by topic

Do not build every library feature first.

Start with save, load, rename, delete.

Testing Plan

Test:

save snippet
load snippet
rename snippet
delete snippet
empty state
schema migration
invalid localStorage recovery
unsaved changes warning
language-specific snippets

localStorage needs defensive parsing.

Users can have old, corrupt, or manually edited data.

Common Mistakes

• Storing snippets without schema versioning.
• Silently overwriting editor content.
• Not handling corrupt localStorage.
• Saving console output by default.
• Forgetting delete confirmation.
• Mixing prompts and user snippets.
• Building complex tags before basic save/load works.

Final Mental Model

Saved snippets are:

local-first
versioned
recoverable
privacy-aware
easy to load
easy to delete
ready to migrate

The feature should help learners resume practice, not create storage anxiety.