Q433: Implementation Drill Saved Snippets Schema and Storage

What Interviewers Want To Evaluate

This drill tests whether you can design local persistence carefully before writing the UI.

Saved snippets are the next high-value practice-ground feature.

They let learners keep experiments.

They also introduce data shape, migration, invalid storage recovery, language separation, and overwrite risk.

Short Interview Answer

I would implement saved snippets with a small versioned localStorage schema.

Each snippet should include id, title, language, code, createdAt, and updatedAt.

The store should include a version field and defensive parsing.

The first slice should support save, list by language, load, delete, empty state, and basic conflict protection.

Storage Shape

Use:

type PracticeLanguage = "javascript" | "typescript";

type SavedSnippet = {
  id: string;
  language: PracticeLanguage;
  title: string;
  code: string;
  createdAt: string;
  updatedAt: string;
};

type SavedSnippetStore = {
  version: 1;
  snippets: SavedSnippet[];
};

This is intentionally simple.

It supports the first workflow without pretending to be a database.

Why Versioning Matters

Local storage can live for months.

The app can change during that time.

A version field helps with:

future migrations
invalid storage recovery
debugging old data
safe schema changes

Without versioning, every future change becomes guesswork.

Storage Key

Use a namespaced key:

learning-studio.practice-snippets.v1

Avoid generic keys such as:

snippets
savedCode
data

Specific keys reduce collision risk.

They also make browser debugging easier.

Defensive Parsing

When reading localStorage:

try JSON.parse
validate version
validate snippets is an array
filter invalid entries
fallback to empty store
do not crash the page

Local storage is user-controlled data.

Treat it as untrusted.

ID Strategy

For local-only snippets, use:

crypto.randomUUID()

Fallback if needed:

Date.now plus random string

The id only needs to be unique in the local store.

Do not overbuild server-style identity.

Language Separation

Snippets should keep their language.

The JavaScript page should prioritize JavaScript snippets.

The TypeScript page should prioritize TypeScript snippets.

Cross-loading can be added later, but first version should keep the mental model clear.

Conflict Protection

Loading a snippet can replace current editor content.

Handle:

editor unchanged -> load immediately
editor changed -> confirm before replacing
optional save current first later

Do not silently overwrite unsaved work.

The confirmation can be simple in the first slice.

Common Mistakes

• Saving snippets without a version field.
• Trusting localStorage shape blindly.
• Mixing JS and TS snippets without labels.
• Using vague storage keys.
• Overwriting current editor content silently.
• Adding tags, search, and sync too early.

Final Mental Model

Saved snippet storage should be:

versioned
language-aware
defensively parsed
conflict-safe
small enough to ship

This gives learners persistence without creating a fragile subsystem.