Q434: Implementation Drill Saved Snippets UI First Slice

What Interviewers Want To Evaluate

This drill tests whether you can design the first visible saved-snippets UI without crowding the practice workspace.

The editor and console are still the primary experience.

Snippets are supporting workflow.

The UI should make saving and loading easy without turning the page into a dashboard.

Short Interview Answer

I would add a compact saved-snippets panel below or beside the editor workflow depending on screen size.

The first version should include a title input, save current code, a language-filtered list, load action, delete action, and an empty state.

I would avoid tags, search, folders, sharing, and cloud sync until the local workflow proves useful.

Placement

Good placement:

editor and console remain side by side on desktop
snippets panel sits below the main grid or in a secondary column later
mobile stacks editor, feedback, console, snippets
save action is easy to find near editor context

The learner should still see the editor and console as the main loop.

Snippets should support recall, not dominate the screen.

Empty State

Use a useful empty state:

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

Add a disabled-looking list only if there are items missing due to filters.

Do not render a blank rectangle.

The first empty state teaches the feature.

Save Flow

Keep it simple:

enter title
click save snippet
store current code
show saved feedback
clear title or keep it for rename decision later

If title is empty, generate:

JavaScript snippet 1
TypeScript snippet 1

The user should not be blocked by naming.

List Item Design

Each item should show:

title
language
updated date
short code preview
load button
delete button

Keep cards compact.

Avoid giant previews.

The list is for recognition, not reading the whole snippet.

Load Behavior

Loading should:

replace editor code
keep console unchanged or show a system message
update feedback only after next run
confirm if current editor has unsaved changes
focus editor after load if practical

Do not auto-run loaded snippets.

The learner should choose when to execute.

Delete Behavior

Delete should be clear:

delete button on item
confirm action
remove from local store
show empty state if list becomes empty

For local-only snippets, deletion can be permanent.

Say it plainly in the confirmation text.

Responsive Behavior

On mobile:

title input full width
buttons wrap cleanly
snippet list does not overflow
code preview wraps or clamps
delete action stays reachable

This feature must not break the already large practice page.

Testing Plan

Verify:

save JS snippet
save TS snippet
empty state
load snippet
delete snippet
copy code still works
run loaded code
dark mode
mobile layout
invalid storage recovery

This is a practical first-slice QA checklist.

Common Mistakes

• Putting snippets above the editor and hiding the main workflow.
• Requiring a title before saving.
• Auto-running loaded snippets.
• Making delete too easy to tap accidentally.
• Showing full code previews that make cards huge.
• Adding search and folders before there are enough snippets.

Final Mental Model

Saved snippets UI should be:

secondary
compact
language-aware
conflict-safe
easy to recover from

The best first slice helps learners save work without changing how they practice.