Q404: Implementation Drill Saved Snippets Panel Empty States and Conflict Recovery

What Interviewers Want To Evaluate

This drill tests whether you can add persistence without creating confusing user flows.

Saved snippets are useful only if users trust that their drafts will not disappear.

The interviewer wants to see localStorage schema design, empty states, load conflicts, delete behavior, and recovery from corrupt data.

Short Interview Answer

I would build saved snippets with a versioned localStorage schema, a simple panel for save, load, rename, duplicate, and delete, and clear empty states. If the editor has unsaved changes, loading a snippet should ask whether to replace, save first, or cancel. Invalid stored data should be recoverable instead of crashing the practice page.

Panel Purpose

The snippets panel helps users:

save useful code
return to examples later
compare approaches
practice by topic
avoid losing drafts

It should not become a complex file manager in the first version.

Start simple.

Storage Schema

Use:

schemaVersion
snippets array
updatedAt

Each snippet:

id
title
language
code
createdAt
updatedAt

Future fields can include tags, prompt id, and notes.

Versioning makes that safe.

Empty State

Show:

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

This explains the feature without a tutorial block.

Add a visible save action nearby.

Save Flow

Allow:

save current code
save as new
rename saved snippet
duplicate snippet

If title is empty, generate a useful default:

JavaScript snippet 1
TypeScript narrowing example

Good defaults reduce friction.

Load Conflict

If current editor differs from last saved state:

show replace confirmation
offer save current first
offer cancel

Do not silently replace the editor.

That is the fastest way to lose user trust.

Delete Behavior

Delete should:

confirm meaningful deletion
make target clear
not delete current editor content unless explicitly chosen
show success feedback

For localStorage-only features, undo can be considered later.

Confirmation is enough for a first version.

Corrupt Storage Recovery

localStorage can be:

missing
old version
invalid JSON
wrong shape
manually edited
too large

Handle this defensively:

try parse
validate shape
fallback to empty library
offer reset storage

The page should not crash because saved snippets are corrupt.

Testing Plan

Test:

empty state
save snippet
load snippet
rename snippet
duplicate snippet
delete snippet
load conflict
invalid localStorage
version migration
language separation

Persistence features deserve tests because bugs can destroy user work.

Common Mistakes

• Saving without schema version.
• Loading snippets over unsaved code silently.
• Crashing on invalid localStorage.
• Mixing JS and TS snippets without labels.
• Deleting saved code without confirmation.
• Building tags and folders before save/load is reliable.
• Storing console output by default.

Final Mental Model

Saved snippets are:

trust
persistence
clear actions
conflict recovery
defensive parsing
future migration

The feature succeeds when learners feel safe experimenting.