Q436: Implementation Drill Shipping Saved Snippets First Slice

What Interviewers Want To Evaluate

This drill tests whether you can ship a useful persistence feature without overbuilding it.

Saved snippets are valuable because learners repeat small experiments.

They may want to keep a closure example, a promise output prediction, a TypeScript narrowing example, or a debugging snippet.

The first slice should make that possible locally.

It should not become a full code notebook.

Short Interview Answer

I would ship saved snippets as a localStorage first slice.

The feature should support saving current code, naming a snippet, listing snippets for the current language, loading a snippet into the editor, deleting a snippet, and showing an empty state.

I would include basic conflict confirmation before replacing current editor code.

Cloud sync, tags, folders, and sharing can wait.

Why Local First

Local storage is enough for the first learning workflow:

save current example
come back later
load it into the editor
run it again
delete it when done

This does not require accounts.

It does not require a backend.

It keeps the feature reviewable.

It also fits the current product: a personal preparation studio.

First Slice Scope

Include:

save current code
optional snippet title
generated fallback title
language-specific list
load snippet
delete snippet
empty state
storage recovery

Skip:

cloud sync
sharing links
folders
tags
search
execution history
rename flow

The first version should be deliberately small.

User Flow

Flow:

write code
optionally enter title
save current
snippet appears in local list
load later
run manually
delete if no longer needed

Do not auto-run loaded snippets.

The learner should decide when to execute.

Loading is recall.

Running is a separate action.

Conflict Handling

Loading can replace current editor code.

If the editor has changed since the last loaded or initial value, ask for confirmation.

This prevents silent loss.

The first version can use a browser confirmation.

A custom modal can come later if the feature grows.

Language Separation

JavaScript and TypeScript snippets should be filtered by current page.

This keeps the list relevant:

JavaScript page shows JavaScript snippets
TypeScript page shows TypeScript snippets

Cross-language loading can be added later.

The first version should keep the learner’s mental model simple.

Empty State

Use a friendly empty state:

No saved snippets yet.
Save the current editor when you want to revisit this example later.

This tells the user what the panel does and how to start.

An empty state should never feel like a broken list.

Testing Plan

Verify:

save JavaScript snippet
save TypeScript snippet
generated title works
custom title works
load snippet replaces editor
load conflict confirmation appears
delete snippet removes it
empty state returns
dark mode stays readable
mobile actions wrap cleanly

This confirms the first slice.

Common Mistakes

• Requiring accounts too early.
• Adding tags and folders before basic save/load works.
• Silently replacing current editor code.
• Mixing JavaScript and TypeScript snippets without labels.
• Making snippets visually louder than the editor.
• Auto-running loaded snippets.

Final Mental Model

Saved snippets first slice should be:

local
small
language-aware
conflict-safe
easy to delete
secondary to practice

That is enough to make the practice ground feel meaningfully more useful.